一个成熟的表单
表单表单，你已经长大了，你要学会：
- 动态渲染
- 支持单列、双列、多列
- 支持调整布局
- 支持表单验证
- 支持调整排列（显示）顺序
- 依据组件值显示需要的组件
- 支持 item 扩展组件
- 可以自动创建 model
这个表单控件是基于 element-plus 的 el-form 做的二次封装，所以首先感谢 element-plus 提供了这么强大的UI库，以前用jQuery做过类似的，但是非常麻烦，既不好看，可维护性、扩展性也差，好多想法都实现不了（技术有限）。
现在好了，站在巨人的肩膀上，以前的想法都可以实现了。
大图预警：这里有好几张大 gif 图片，流量不够的话慎开。。。
调整排列（显示）顺序以及调整布局
既然是动态渲染，那么组件的显示顺序也应该可以灵活调整。
所以设计了一个显示用的数组，把组件ID存放进去，v-for的时候，遍历这个数组就可以实现调整显示顺序的需求了。
单列的调整顺序，以及调整布局
导出MP4才400多k，导出gif居然2M多。真的好无语。
可以插入，可以交换，可以把几个短的挤到一行。
多列的调整顺序，以及调整布局
掐了一半没播，因为gif太大了。
还是插入、交换，可以让一个组件独占一行。
多列也是一样的操作。
依据组件值显示需要的组件
有的时候表单里的组件并不是都需要用户填写的，比如注册域名的时候，公司注册需要填写公司名称等信息，而个人注册显然没有公司信息可以填，那么这时候表单就需要根据用户的选择（公司、个人）来显示不同的字段来让用户填写。
这时候就需要一个运行时调整的功能。
其实现原理，还是通过调整那个排序用的数组来实现的。
先看一下效果：
还是这么大。。。
下拉列表里面选择不同的选项，会显示对应的组件。这种对应并不是写死的表单控件里面，而是可以在外部配置出来。
监听组件的值，然后修改排序用的数组
- json文件：
"formColShow": {
"103": {
"101" : [101, 102, 103, 104],
"102" : [101, 102, 103, 106, 107, 104, 105],
"103" : [101, 102, 103, 104, 105]
}
},
依据组件的编号，指定每个组件值对应需要显示的组件ID。
似乎有点太抽象了，其实就是应为抽象出来共同的特点，才可以实现这样的功能呀。
// 设置组件的显示顺序
const setFormColSort = (array = formMeta.colOrder) => {
formColSort.length = 0
formColSort.push(...array)
}
// 监听组件值的变化，调整组件的显示以及显示顺序
if (typeof formMeta.formColShow !== 'undefined') {
for (const key in formMeta.formColShow) {
const ctl = formMeta.formColShow[key]
const colName = formItemMeta[key].colName
watch(() => formModel[colName], (v1, v2) => {
if (typeof ctl[v1] === 'undefined') {
// 没有设定，显示默认组件
setFormColSort()
} else {
// 按照设定显示组件
setFormColSort(ctl[v1])
}
})
}
}
遍历 formColShow ，监听里面的组件的值，有变化了就按照值去加载对应的组件ID，如果没有就加载默认组件。
自动创建 model
我比较懒，不想写model的定义代码，太麻烦。
尤其当需求变更的时候，又要改代码。
那么能不能自动创建呢？于是写了个函数。
完整的model
表单里面有多少组件，就创建多少个属性。
// 根据表单元素meta，创建 v-model
const createModel = () => {
// 依据meta，创建module
for (const key in formItemMeta) {
const m = formItemMeta[key]
// 根据控件类型设置属性值
switch (m.controlType) {
case 100: // 文本类
case 101:
case 102:
case 103:
case 104:
case 105:
case 106:
case 107:
case 130:
case 131:
formModel[m.colName] = ''
break
case 110: // 日期
case 111: // 日期时间
case 112: // 年月
case 114: // 年
case 113: // 年周
formModel[m.colName] = null
break
case 115: // 任意时间
formModel[m.colName] = '00:00:00'
break
case 116: // 选择时间
formModel[m.colName] = '00:00'
break
case 120: // 数字
case 121:
formModel[m.colName] = 0
break
case 150: // 勾选
case 151: // 开关
formModel[m.colName] = false
break
case 153: // 单选组
case 160: // 下拉单选
case 162: // 下拉联动
formModel[m.colName] = null
break
case 152: // 多选组
case 161: // 下拉多选
formModel[m.colName] = []
break
}
// 看看有没有设置默认值
if (typeof m.defaultValue !== 'undefined') {
switch (m.defaultValue) {
case '':
break
case '{}':
formModel[m.colName] = {}
break
case '[]':
formModel[m.colName] = []
break
case 'date':
formModel[m.colName] = new Date()
break
default:
formModel[m.colName] = m.defaultValue
break
}
}
}
// 同步父组件的v-model
context.emit('update:modelValue', formModel)
return formModel
}
虽然有点长，但都是简单的case判断。这样就省去了手撸 model 的麻烦。
依据选项创建 model
因为支持依据用户的选择而现实不同的组件，那么创建的model是否也需要调整呢？所以又写了个函数。两种 model 同时支持，这样需要哪个就可以用哪个。
// 依据用户选项，创建对应的 model
const createPartModel = (array) => {
// 先删除属性
for (const key in formPartModel) {
delete formPartModel[key]
}
// 建立新属性
for (let i = 0; i < array.length; i++) {
const colName = formItemMeta[array[i]].colName
formPartModel[colName] = formModel[colName]
}
}
先把原有的属性删掉，然后再加上新的属性。
支持 扩展组件
自带的组件肯定是不够的，因为用户的需求总是千变万化的，那么新组件如何加入到表单控件里面呢？可以按照接口定义封装成符合要求的组件，然后做一个map字典，就可以设置进去了。
因为接口统一，所以可以适应表单控件的调用。
简单的方法是，直接修改两个js文件。
如果不方便修改的话，也可以通过属性传递进来。目前暂时还没有想好细节，不过似乎不是太难。
动态渲染
引入json，然后作为属性传入表单控件，然后就可以了。
这样我们再实现添加、修改的功能的时候，就不是写代码，而是写json了，另外剧透一下，这个json当然是不需要手撸的，我这么懒。
单列、双列、多列以及调整布局
这个其实就是个 v-for 的功能，使用el-cow、el-col 设置好span就可以实现。
// 根据配置里面的colCount，设置 formColSpan
const setFormColSpan = () => {
const formColCount = formMeta.formColCount // 列数
const moreColSpan = 24 / formColCount // 一个格子占多少份
if (formColCount === 1) {
// 一列的情况
for (const key in formItemMeta) {
const m = formItemMeta[key]
if (typeof m.colCount === 'undefined') {
formColSpan[m.controlId] = moreColSpan
} else {
if (m.colCount >= 1) {
// 单列，多占的也只有24格
formColSpan[m.controlId] = moreColSpan
} else if (m.colCount < 0) {
// 挤一挤的情况， 24 除以 占的份数
formColSpan[m.controlId] = moreColSpan / (0 - m.colCount)
}
}
}
} else {
// 多列的情况
for (const key in formItemMeta) {
const m = formItemMeta[key]
if (typeof m.colCount === 'undefined') {
formColSpan[m.controlId] = moreColSpan
} else {
if (m.colCount < 0 || m.colCount === 1) {
// 多列，挤一挤的占一份
formColSpan[m.controlId] = moreColSpan
} else if (m.colCount > 1) {
// 多列，占的格子数 * 份数
formColSpan[m.controlId] = moreColSpan * m.colCount
}
}
}
}
}
// 先运行一次
setFormColSpan()
// 设置组件的显示顺序
const setFormColSort = (array = formMeta.colOrder) => {
formColSort.length = 0
formColSort.push(...array)
}
// 先运行一下
setFormColSort()
表单验证
这个使用el-form提供的验证功能。
目前暂时还没有归纳好el-form的验证，因为需要把这个验证用的数据写入到json里面，然后读取出来设置好即可。
所以肯定没难度，只是需要点时间。
