概要

用户故事：作为开发平台的使用者，我希望开发平台提供一款拖拽式的表单设计引擎，支持图形化设计，表单动态渲染，列表页面动态展示，业务数据动态处理的功能，以便帮助团队可以零代码开发业务表单。

表单引擎主要包括4个功能模块，表单设计器、表单解析器、协议管理、数据存储，其中表单设计器与解析器为前端模块，负责表单的创建以及动态渲染；

协议管理和数据存储为后端模块，负责协议的解析、适配、版本管理以及CRUD工作，数据存储负责业务数据的动态CRUD操作。

整体交互流程

表单设计流程

通过表单设计器界面操作设计表单
点击保存，生成Json Schema数据，并保存到数据库
解析Json数据，创建新增表单数据库表

基于模板表单设计流程

创建模板表单，获取模板Json Schema
动态渲染页面
编辑表单
生成新的Json Schema数据，并更新数据库/缓存

表单渲染流程

根据表单ID获取表单Json Schema数据
解析Json Schema数据获取表名，根据查询条件，到相应数据库表查询业务数据
根据Json Schema和业务数据重新渲染列表页面

数据写入、编辑

根据表单ID获取表单Json Schema数据进行表单页面渲染
通过接口将表单数据传给后端
解析Json Schema数据，将业务数据动态写入数据库表

数据删除

根据表单ID获取表单Json Schema数据
解析Json Schema数据获取表名，根据条件，到相应数据库表删除业务数据

表单设计器

表单设计器技术选型designable、form-cteate-designer。

两种实现思路，第一种基于Formily进行独立开发，包括3部分左侧控件列表、画布、右侧属性配置，每个控件都需要提供控件名称、配置表单、toConfig 和 toSchema 这四个接口，源码参考designable。

第二种基于form-cteate-designer进行二次开发，form-cteate-designer是VUE2的项目，需要进行VUE3的改造。

表单解析器

表单解析器技术选型Formily或者form-cteate，解析器不需要太多开发工作，需熟练使用Formily或者form-cteate。
基于JsonSchema动态渲染列表页面。

协议管理

协议格式定义，结合前端表单设计器的JsonSchema模型整体考虑
数据协议保存到关系型数据库，并考虑版本信息
数据协议CRUD过程需要使用缓存提高性能

协议示例

{
  "list": [
    {
      "type": "input",
      "label": "输入框",
      "options": {
        "type": "text",
        "width": "100%",
        "defaultValue": "",
        "placeholder": "请输入",
        "clearable": false,
        "maxLength": null,
        "addonBefore": "",
        "addonAfter": "",
        "hidden": false,
        "disabled": false
      },
      "model": "input_1641361300754",
      "key": "input_1641361300754",
      "help": "",
      "rules": [
        {
          "required": false,
          "message": "必填项"
        }
      ]
    }
  ],
  "config": {
    "layout": "horizontal",
    "labelCol": {
      "xs": 4,
      "sm": 4,
      "md": 4,
      "lg": 4,
      "xl": 4,
      "xxl": 4
    },
    "labelWidth": 100,
    "labelLayout": "flex",
    "wrapperCol": {
      "xs": 18,
      "sm": 18,
      "md": 18,
      "lg": 18,
      "xl": 18,
      "xxl": 18
    },
    "hideRequiredMark": false,
    "customStyle": ""
  }
}

数据存储

方案	描述	优点	缺点	使用案例	备注
动态创建表	一个表单对应数据库的一张或多张物理表表单变化，数据表结构动态调整	数据隔离，易于数据权限管理不破坏SQL用法	物理表数量会不断膨胀数据多时会锁表（基于Hibernate的Hbm2ddl Update机制应不存在此问题，待验证）	Joget低代码奥哲云枢	验证Hibernate的Hbm2ddl 数据量并发量数据类型对应
预留空白字段	1+N表，一张存储字段元数据，即属性字段与预留字段直接的映射关系	减少动态修改表结构的次数	物理表数量会不断膨胀 SQL操作每次都需要管理元数据表超过预留字段个数时还是要调整表结构
纵表（Key/Vaule）	将表单数据全部都用 Key/Value 的格式来存储	两张表，不需要动态调整表结构	关联子表不好操作数据查询不方便数据混再一起，数据权限不好实现一张表存储多个应用的业务数据，当数据量超大时需要考虑性能问题
关系型数据库存储Json格式	存储Json格式数据	不需要调整动态修改表结构	查询数据不方便数据量较大时存在性能问题	TDUCK开源版
NoSQL（MongoDB、Elasticsearch）	存储Json格式数据，支持动态调整数据结构	天然支持动态修改表结构支持大数据量存储	破坏SQL用法，数据统计需要依赖NoSQL特有的逻辑后续做数据报表功能不好兼容	TDUCK PRO版明道云

任务列表

任务
表单设计器开发（Designable/form-create-designer）组件列表画布属性配置
表单解析器开发（Formily/form-create）
列表页面动态渲染
协议管理模块开发协议解析协议CRUD 协议缓存
数据动态处理功能开发根据Json Schema动态创建表根据Json Schema实现数据动态写入查询