如何开发一个动态表单
1、场景
接到一个需求，业务系统都存在大量表单录入页面，需要表单录入的地方特别多，每次都需要写一个表单页面，工作显得重复且累赘，于是在团队的会议上我提出了，咋们能不能开发一个动态的表单，在一个配置中心经过一些列的表单配置，就可以生成一个页面，这样不仅仅大大提高我们的开发效率，也能在下个季度汇报工作的时候，能突出下自己的技术输出（没办法，内卷太严重）！！
2、第三方框架的尝试
最开始设想，想用第三方框架，这样能快速集成，开始想到的则是阿里飞猪的 XRender x-render.gitee.io/ 开始捣鼓了两天，发现这个东西，单纯配置表单，展示表单，还是比较方便，但是一定表单里面参杂了许多业务的内容，用起来不是特别的爽，于是我们就决定自己开发一个动态表单
2、开始
首先毋庸置疑，如果表单要想被配置出来，必须用一大段json 去描述这个表单，配置中心通过可视化的操作，生成一段json，保存于服务端，然后需要用的地方，解析这段json，然后展示出来。 于是我设计了一段json结构
{
id: 'id',
variable: 'ID', // 提交form数据和服务端对应的字段
type: 'input', // 控件类型，详细类型见下发
label: '输入框',
description: '描述',
props: { // 依据ant.desig组件的props
addonAfter: '后tab',
addonBefore: '前tab',
allowClear: true,
prefix: '前缀',
suffix: '后缀',
},
options: [ // 只有下拉框，单选框，多选框才有
{
value: '选项1',
text: '选项1',
},
{
value: '选项2',
text: '选项2',
},
{
value: '选项3',
text: '选项3',
},
],
required: true, // 是否必输
disabled: "{{formData.xx === '1'}}", // 禁用条件
hidden: "{{formData.xx === '1'}}", // 隐藏条件
role: [ // 暂时用正则表示验证规则
{
pattern: '^[A-Za-z0-9]+$',
message: '只允许填写英文字母和数字',
},
],
},
* type 类型
* input 输入框 string
* textarea 大输入框 string
* date 日期框 date
* dateTime 日期时间 dateTime
* number 数字输入框 number
* checkbox 是否选择 boolean
* switch 是否开启 boolean
* select 下拉单选 string
* radio 点击单选 string
* multiSelect 下拉多选 string[]
* checkboxes 点击多选 string[]
* html 文本 string
* upload 上传
* dateRange 日期范围
*
* logpage log页面 // 业务需要定制的页面
* table 矩阵页面 // 业务需要定制的页面
当我们配置好表单后就会生成这段大的json，前台直接显示出来，到此一个动态表单就可以直接配置出来了
思考
可能有人说，看似思路没错，也不复杂，确实这个地方是不复杂，可以这个东西，主要是给产品运营使用的，类似这些
disabled: "{{formData.xx === '1'}}", // 禁用条件
hidden: "{{formData.xx === '1'}}", // 隐藏条件
role: [ // 暂时用正则表示验证规则
{
pattern: '^[A-Za-z0-9]+$',
message: '只允许填写英文字母和数字',
},
],
对于这些的配置，对于非技术人员，还是有一定的难度的，而且他们也比较排斥这种配置， 于是他们变提出来，把这些配置，做成可视化的操作，对于这些，我觉得这才是动态表单最为复杂的地方，
- 禁用条件，隐藏条件，联动条件
例如，当前表单的禁用条件，此处只写了一个模板字符串 {{formData.xx === '1'}},如果我们当前表单的禁用条件，受到1个控件，2个控件，3个控件。。。n控件的影响时候，此处的可视化配置如何做呢？同理隐藏条件， 好了，可能有些小伙伴可能会说，咋们每个控件的隐藏条件可以设置成一个数组，数组对应一个table 的每个tr（行） 每一行，代表一个规则，配置中心去配置这个table
然后需要展示表单的地方去解析，不得不承认这是一个思路
- 验证条件。 当前验证条件则是用正则表达式表示，如何将正则表达式可视化去配置，其实也是一个比较复杂的点，于是我想到一个方法，收集慢慢积累，很多的正则表达式在我们系统中，当我们要配置一个控件时候，去选一个正则表达式去作为他的验证条件（只是我的设想，没有具体去实现）
1、结语
开发第一阶段是结束了，给我的感觉就是，配置相对简单直观，对于复杂联动，复杂校验的可视化配置，其实还有一段路需要做
感谢各位老铁，点赞加关注
