【摸鱼神器】UI库秒变低代码工具——表单篇（一）设计

技术分享 3年前 (2022-06-30) 0 999+

关注

前面说了列表的低代码化的方法，本篇介绍一下表单的低代码化。

内容摘要

需求分析。
定义 interface。
定义表单控件的 props。
定义 json 文件。
基于 el-form 封装，实现依赖 json 渲染。
实现多列、验证、分栏等功能。
使用 slot 实现自定义扩展。
自定义子控件。（下篇介绍）
表单子控件的设计与实现。（下篇介绍）
做个工具维护 json 文件。（下下篇介绍）

需求分析

表单是很常见的需求，各种网页、平台、后台管理等，都需要表单，有简单的、也有复杂的，但是目的一致：收集用户的数据，然后提交给后端。

表单控件的基础需求：

可以依赖 JSON 渲染。
依赖 JSON 创建 model。
便于用户输入数据。
验证用户输入的数据。
便于程序员实现功能。
可以多列。
可以分栏。
可以自定义扩展。
其他。

el-form 实现了数据验证、自定义扩展等功能（还有漂亮的UI），我们可以直接拿过来封装，然后再补充点代码，实现多列、分栏、依赖 JSON 渲染等功能。

设计 interface

首先把表单控件需要的属性分为两大类：el-form 的属性、低代码需要的数据。

表单控件需要的属性的分类

整理一下做个脑图：

表单控件的接口

我们转换为接口的形式，再做个脑图：

然后我们定义具体的 interface

IFromProps：表单控件的接口（包含所有属性，对应 json 文件）

/**  * 表单控件的属性  */ export interface IFromProps {   /**    * 表单的 model，对象，包含多个字段。    */   model: any,   /**    * 根据选项过滤后的 model,any    */   partModel?: any,   /**    * 表单控件需要的 meta    */   formMeta: IFromMeta,   /**    * 表单子控件的属性，IFormItem    */   itemMeta: IFormItemList,   /**    * 标签的后缀，string    */   labelSuffix: string,   /**   * 标签的宽度，string   */   labelWidth: string,   /**   * 控件的规格，ESize   */   size: ESize,   /**   * 其他扩展属性   */   [propName: string]: any  }

model：表单数据，可以依据 JSON 创建。
partModel：组件联动后，只保留可见组件对应的数据。
formMeta：低代码需要的属性集合。
itemMeta：表单子控件需要的属性集合。
其他：el-table 组件需要的属性，可以使用 $attrs 进行扩展。

本来想用这个接口约束组件的 props，但是有点小问题：

如果用 Option API 的话，不支持这种形式的接口。
如果使用 Composition API 的话，虽然支持，但是只能在组件内部定义 interface，暂时不支持从外部文件引入。

接口文件应该可以在外部定义，然后引入组件。如果不能的话，那就尴尬了。

所以只好暂时放弃对组件的 props 进行整体约束。

IFromMeta：低代码需要的属性接口

/**  * 低代码的表单需要的 meta  */ export interface IFromMeta {   /**    * 模块编号，综合使用的时候需要    */   moduleId: number | string,   /**    * 表单编号，一个模块可以有多个表单    */   formId: number | string,   /**    * 表单字段的排序、显示依据，Array<number | string>,    */   colOrder: Array<number | string>,   /**    * 表单的列数，分为几列 number,    */   columnsNumber: number    /**    * 分栏的设置，ISubMeta    */   subMeta: ISubMeta,   /**    * 验证信息，IRuleMeta    */   ruleMeta: IRuleMeta,   /**    * 子控件的联动关系，ILinkageMeta    */   linkageMeta: ILinkageMeta }

moduleId 模块编号，以后使用
formId 表单编号，一个模块可以有多个表单
colOrder 数组形式，表单里包含哪些字段？字段的先后顺序如何确定？就用这个数组。
columnsNumber 表单控件的列数，表单只能单列？太单调，支持多列才是王道。

ISubMeta：分栏的接口

