【摸鱼神器】UI库秒变低代码工具——表单篇（二）子控件

技术分享 2年前 (2022-07-18) 0 999+

关注

上一篇介绍了表单控件，这一篇介绍一下表单里面的各种子控件的封装方式。

主要内容

需求分析
子控件的分类
子控件属性的分类
定义 interface。
定义子控件的的 props。
定义 json 文件。
基于 UI库进行二次封装，实现依赖 json 渲染。
通过 slot 、 “字典”，实现自定义子控件。
做个工具维护 json 文件。（下篇介绍）

需求分析

表单里面需要各种各样的子控件，像文本、数字、选择、日期等常见的需求，可以由内部提供组件解决，但是其他各种“奇奇怪怪”的需求怎么办呢？

如果还是由“内部”提供组件的话，那肯定是行不通的，因为以往的经验教训告诉我们，内部不断扩充子控件的结果，必然会导致内部代码越来越臃肿，以至后期无法维护，最终崩盘！

所以必须支持自定义扩展！感谢 Vue 和 UI库，提供基础的技术支持，让扩展变得非常容易。

我们先对表单子控件进行一下分类，然后为其设计一套接口，即定义一套规则，这样才好方便做长期维护。

子控件的分类

我们对常见的组件进行分析，得到了下面的分类：

上图涵盖了一些常用控件，但是很显然并不全面，比如没有金额类的控件，输入金额也是需要一些辅助的，比如金额的大小写的切换等，不过这些应该用扩展的方式实现。

属性的分类

组件的分类可以做的“规整”一些，但是组件的属性的分类，就比较有难度了，我们可以把组件需要的属性分为三个主要部分：代码里需要的、共用的、扩展的。

低代码需要的属性
需要在代码里面使用的属性，比如字段名称、控件类型、默认值、防抖延迟等，集中在一起，通过 props 的方式传递。
共用属性
各个组件（或者大部分组件）都需要的属性，比如浮动提示、size、是否显示清空按钮等，作为一级属性，通过 props 的方式传递。
扩展属性
某个组件需要的属性，比如数字组件需要 max、min、step等。通过 $attrs 的方式传递。

其中扩展属性最为复杂，如果按照面向对象的方式来设计的话，结构就会非常复杂，会复杂到什么程度呢？可以参考当初 asp.net 里面 webform 的继承结构：

（controll是控件（组件）的意思，下面分出来WebControll和 repeater 两个子类，然后又，，，算了不说了，是不是看着就很累的样子？）

定义接口

现在是 JS 环境，我们没有必要生搬硬套，而是可以利用JS的灵活性来做简洁设计：

我们给表单子控件的 props 定义一个interface：（虽然暂时用不上）

IFormItemProps

/**  * 表单控件的子控件的 props。  */ export interface IFormItemProps {   /**    * 低代码需要的数据    */   formItemMeta: IFormItemMeta,   /**    * 子控件备选项，一级或者多级    */   optionList: Array<IOptionList | IOptionTree>,   /**    * 表单的 model，含义多个属性    */   model: any,   /**    * 是否显示清空的按钮    */   clearable: boolean,   /**    * 浮动提示信息    */   title: string,   /**    * 子控件的扩展属性    */   [key: string]: any }

IFormItemMeta 的定义：

/**  * 子控件的低代码需要的数据  */ export interface IFormItemMeta {   /**    * -- 字段ID、控件ID    */   columnId?: number | string,   /**    * -- 字段名称    */   colName: string,   /**    * -- 字段的中文名称，标签    */   label?: string,   /**    * -- 子控件类型，number，EControlType    */   controlType: EControlType | number,   /**    * 子控件的默认值    */   defValue: any,   /**    * -- 一个控件占据的空间份数。    */   colCount?: number,   /**    * 访问后端API的配置信息，有备选项的控件需要    */   webapi?: IWebAPI,   /**    * -- 防抖延迟时间，0：不延迟    */   delay: number,   /**    * 防抖相关的事件    */   events?: IEventDebounce, }

规则定义之后呢，总会发现有特例的属性，比如 select 的 option。代码里面需要使用 option 去绑定组件，应该放在“低代码需要的属性”里面。

但是实际使用的时候发现，放在“共用属性”里面会更方便。

然后在做“维护JSON的小工具”的时候，发现需要放在“扩展属性”里面维护，这样维护代码更容易实现。

综合考虑之后，就出现了一个不符合规则的属性 —— optionList。

定义组件的 props。

按照接口实现一下 props 的定义。

import type { PropType } from 'vue'  import type {   IOptionList,   IOptionTree,   IFormItemProps } from '../types/20-form-item'  /**  * 基础控件的共用属性，即表单子控件的基础属性  */ export const itemProps = {   formItemMeta: {     type: Object as PropType<IFormItemProps>,     default: () =>  {return {}}   },   /**    * optionList：IOptionList | IOptionTree，控件的备选项，单选、多选、等控件需要    */   optionList: {     type: Object as PropType<Array<IOptionList | IOptionTree>>,     default: () =>  {return []}   },   /**    * 表单的 model，整体传入，便于子控件维护字段值。    */   model: {     type: Object   },   /**    * 是否显示可清空的按钮，默认显示    */   clearable: {     type: Boolean,     default: true   },   /**    * 浮动的提示信息，部分控件支持    */   title: {     type: String,     default: ''   } }

其他属性以及扩展属性，可以通过 $attrs 传递和绑定，这样可以方便各种扩展。

