公司这两年做了一款档案项目，其中需要使用到自定义表单的功能，希望可以拖拽字段，自定义布局。因为公司的前任领导已经做过了两版自定义表单，但不具备拖拽和自定义布局的功能，所以我在阅读过前两版的代码，重新编写这个第三版的自定义表单，可以拖拽和自定义布局，字段关联校验等功能。大家有需要的可以看看，试试。
先上传送门
下面我将从整个表单的设计来给大家介绍，我也将会把整个表单的设计介绍文档持续更新。本期主要介绍自定义表单的三大基础组件 创建表单组件、上报表单组件、表单详情组件。
导读目录
smart-form-create 创建表单组件
本节将介绍如何在项目中使用 SmartFormCreate 组件
使用组件
<smart-form-create></smart-form-create>
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| layout | 布局方式 | String | default: 自定义布局；single：单字段布局 | default |
| showOriginFields | 选择展示组件提供的基础字段 | Array | base： 基础字段；layout：布局字段 | ['base', 'layout'] |
| extendedAttrs | 字段扩展属性的对象集合 | Object | -- | {} |
| prefixName | 自定义字段唯一值 name 前缀 | String | -- | 字段的type |
| customAttrs | 自定义的组件参数对象, 详细参数见下表 | Object | -- | -- |
CustomAttrs 内置的自定义属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| dictionaryArr | 含选项的字段可绑定的字典的数组对象，Dictionary Object 详细参数见下表 | Array | -- | [] |
| loadDictList | 获取字典项的操作函数，返回一个Promise，数据在 reslove 中传递，Dict Data Object 参数见下表 | Function | -- | null |
formData
| 参数 | 说明 | 类型 |
|---|
| form | 表单字段集合 | Array |
| layout | 布局数据对象 | Object |
| attachedRule | 表单附属规则集合 | Object |
Dictionary Object Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| dictName | 字典名称 | String | -- | -- |
| constantId | 字典唯一键 | String | -- | -- |
Dict Data Object Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value | 字典项名称 | String | -- | -- |
| key | 字典项唯一键 | String | -- | -- |
Methods
| 方法名 | 说明 | 参数 |
|---|
| getCustomFormData | 获取当前表单数据，返回一个 Promise | -- |
| initFormData | 初始化表单数据，通常在编辑时使用。接受一个参数为表单数据对象 formData | Function(formData: Object) |
Slot
支持为字段自定义各种具名插槽，内置的具名插槽如下
| 方法名 | 说明 | 参数 |
|---|
| tag | 字段的标签插槽 | field 对象 |
smart-form-report 上报表单组件
本节将介绍如何在项目中使用 SmartFormReport 组件
使用组件
<smart-form-report ref="reportForm" :form-data="formData" :report-data="reportData">
</smart-form-report>
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| formId | 表单的唯一键 | String | -- | Date.now().toString() |
| formData | 表单数据对象，formData 参数见下表 | Object | -- | -- |
| reportData | 上报过的表单数据，通常在编辑时使用 | Object | -- | {} |
| isEditable | 自定义字段是否可编辑，应返回一个布尔值 | Function | -- | -- |
| isFieldShow | 自定义字段是否展示，应返回一个布尔值 | Function | -- | -- |
| customAttrs | 自定义的组件参数对象, 详细参数见下表 | Object | -- | -- |
| unReportFields | 自定义字段是否需要上报，应返回一个布尔值。如果字段无需上报，则获取表单填报数据时跳过该字段 | Function | -- | -- |
formData
| 参数 | 说明 | 类型 |
|---|
| form | 表单字段集合 | Array |
| layout | 布局数据对象 | Object |
| attachedRule | 表单附属规则集合 | Object |
CustomAttrs 内置的自定义属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| loadDictList | 获取字典项的操作函数，返回一个Promise，数据在 reslove 中传递，Dict Data Object 参数见下表 | Function | -- | null |
Dict Data Object Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value | 字典项名称 | String | -- | -- |
| key | 字典项唯一键 | String | -- | -- |
Methods
| 方法名 | 说明 | 参数 |
|---|
| initReportForm | 初始化上报表单 | -- |
| getReportData | 获取当前表单的填报数据 | -- |
Slot
支持为字段自定义各种具名插槽，内置的具名插槽如下
| 方法名 | 说明 | 参数 |
|---|
| tag | 字段的标签插槽 | field 对象 |
| table-tag | 明细字表的行标签插槽 | { field, rowData } |
smart-form-show 表单详情组件
本节将介绍如何在项目中使用 SmartFormShow 组件
使用组件
<smart-form-show ref="showForm" :form-data="formData" :report-data="reportData">
</smart-form-show>
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| formId | 表单的唯一键 | String | -- | Date.now().toString() |
| formData | 表单数据对象，formData 参数见下表 | Object | -- | -- |
| reportData | 上报过的表单数据，通常在编辑时使用 | Object | -- | {} |
| isFieldShow | 自定义字段是否展示，应返回一个布尔值 | Function | -- | -- |
| customAttrs | 自定义的组件参数对象, 详细参数见下表 | Object | -- | -- |
formData
| 参数 | 说明 | 类型 |
|---|
| form | 表单字段集合 | Array |
| layout | 布局数据对象 | Object |
| attachedRule | 表单附属规则集合 | Object |
CustomAttrs 内置的自定义属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| loadDictList | 获取字典项的操作函数，返回一个Promise，数据在 reslove 中传递，Dict Data Object 参数见下表 | Function | -- | null |
Dict Data Object Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value | 字典项名称 | String | -- | -- |
| key | 字典项唯一键 | String | -- | -- |
Methods
| 方法名 | 说明 | 参数 |
|---|
| initShowForm | 初始化详情表单 | -- |
Slot
支持为字段自定义各种具名插槽，内置的具名插槽如下
| 方法名 | 说明 | 参数 |
|---|
| tag | 字段的标签插槽 | field 对象 |
| table-tag | 明细字表的行标签插槽 | { field, rowData } |
博主将持更新表单的介绍文档，欢迎大家来使用指导