/**  * 分栏表单的设置  */ export interface ISubMeta {   type: ESubType, // 分栏类型：card、tab、step、"" （不分栏）   cols: Array<{ // 栏目信息     title: string, // 栏目名称     colIds:  Array<number> // 栏目里有哪些控件ID   }> }

UI库提供了 el-card、el-tab、el-step等组件，我们可以使用这几个组件来实现多种分栏的形式。

IRule、IRuleMeta、：数据验证的接口

el-form 采用 async-validator 实现数据验证，所以我们可以去官网(https://github.com/yiminghe/async-validator)看看可以有哪些属性，针对这些属性指定一个接口（IRule），然后定义一个【字段编号-验证数组】的接口（IRuleMeta）

 /**  * 一条验证规则，一个控件可以有多条验证规则  */ export interface IRule {   /**    * 验证时机：blur、change、click、keyup    */   trigger?:  "blur" | "change" | "click" | "keyup",   /**    * 提示消息    */   message?: string,   /**    * 必填    */   required?: boolean,   /**    * 数据类型：any、date、url等    */   type?: string,   /**    * 长度    */   len?: number, // 长度   /**    * 最大值    */   max?: number,   /**    * 最小值    */   min?: number,   /**    * 正则    */   pattern?: string }  /**  * 表单的验证规则集合  */ export interface IRuleMeta {   /**    * 控件的ID作为key， 一个控件，可以有多条验证规则    */   [key: string | number]: Array<IRule> }

ILinkageMeta：组件联动的接口

有时候需要根据用户的选择显示对应的一组组件，那么如何实现呢？其实也比较简单，还是做一个key-value ，字段值作为key，需要显示的字段ID集合作为value。这样就可以了。

/**  * 显示控件的联动设置  */ export interface ILinkageMeta {   /**    * 控件的ID作为key，每个控件值对应一个数组，数组里面是需要显示的控件ID。    */   [key: string | number]: {     /**      * 控件的值作为key，后面的数组里存放需要显示的控件ID      */     [id: string | number]: Array<number>   } }

根据选项，显示对应的组件

定义表单控件的 props。

interface 都定义好了，我们来定义组件的 props（实现接口）。

这里采用 Option API 的方式，因为可以从外部文件引入接口，也就是说，可以实现复用。

import type { PropType } from 'vue'  import type {   IFromMeta // 表单控件需要的 meta } from '../types/30-form'  import type { IFormItem, IFormItemList } from '../types/20-form-item'  import type { ESize } from '../types/enum' import { ESize as size } from '../types/enum'    /**  * 表单控件需要的属性  */ export const formProps = {   /**    * 表单的完整的 model    */   model: {     type: Object as PropType<any>,     required: true   },   /**    * 根据选项过滤后的 model    */   partModel: {     type: Object as PropType<any>,     default: () => { return {}}   },   /**    * 表单控件的 meta    */   formMeta: {     type: Object as PropType<IFromMeta>,     default: () => { return {}}   },   /**    * 表单控件的子控件的 meta 集合    */   itemMeta: {     type: Object as PropType<IFormItemList>,     default: () => { return {}}   },   /**    * 标签的后缀    */   labelSuffix: {     type: String,     default: '：'    },   /**    * 标签的宽度    */   labelWidth: {     type: String,     default: '130px'   },   /**    * 控件的规格    */   size: {     type: Object as PropType<ESize>,     default: size.small   } }

在组件里的使用方式

那么如何使用呢？很简单，用 import 导入，然后解构即可。

  // 表单控件的属性    import { formProps, formController } from '../map'    export default defineComponent({     name: 'nf-el-from-div',     props: {       ...formProps       // 还可以设置其他属性     },     setup (props, context) {       略。。。     } })

这样组件里的代码看起来也会很简洁。

定义 json 文件

我们做一个简单的 json 文件：

{   "formMeta": {     "moduleId": 142,     "formId": 14210,     "columnsNumber": 2,     "colOrder": [       90,  101, 100,       110, 111      ],     "linkageMeta": {       "90": {         "1": [90, 101, 100],         "2": [90, 110, 111]        }     },     "ruleMeta": {       "101": [         { "trigger": "blur", "message": "请输入活动名称", "required": true },         { "trigger": "blur", "message": "长度在 3 到 5 个字符", "min": 3, "max": 5 }       ]     }   },   "itemMeta": {     "90": {         "columnId": 90,       "colName": "kind",       "label": "分类",       "controlType": 153,       "isClear": false,       "defValue": 0,       "extend": {         "placeholder": "分类",         "title": "编号"       },       "optionList": [         {"value": 1, "label": "文本类"},         {"value": 2, "label": "数字类"}       ],       "colCount": 2     },     "100": {         "columnId": 100,       "colName": "area",       "label": "多行文本",       "controlType": 100,       "isClear": false,       "defValue": 1000,       "extend": {         "placeholder": "多行文本",         "title": "多行文本"       },       "colCount": 1     },     "101": {         "columnId": 101,       "colName": "text",       "label": "文本",       "controlType": 101,       "isClear": false,       "defValue": "",       "extend": {         "placeholder": "文本",         "title": "文本"       },       "colCount": 1     },          "110": {         "columnId": 110,       "colName": "number1",       "label": "数字",       "controlType": 110,       "isClear": false,       "defValue": "",       "extend": {         "placeholder": "数字",         "title": "数字"       },       "colCount": 1     },     "111": {         "columnId": 111,       "colName": "number2",       "label": "滑块",       "controlType": 111,       "isClear": false,       "defValue": "",       "extend": {         "placeholder": "滑块",         "title": "滑块"       },       "colCount": 1     }    } }

温馨提示：JSON 文件不需要手撸哦。

基于 el-form 封装，实现依赖 json 渲染。

准备工作完毕，我们来二次封装 el-table 组件。

  <el-form     :model="model"     ref="formControl"     :inline="false"     class="demo-form-inline"     :label-suffix="labelSuffix"     :label-width="labelWidth"     :size="size"     v-bind="$attrs"   >     <el-row :gutter="15">       <el-col         v-for="(ctrId, index) in colOrder"         :key="'form_' + ctrId + index"         :span="formColSpan[ctrId]"         v-show="showCol[ctrId]"       ><!---->         <transition name="el-zoom-in-top">           <el-form-item             :label="itemMeta[ctrId].label"             :prop="itemMeta[ctrId].colName"             :rules="ruleMeta[ctrId] ?? []"             :label-width="itemMeta[ctrId].labelWidth??''"             :size="size"             v-show="showCol[ctrId]"           >             <component               :is="formItemKey[itemMeta[ctrId].controlType]"               :model="model"               v-bind="itemMeta[ctrId]"             >             </component>           </el-form-item>         </transition>       </el-col>     </el-row>   </el-form>

通过 props 绑定 el-table 的属性
props 里面定义的属性，直接绑定即可，比如 :label-suffix="labelSuffix"。
通过 $attrs 绑定 el-table 的属性
props 里面没有定义的属性，会保存在 $attrs 里面，可以通过 v-bind="$attrs"的方式绑定，既方便又支持扩展。
使用动态组件（component）加载表单子组件。
实现数据验证，设置 rules 属性即可，:rules="ruleMeta[ctrId] ?? []"。

实现多列

使用 el-row、el-col 实现多列的效果。

el-col 分为了24个格子，通过一个字段占用多少个格子的方式实现多列，也就是说，最多支持 24列。当然肯定用不了这么多。

所以，我们通过各种参数计算好 span 即可。篇幅有限，具体代码不介绍了，感兴趣的话可以看源码。

单列表单

双列表单

三列表单

多列表单
因为 el-col 的 span 最大是 24，所以最多支持24列。
支持调整布局
三列表单里面 URL组件就占用了一整行，这类的调整都是很方便实现的。

分栏

这里分为多个表单控件，以便于实现多种分栏方式，并不是在一个组件内部通过 v-if 来做各种判断，这也是我需要把 interface 写在单独文件里的原因。

  <el-form     :model="model"     ref="formControl"     :inline="false"     class="demo-form-inline"     :label-suffix="labelSuffix"     :label-width="labelWidth"     :size="size"     v-bind="$attrs"   >     <el-tabs       v-model="tabIndex"       type="border-card"     >       <el-tab-pane         v-for="(item, index) in cardOrder"         :key="'tabs_' + index"         :label="item.title"         :name="item.title"       >         <el-row :gutter="15">           <el-col             v-for="(ctrId, index) in item.colIds"             :key="'form_' + ctrId + index"             :span="formColSpan[ctrId]"             v-show="showCol[ctrId]"           >             <transition name="el-zoom-in-top">               <el-form-item                 :label="itemMeta[ctrId].label"                 :prop="itemMeta[ctrId].colName"                 v-show="showCol[ctrId]"               >                 <component                   :is="formItemKey[itemMeta[ctrId].controlType]"                   :model="model"                   v-bind="itemMeta[ctrId]"                 >                 </component>               </el-form-item>             </transition>           </el-col>         </el-row>       </el-tab-pane>     </el-tabs>   </el-form>

分栏的表单（el-card）

分标签的表单（el-tabs）

分步骤的表单（el-steps）

使用 slot 实现自定义扩展。

虽然表单控件可以预设一些表单子控件，比如文本、数字、日期、选择等，但是客户的需求是千变万化的，固定的子控件肯定无法满足客户所有的需求，所以必须支持自定义扩展。

比较简单的扩展就是使用 slot 插槽，el-table 里面的 el-form-item 其实就是以 slot 的形式加入到 el-table 内部的。

所以我们也可以通过 slot 实现自定义的扩展：

     <nf-form         v-form-drag="formMeta"         :model="model"         :partModel="model2"         v-bind="formMeta"       >         <template v-slot:text>           <h1>外部插槽 </h1>           <input v-model="model.text"/>         </template>       </nf-form>

nf-form 就是封装后的表单控件，设置属性和 model 后就可使用了，很方便。
如果想扩展的话，可以使用 <template v-slot:text> 的方式，里面的【text】是字段名称（model 的属性）。

也就是说，我们是依据字段名称来区分 slot 的。

实现 interface 扩展子组件

虽然使用 slot 可以扩展子组件，但是对于子组件的结构复杂的情况，每次都使用 slot 的话，明显不方便复用。

既然都定义 interface 了，那么为何不实现接口制作组件，然后变成新的表单子组件呢？

当然可以了，具体方法下次再介绍。

关于 TypeScript

为什么要定义 interface ？
定义 interface 可以比较清晰的表明结构和意图，然后实现接口即可。避免过段时间自己都忘记含义。
JSON 文件导入后会自动解析为 js 的对象，那么还用 interface 做什么？
这就比较尴尬了，也是我一直没有采用 TS 的原因之一。
TS只能在编写代码、打包时做检查，但是在运行时就帮不上忙了，所以对于低代码的帮助有限。