定义 json 文件。

我们来定义一个示例用的 json文件。

{     "formItemMeta": {       "columnId": 90,       "colName": "kind",       "label": "分类",       "controlType": 107,       "isClear": false,       "defValue": 0,       "colCount": 7     },     "placeholder": "分类",     "title": "编号",     "optionList": [       {"value": 1, "label": "文本类"},       {"value": 2, "label": "数字类"},       {"value": 3, "label": "日期类"},       {"value": 4, "label": "时间类"},       {"value": 5, "label": "选择类"},       {"value": 6, "label": "下拉类"}     ] }

基于 UI库封装，实现依赖 json 渲染。

首先要感谢强大的UI库，实现了大部分的功能，我们只需要再稍微封装一下即可，只有少数几个组件需要我们补充点代码。

文本类

template

  <el-input     v-model="value"     v-bind="$attrs"     :id="'c' + formItemMeta.columnId"     :name="'c' + formItemMeta.columnId"     :title="title"     :clearable="clearable"     @blur="run"     @change="run"     @clear="run"     @keydown="clear"   >   </el-input>

使用 v-bind="$attrs" 绑定扩展属性

  import { defineComponent } from 'vue'   import { ElInput } from 'element-plus'   // 引入组件需要的属性、控制类   import { itemProps, itemController } from '@naturefw/ui-elp'    export default defineComponent({     name: 'nf-el-form-item-text',     inheritAttrs: false,     components: {       ElInput     },     props: {       modelValue: [String, Number],       ...itemProps // 基础属性     },     emits: ['update:modelValue'],     setup (props, context) {       const {         value,         run,         clear       } = itemController(props, context.emit)        return {         value,         run,         clear       }     }   })

使用 ...itemProps 定义属性。

是不是很简单。

可能你会问了，这不是封装了个寂寞吗，你看看里面空荡荡的，完全没有封装的必要嘛。

确实，对于文本这类简单的组件，确实没有封装的必要，直接使用UI库提供的组件即可。

那么为啥好要封装一下呢？

首先为了统一风格，不管是简单的，还是复杂的，都按照统一方式封装一下，这样便于维护和扩展。

日期类

template

  <el-date-picker     ref="domDate"     v-model="value"     v-bind="$attrs"     :type="dateType"     :name="'c' + formItemMeta.columnId"     :format="format"     :value-format="valueFormat"     :title="title"     :clearable="clearable"   >   </el-date-picker>

  import { defineComponent } from 'vue'   // 引入组件需要的属性 引入表单子控件的管理类   import { itemProps, itemController } from '@naturefw/ui-elp'      /**    * 日期    */   export default defineComponent({     name: 'nf-el-from-item-date',     inheritAttrs: false,     props: {       ...itemProps, // 基础属性       format: {         type: String,         default: 'YYYY-MM-DD'       },       'value-format': {         type: String,         default: 'YYYY-MM-DD'       },       modelValue: [String, Date, Number, Array]     },     emits: ['update:modelValue'],     setup (props, context) {       const { value } = itemController(props, context.emit)        // 根据类型判断是否为数组，判断是否 使用范围。       let dateType = 'date'       if (props.formItemMeta.controlType == '125' ) {         dateType = 'daterange'         if (!Array.isArray(value.value)) {           value.value = []         }       } else {         if (Array.isArray(value.value)) {           value.value = ''         }       }        return {         dateType, // 控件类型         value // 控件值       }     }   })

可以增设属性，然后根据需求设置默认值，这样方便统一风格。

选择类

template

  <el-select     v-model="value"     v-bind="$attrs"     :id="'c' + formItemMeta.columnId"     :name="'c' + formItemMeta.columnId"     :clearable="clearable"     :multiple="multiple"     :collapse-tags="collapseTags"     :collapse-tags-tooltip="collapseTagsTooltip"   >     <el-option       v-for="item in optionList"       :key="'select' + item.value"       :label="item.label"       :value="item.value"       :disabled="item.disabled"     >     </el-option>   </el-select>

  import { defineComponent, computed } from 'vue'   // 引入组件需要的属性 引入表单子控件的管理类   import { itemProps, itemController } from '@naturefw/ui-elp'    export default defineComponent({     name: 'nf-el-from-select',     inheritAttrs: false,     props: {       ...itemProps, // 基础属性       'collapse-tags': {         type: Boolean,         default: true       },       'collapse-tags-tooltip': {         type: Boolean,         default: true       },       modelValue: [String, Number, Array]     },     emits: ['update:modelValue'],     setup (props, context) {       const multiple = computed (() => props.formItemMeta.controlType === 161)          return {         ...itemController(props, context.emit)       }     }   })

template 里面增加了 el-option 部分，通过对 optionList 的遍历，实现了选项的渲染。

其他组件也是一样的方式进行封装，就不一一介绍了。

封装 el-form-item

el-table 通过 el-form-item 来加载子组件，所以我们也可以封装一下：

  <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].formItemMeta.label"           :prop="itemMeta[ctrId].formItemMeta.colName"           :rules="ruleMeta[ctrId] ?? []"           :label-width="itemMeta[ctrId].formItemMeta.labelWidth??''"           :size="size"           v-show="showCol[ctrId]"         >           <component             :is="formItemKey[itemMeta[ctrId].formItemMeta.controlType]"             :model="model"             v-bind="itemMeta[ctrId]"           >           </component>         </el-form-item>       </transition>     </el-col>   </el-row>