自然框架
自然框架

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

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

内容摘要

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

需求分析

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

表单控件的基础需求：

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

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

设计 interface

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

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

整理一下做个脑图：

表单控件需要的属性.png

表单控件的接口

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

表单控件的接口.png

然后我们定义具体的 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,
   */
  colOrder: Array,
  /**
   * 表单的列数，分为几列 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 // 栏目里有哪些控件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
}

ILinkageMeta：组件联动的接口

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

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

定义表单控件的 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,
    required: true
  },
  /**
   * 根据选项过滤后的 model
   */
  partModel: {
    type: Object as PropType,
    default: () => { return {}}
  },
  /**
   * 表单控件的 meta
   */
  formMeta: {
    type: Object as PropType,
    default: () => { return {}}
  },
  /**
   * 表单控件的子控件的 meta 集合
   */
  itemMeta: {
    type: Object as PropType,
    default: () => { return {}}
  },
  /**
   * 标签的后缀
   */
  labelSuffix: {
    type: String,
    default: '：' 
  },
  /**
   * 标签的宽度
   */
  labelWidth: {
    type: String,
    default: '130px'
  },
  /**
   * 控件的规格
   */
  size: {
    type: Object as PropType,
    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 组件。

  • 通过 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 即可。篇幅有限，具体代码不介绍了，感兴趣的话可以看源码。

  • 单列表单
单列的表单.png
  • 双列表单
双列的表单.png
  • 三列表单
三列的表单.png

  • 多列表单
    因为 el-col 的 span 最大是 24，所以最多支持24列。

  • 支持调整布局
    三列表单里面 URL组件就占用了一整行，这类的调整都是很方便实现的。

分栏

这里分为多个表单控件，以便于实现多种分栏方式，并不是在一个组件内部通过 v-if 来做各种判断，这也是我需要把 interface 写在单独文件里的原因。
  • 分栏的表单（el-card）
card的表单.png
  • 分标签的表单（el-tabs）
tab的表单.png
  • 分步骤的表单（el-steps）
step的表单.png

使用 slot 实现自定义扩展。

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

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

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

nf-form 就是封装后的表单控件，设置属性和 model 后就可使用了，很方便。
如果想扩展的话，可以使用