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

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

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

内容摘要

• 需求分析。
• 定义 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,
 */
  colOrder: Array,
 /**
 * 表单的列数，分为几列 number,
 */
 columnsNumber: number
 /**
 * 分栏的设置，ISubMeta
 */
 subMeta: ISubMeta,
 /**
 * 验证信息，IRuleMeta
 */
 ruleMeta: IRuleMeta,
 /**
 * 子控件的联动关系，ILinkageMeta
 */
 linkageMeta: ILinkageMeta
}

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