--- theme: channing-cyan highlight: agate --- 接[上篇](https://juejin.cn/post/7242623149752647738)，上一篇介绍了 Interface 以及 controller 的一部分，这一篇继续介绍后续功能。 * 双列的表单 ![625双列的表单.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcb23e745c8c424882508b119e65aa3b~tplv-k3u1fbpfcp-watermark.image?) ## 自动创建 model 既然有了meta，那么还需要手动创建 model 吗？其实在低代码里面，model都是运行时创建的吧，否则怎么“低”呢？不过呢，我们还是应该两手准备，既可以支持低代码的方式，又可以支持常规开发的方式，因为只有这样，可方便切换到常规模式，否则还得自己弄一个 model，多麻烦。 ### 获取名称和类型 meta 里面用字段名称，拿出来作为key即可，那么类型呢？需要在meta里面设置一个类型的描述吗？我觉得不用。因为我们可以使用控件类型来确定。我们先来做个字典： ```ts const dicType = { // 文本 100: '', 101: '', 102: '', 103: '', 104: '', 105: '', 106: '', 107: '', 108: '', // 数字 110: 0, 111: 0, 112: 0, // 日期 120: '', 121: '', 122: '', 123: '', 124: '', // 日期范围 125: [], 126: [], 127: [], 128: [], // 时间 130: '', 131: [], 132: '', 133: [], // 上传 140: '', 141: '', 142: '', // 选择 150: false,// 勾选 151: false, // 开关 152: [],// 多选组 153: '',// 单选组 // 下拉 160: '',// 下拉单选 161: [],// 下拉多选 162: '',// 分组下拉单选 163: [],// 分组下拉多选 164: [],// 下拉联动 165: '',// 树状下拉 166: []// 树状多选 } ``` 这样就可以把控件的类型和model的属性类型联系起来。日期控件，可以使用 string，也可以使用Date，还可以使用时间戳，其实还可以使用 null。不过初始化的时候，我们设置为 ‘’ 即可。 ```ts /** * 创建表单的 model，传入 input 这类的 meta，依据其中的字段名称和控件类型，字段创建。 * @param meta 表单子控件的 meta * @param colOrder 字段ID，数组。需要哪些字段，以及顺序 */ export default function createModel( meta: IFormChildPropsList, colOrder: Array ): T { // 定义一个 model const formModel = {} // 依据 meta，创建 model colOrder.forEach(key => { const _meta: IFormChildMeta = meta[key].meta if (_meta.controlType < 200) { // 表单内置组件 formModel[_meta.colName] = dicType[_meta.controlType] } else { formModel[_meta.colName] = '' } // 看看有没有设置默认值 if (typeof _meta.defValue !== 'undefined' ) { switch (_meta.defValue) { case '': break case '{}': formModel[_meta.colName] = {} break case '[]': formModel[_meta.colName] = [] break case '{{now}}': formModel[_meta.colName] = new Date() break default: formModel[_meta.colName] = _meta.defValue break } } if (Array.isArray(formModel[_meta.colName] )){ // 数组类型，有可能需要对应多个字段 moreColName(_meta , formModel) } }) const re = reactive(formModel) return re as T } ``` 先定义一个对象，然后遍历 meta，把字段名作为key加到对象里面，然后设置类型和默认值，最后套上 reactive，强制转换成泛型 T。当然，这种方式比较简单粗暴，无法保证自动创建的 model 可以复合泛型 T 的类型。只是，我只能想到这么多了。 json 里面有字段名称还有字段类型和默认值，那么我们可以自动创建一个model。 ### 创建 model 的位置一开始，在内部和外部都可以创建，还可以兼容，但是后来想想，何必为难自己呢，然后使用者还各种懵逼，所以，干脆简单点。提供一个创建 model 的工具，可以用泛型设置类型，在外部创建 model，可以用这个工具，也可以用其他方式，反正提供一个对象即可。 ## 联动筛选当一个组件的值发生变化的时候，需要显示（隐藏）哪些字段的联动。我们还是先定义一个 Interface： ### 定义 Interface ```ts // 显示控件的联动设置 export interface ILinkageMeta { [key: string | number]: { [id: string | number]: Array } } ``` 记录一下联动情况，当一个字段的值发生变化时，需要显示哪些字段： * key：控件的ID作为key，每个控件值对应一个数组，数组里面是需要显示的控件ID。 * id：控件的值作为key，后面的数组里存放需要显示的控件ID * 选择这个值之后需要显示的字段ID，数组 ### json 文件在json 文件里面设置对应的信息： ```json "linkageMeta": { "90": { "1": [90, 101, 100, 102, 103, 104, 105, 106, 107, 108], "2": [90, 110, 111, 112], "3": [90, 120, 121, 122, 123, 124, 125, 126, 127, 128], "4": [90, 130, 131, 132], "5": [90, 150, 151, 152, 153], "6": [90, 160, 161, 162, 163, 165, 166, 164] }, 其他字段。。。 } ``` 编号为 90 的字段，有 6 个值，每个值对应一组字段ID，当选择一个值的时候，对应的字段将会被显示，其他的会隐藏。 ### 封装代码 ```ts /** * 设置备选项和子控件的联动 * @param formMeta 表单控件的meta * @param model 表单完整的 model * @param partModel 表单部分的 model * @returns */ export default function setControlShow( formMeta: IFromMeta, itemMeta: IFormChildMetaList, model: T, partModel: any ) { // 解构需要的数据 const { linkageMeta, colOrder } = formMeta // 设置字段的是否可见 const showCol = reactive({}) // 设置联动 const setFormColShow = () => { // 数据变化，联动组件的显示 for (const key in linkageMeta) { // 配置里面设置的主动组件。 const mainComp = linkageMeta[key] // 主动组件的字段名称 const colName = itemMeta[key].colName // 监听组件的值，有变化就重新设置局部 model if (typeof model[colName] !== 'undefined') { // 监听主动组件的值的变化 watch(() => model[colName], (modelValue, oldValue) => { // 单选组的选项，先让字段都不可见， Object.keys(itemMeta).forEach(key => { showCol[key] = false }) // 配置信息里对应的字段ID集合，设置为可见 mainComp[modelValue].forEach(id => { showCol[id] = true }) // 设置部分的 model createPartModel(model, partModel, itemMeta, showCol) }, { immediate: true }) } } // 监听完整model的值的变化，同步值 if (typeof partModel !== 'undefined') { watch(model, () => { for (const key in model) { if (typeof(partModel[key]) !== 'undefined') { partModel[key] = model[key] } } }) } } return { showCol, setFormColShow } } ``` 思路： * 获取配置信息里面的 linkageMeta 信息 * 遍历里面的字段 * 监听对应的 model 的属性值的变化 * 当变化的时候，依据值对应的字段ID，设置字段是否显示。 * 依据显示的字段，设置一个新的 model，其中只包含显示的字段，没有隐藏的字段。这样就实现了当一个字段的值发生变化的时候，其他相应的字段隐藏、显示的功能。 ### 看看效果 ![628联动.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1fdc0a34d8d84e7e85636c6a839d5490~tplv-k3u1fbpfcp-watermark.image?) 选中不同的分类，可以显示对应的字段。 ## 分栏表单的设置一个表单里的字段如果过多的话，可以采用分栏的方式，具体可以分为：card、tab、step 等多种形式。我们先设定一个 Interface，存放配置信息 ### 定义一个 Interface ```ts export interface ISubMeta { type: ESubType, cardColCount: number, cols: Array<{ title: string, colIds: Array }> } ``` 记录一下如何分栏： * type 分栏的形式，card、tab、setp 等形式。 * cardColCount：card 模式有效，card 分几列 * cols：栏目信息 * title：分栏的名称 * colIds：栏里的字段ID集合，数组类型 ### json 文件内容我们在json里面记录需要的信息： ```json "subMeta": { "type": "tabs", "cardColCount": 2, // card 模式，可以有多列 "cols": [ { "title": "数字类", "colIds": [ 110, 111, 112 ] }, { "title": "时间", "colIds": [ 130, 131, 132 ] }, // 其他栏目 ] } ``` 这样一个分栏的信息就做好了，可能你见到又是魔数，就要xxxx，其实我看着也一样头疼，所以，我们可以做一个支撑平台，来管理这些魔数的，可视化带拖拽的哦。 ### 代码的封装主要体现在 template 里面： ```html

// 一个栏目里的若干字段

``` * 最外层是 el-form * 里面用 el-row、el-col 给栏目分列，如果不需要多列的话，可以去掉 * 然后是 el-card 做的栏目。 * 里面是表单字段列表。同理可以实现 tab 、setp 等功能。 ### 看看效果 * 双列的 card 表单 ![620双列的card.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/99fe5de7c08540af8eba76562dddb955~tplv-k3u1fbpfcp-watermark.image?) * tab 的表单 ![622tab的表单.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3b8dcaa79544befa8b33159f3113fa8~tplv-k3u1fbpfcp-watermark.image?) ## 源码演示