ModStart开发文档

# 数据展示

# 快速入门

ModStart\Detail\Detail 类用于快速生成详情页面，参照例子 数据表格→快速入门

可以通过如下代码快速定义个数据表单

return Detail::make('blog', function (Detail $detail) {
    // 定义显示ID列
    $detail->id('id', 'ID');
    // 定义标题字段，格式为单行文本
    $detail->text('title', '标题');
    // 定义封面字段，格式为单张图片
    $detail->image('cover', '封面');
    // 定义摘要字段，格式为多行文本
    $detail->textarea('summary', '摘要');
    // 定义内容字段，格式为富文本
    $detail->richHtml('content', '内容');
    // 定义创建时间字段，格式为简单显示
    $detail->display('created_at', '创建时间');
    // 定义更新时间字段，格式为简单显示
    $detail->display('updated_at', '更新时间');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 获取当前模型数据

在闭包内可以获取到当前模型的数据

return Detail::make('blog', function (Detail $detail) {
    dd($detail->item());
});
1
2
3

# 组件自定义hook

有两种方式修改字段的行为

① 直接继承 ModStart\Field\AbstractField 类，实现以下方法

class XxxField extends \ModStart\Field\AbstractField
{
    // 字段值序列化
    // 数据从存储系统（如数据库）读取出来，会调用此方法转换为字段 $value 值
    public function unserializeValue($value, AbstractField $field)
    {
        return $value;
    }
    
    // 字段值序列化
    // 数据提交到存储系统（如数据库）时，会调用此方法转换为存储值
    public function serializeValue($value, $model)
    {
        return $value;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

② 在使用时动态的修改方法的行为

// 字段值序列化
$field->hookValueUnserialize(function($value, AbstractField $field){
    return $value;
})/
// 字段值序列化
$field->hookValueSerialize(function($value, $model){
    return $value;
})
1
2
3
4
5
6
7
8

# 字段组件库

# areaChina 中国地区

$detail->areaChina('field', '字段名');
1

# audio 音频

$detail->audio('field', '字段名');
1

# captcha 验证码

$detail->captcha('field', '字段名');
1

# checkbox 多选

$detail->checkbox('field', '名称');
1

# code 代码

$detail->code('field', '名称');
1

# color 颜色

$detail->color('field', '字段名');
1

# currency 货币

$detail->currency('field', '字段名');
1

# date 日期

$detail->date('field', '字段名');
1

# datetime 日期时间

$detail->datetime('field', '字段名');
1

# decimal 小数

$field = $detail->decimal('field', '字段名');

// 是否显示颜色（正数绿色，负数红色）
$field->autoColor(true);
// 是否总是显示正负号
$field->signShow(true);
1
2
3
4
5
6

# display 显示

$detail->display('field','名称');
1

# file 文件

$detail->file('field', '字段名');
1

# fileTemp 临时文件

临时路径指上传到临时表 data_temp 中的图片，正式保存时会将临时图片移动到正式表 data 中。

$detail->fileTemp('field', '字段名');
1

# files 多文件

$detail->files('field', '字段名');
1

# hidden 隐藏域

$detail->hidden('field', '字段名');
1

# html HTML

$detail->html('field', '字段名');
1

# icon 图标

$detail->icon('field', '字段名');
1

# id ID

$detail->id('field', '字段名');
1

# image 单张图片

$detail->image('field', '字段名');
1

# images 多张图片

$detail->images('field', '字段名');
1

# imagesTemp 多张图片（临时路径）

临时路径指上传到临时表 data_temp 中的图片，正式保存时会将临时图片移动到正式表 data 中。

$detail->imagesTemp('field', '字段名');
1

# jsonIdItems 条目列表

字段存储的是 JSON 格式的 ID 列表，通过 ID 列表获取对应的条目名称

$grid->jsonIdItems('field', '字段名');
     // 条目选择接口
     ->selectUrl(modstart_admin_url('path/to/select'))
     // 指定预览接口
     ->previewUrl(modstart_admin_url('path/to/preview'))
     // 指定条目样式，ITEM_STYLE_TITLE、ITEM_STYLE_COVER_TITLE
     ->itemStyle(JsonIdItems::ITEM_STYLE_TITLE);
1
2
3
4
5
6
7

条目选择接口需要返回

{
    "code": 0,
    "data": {
        "records": [
            {"id": 1, "title": "选项1", "cover": "http://xxx.com/xxx.jpg"},
            {"id": 2, "title": "选项2", "cover": "http://xxx.com/xxx.jpg"}
        ]
    }
}
1
2
3
4
5
6
7
8
9

条目预览接口接收 ids 参数，该参数使用 , 分隔的多个ID，返回的数据格式如下

{
    "code": 0,
    "data": {
        "records": [
            {"id": 1, "title": "选项1", "cover": "http://xxx.com/xxx.jpg"},
            {"id": 2, "title": "选项2", "cover": "http://xxx.com/xxx.jpg"}
        ]
    }
}
1
2
3
4
5
6
7
8
9

# keyValueList 键值对列表

$detail->keyValueList('field', '字段名');
1
$detail->link('field', '字段名');
1

# markdown Markdown

$detail->markdown('field', '字段名');
1

# multiSelect 下拉多选

$detail->multiSelect('field', '字段名')->options([
    'a' => '选项1',
    'b' => '选项2',
    'c' => '选项3',
]);
1
2
3
4
5

# number 数字

$field = $detail->number('field', '字段名');

// 是否显示颜色（正数绿色，负数红色）
$field->autoColor(true);
// 是否总是显示正负号
$field->signShow(true);
1
2
3
4
5
6

# password 密码

$detail->password('field', '字段名');
1

# percent 百分比

$detail->percent('field', '字段名');
1

# radio 单选

$detail->radio('field', '字段名');
1

# richHtml 富文本

$detail->richHtml('field', '字段名');
1

# select 下拉

// 基本使用
$field = $detail->select('field', '字段名');

// 使用Type作为备选项，XxxType是继承BaseType的类
$field->optionType(XxxType::class);
// 使用数组作为备选项
$field->options(['1' => '选项1', '2' => '选项2']);
// 使用数组作为备选项
$field->optionArray([['id' => 1, 'name' => '选项1'], ['id' => 2, 'name' => '选项2']],'id','name');
// 使用模型作为备选项
$field->optionModel('forum_category','id','title');
// 使用模型作为备选项（简单条件筛选）
$field->optionModel('forum_category','id','title',['xxx'=>'xxx']);
// 使用模型作为备选项，并渲染为树状结构
$detail->select('position', '位置')->optionModelTree('forum_category','id','title');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# selectRemote 下拉（远程）

$detail->selectRemote('seriesId', '剧集')
       // 指定远程数据源
       ->server(modstart_admin_url('path/to/select_remote'))
       // 显示时查找的数据字段
       ->viewWithModel(XxxModel::class,'id','title');
1
2
3
4
5

远程数据源接口需要返回

{
    "code": 0,
    "data": {
        "options": [
            {"value": 1, "label": "选项1"},
            {"value": 2, "label": "选项2"}
        ]
    }
}
1
2
3
4
5
6
7
8
9

系统封装好了参数可以直接试用，远程数据源可以直接调用以下方法返回

class XxxController extends Controller
{
    public function selectRemote()
    {
        return SelectRemote::handleModel(XxxModel::class,'id','title');
    }
}
1
2
3
4
5
6
7

# switch 开关

$detail->switch('field', '字段名');
1

# tags 标签

$detail->tags('field', '名称');
1

# text 单行文本

$detail->text('field', '名称');
1

# textarea 多行文本

$detail->textarea('field', '字段名');
1

# time 时间

$detail->time('field', '字段名');
1

# tree 树状组件

$detail->tree('field', '名称');
1

# type 类型

// 基础使用
$field = $grid->type('field', '字段名');

// 在表格中快速编辑
$field->gridEditable(true);
// 定义BaseType，同时指定类型颜色
$field->type(XxxStatus::class, [
    XxxStatus::SUCCESS => 'success',
    XxxStatus::FAIL => 'danger',
])
1
2
3
4
5
6
7
8
9
10

# values 多值

$detail->values('field', '字段名');
1

# video 视频

$detail->video('field', '字段名');
1

更多内置组件请参照 ModStart\Support\Manager\FieldManager 中的定义

Last Updated: 2 months ago