DynamicForm
简介
DynamicForm是一个前端form表单页面的解决方案,它基于
vue 和
element-ui 实现。他可以帮助开发人员快速开发完成表单的开发,适用于列表查询条件的form、列表增改form和流程审批界面的表单展示。
功能
``
1.根据配置文件动态生成表单控件。(支持控件:单选、多选、时间、radio、输入框、密码框、级联、以及自定义控件)
2.通过配置控制按钮个数。
3.通过配置控制按钮名称。
4.通过配置控制表单单行显示控件个数。
5.通过配置控制表达单个控件显示列数。
6.根据表单是增加或修改功能,控制表单主键字段显隐。
7.通过配置控制单选、多选等控件下拉数据获取方式。
8.通过配置控制表单元素验证规则。
9.对于系统内部统一的验证规则可以内置,全局统一验证规则。
``
接口
$3
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------------------------------------------------ | -------------------------- | ------------ | ------ |
| formConfig | 表单参数 | Object | | |
| formData | 表单数据,通过formData[item唯一标识]赋值、获取表单数据 | Object | | {} |
| isUpdate | 是否是更新表单功能(增、改表单时使用) | Number | 0/1 1是更新 | 0 |
| submit | 表达提交函数,通过formData[item唯一标识]或者通过入参json获取表单数据 | Function(json: string) | | |
| getOptionFun | 获取表单item的Option函数 | Function(tranCode: string) | | |
| getRulesFun | 获取表单item的Rules函数 | Function(ruleName: string) | | |
##### 表单formConfig参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :--------: | ------------------------------------------------------------ | ------------ | ------------- | ------------------------------------------------------ |
| _style | 表单样式 | Object | {"columns":1} | {"columns":1,"submitButtonName":"提交","width":"auto"} |
| _items | 表单项数组,表述表单所有item项 | Array\
- | | |
| _rules | 表单验证规则,与element的Form中rules相同 | Object | null | |
| _rulesName | 表单验证规则函数名字,{"item唯一标识":"规则函数名称","item唯一标识":"规则函数名称"} | Object | null | |
##### _style参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------------- | ---------------- | ------ | ------ | ------ |
| columns | 表单显示列数 | Number | 1 | 1 |
| submitButtonName | 表单确认钮名称 | String | 提交 | 提交 |
| width | 表单里的item宽度 | String | 225 | auto |
##### item参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | -------------------------- | -------------- | ------------------------------------------------------------ | ------ |
| key | item的唯一标识 | String | --- | |
| text | item的label名称 | String | --- | |
| type | item的类型 | String | input/password/cascader/datetime/select/multiple/radio/checkbox | |
| tranCode | item所需Option的获取功能号 | String | --- | |
| options | item所需Option数据 | Array\ | ---- | |
| isKey | 表单里更新时是否要显示 | Number | 0\1 0显示,1不显示 | 0 |