数据表单
TIP
数据表单在FormCreate的基础上进行优化升级，无需编写和生成前端vue代码，根据数据库自动生成对应的表单，并且可以根据不同的需求和场景来实现不同的表单效果。
基础用法
DataForm类位置在app\common\services\table\DataForm，其中$this->model为对应的数据表模型，DataForm会自动根据数据库配置获取相应的表单。
<?php
namespace addons\gs_demo\controller\admin;
use addons\gs_demo\model\ProjectModel;
use app\common\services\table\DataTable;
use hiduoke\controller\AddonsController;
class Project extends AddonsController
{
/**
* @var ProjectModel
*/
protected $model;
public function initialize(): void
{
parent::initialize();
$this->model = new ProjectModel();
}
/**
* 获取表单
* @param $id
* @return \think\response\Json
*/
public function form($id = 0)
{
$dataForm = new DataForm($this->model);
$form = $dataForm->create();
return $this->success('ok', $form);
}
}
表单配置
可以通过设置配置项来修改表单的弹窗宽度、高度、是否可拖拽等参数。
$dataForm = new DataForm($this->model);
$form = $dataForm
->config([
'defaultWidth'=>'1300px', // 设置默认宽度
'width'=>'800px',// 设置固定宽度
'style'=>[ 'maxHeight'=>'70vh' ], // 设置表单内的style
'fullscreen'=>false, // 是否全屏
'autoFullscreen'=>true, // 是否自动全屏
'dialog'=>['top'=>'10vh','draggable'=>true] //弹窗dialog的props
])
->create();
详细参数
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
| defaultWidth | string | 800px | 默认宽度，设置后默认为该宽度，如果窗口低于当前宽度，则宽度会变为100% |
| width | string | null | 固定宽度，不会跟随窗口变化 |
| style | array | [] | 表单窗口的style |
| fullscreen | bool | false | 是否全屏 |
| autoFullscreen | bool | true | 设置为true后，窗口低于768则自动为全屏 |
| dialog | array | [] | 设置dialog的props，可以参考dk-dialog或el-dialog的参数 |
设置字段
可以设置当前表单的字段的顺序，设置后，将按照顺序显示field()的字段
$dataForm = new DataForm($this->model);
$form = $dataForm
// 设置字段，当前设置优先级比filterFields高
->field(['title','cover_image','age'])
->create();
表单标签化
在表单字段过多的时候，可以将表单整理成Tabs标签页的样式归纳出来，使用setTabFields传递数组即可
/**
* 获取表单
* @param $id
* @return \think\response\Json
* @throws \FormBuilder\Exception\FormBuilderException
*/
public function form($id = 0)
{
$dataForm = new DataForm($this->model);
$form = $dataForm
->setTabFields([
[
'name' => '测试', // 标签名称
'fields' => ['title', 'year'] // 标签包含的字段
],
[
'name' => '测试2',
'default' => true, // 默认选中
'fields' => ['time', 'on_date']
]
])
->setRequiredFields(['title'])
->setHelp('title', '这是帮助')
->create();
return $this->success('', $form);
}
DataFormTabs.vue
表单帮助
在表单的下方会有帮助信息来说明表单的作用
$dataForm = new DataForm($this->model);
// 设置必填项
$dataForm
->setHelp('name','填写当前活动的名称') // 设置某一个
->setHelps(['title'=>'填写当前活动的页面标题','price'=>'设置当前活动的报名价格']) // 一次性设置多个
$form = $dataForm->create();
return $this->success('', $form);
表单必填项
如果设置某个字段为必填项，只需要使用setRequiredField或者setRequiredFields即可。
$dataForm = new DataForm($this->model);
// 设置必填项
$dataForm
->setRequiredField('name') // 设置某一个
->setRequiredFields(['title','age']) // 一次性设置多个
$form = $dataForm->create();
return $this->success('', $form);
自定义表单
如果自动获取的表单和通过某些自定义项无法满足需求，您还可以完全自定义某个字段的表单，可以使用setRule如果是需要修改多个可以直接使用setRules ，二者都支持使用回调函数，回调函数接收一个$row，值为当前模型对应ID的值。
$dataForm = new DataForm($this->model);
// 获取row
$row = $dataForm->row;
$dataForm
// 使用setRule
->setRule('title', Form::number('title', '自定义标题', $row['title'] ?? ''))
// 使用setRule 回调函数
->setRule('title', function ($row) {
return Form::number('title', '回调函数', $row['title'] ?? '');
})
// 使用setRules
->setRules(['title'=>Form::number('title', '自定义标题', $row['title'] ?? '')])
// 使用setRules 回调函数
->setRules(function ($row){
return [
'title' => Form::number('title', '回调函数', $row['title'] ?? '')
];
})
$form = $dataForm->create();
return $this->success('', $form);
内置方法
当前包含部分内置方法，未来可能会新增不同的内置方法，可以直接去查看代码即可。
//设置添加弹窗标题
public function setAddTitle(string $addTitle)
//设置提交地址
public function setActionUrl(string $actionUrl)
//设置提交方法
public function setMethod(string $method)
//设置数据ID
public function setId(int $id)
//设置编辑弹窗标题
public function setEditTitle(string $editTitle)
//设置必填项
public function setRequiredFields(array $requiredFields)
//设置必填字段
public function setRequiredField(string $requiredField)
//设置帮助内容
public function setHelps(array $helps)
//设置帮助内容
public function setHelp(string $field, string $help)
//设置自定义字段表单
public function setRules($rules)
//设置自定义表单
public function setRule(string $field, $rule)