自定义表单设计器

简单的开发通过自定义表单就可以实现，在线开发，不用编译就可使用功能。

自定义表单开发工具介绍

做自定义表单首先需要在数据库中建立好存储表单数据的数据表。  建表有以下两点要求：

数据表必须有主键。

数据表的主键类型为 50 位长度的字符型。

自定义表单基础信息设置

打开“表单中心”--“自定义表单”点击工具栏上的“新增”，进入 2-2-1 界面。如图

图 2-2-1

填写好表单的名称，选择好表单的分类。一般下拉框的选项都可以在“数据字典”中维  护。

管理表单存储的数据表：

点击下一步进入表单数据表设置，如图 2-2-2 所示

给表单新增一个数据表

自定义表单中将数据保存到多表

图 2-2-3

如果需要将数据保存到多表，那么此处就要把相关表都加入进来。

图 2-2-4

并按图 2-2-4 所示设置好主从表之间的关联关系。

自定义表单开发

点击图 2-2-4 中的“下一步”进入表单开发界面，如图

图 2-3-1

3.1、多选项卡管理

为了方便开发敏捷开发框架提供了多选项卡的开发，可以将内容放置到不同的选项卡中，点   击设计面板中的“编辑选项卡”进入选项卡管理。

3.2、常用控件介绍：

、文本框

、下拉框

图 2-3-3

下拉框需要重点了解的是如何设置下拉框的数据源，首先看一下使用数据字典来做数据源。

使用“数据源”来做下拉框的数据源：

图 2-3-5

从“系统管理”--“数据管理”--“数据源管理”可以新增数据源。

图 2-3-6

、编辑器：富文件编辑器。

、单据编码

可以将设置好的单据编码规则在表单中使用。

图 2-3-7

、日期区间值

自动计算界面上两个栏位相差的天数

、单位组织

图 2-3-8

、当前信息

图 2-3-9

注意事项：一定要在界面上放一栏 GUID 的固定信息，并且绑定到主键，否则表单运行时会出错

图 2-3-10

、表格项

表格项用来处理一对多的表格

设置表格中的主键

图 2-3-11

设置表格的主键跟设置表单主键原理是一样的，在界面上放一个 GUID 的列绑定到从表的主键字段，从表的主键必须是 50 位长度的字符型。

设置表格中的弹窗

为了提升用户体验，表格中也可以设置弹窗，当点击指定单元格时可以弹出选择窗体。

图 2-3-13

设置表格嵌套

显示效果如下：

图 2-3-15

自定义表单绑定菜单

自定义表单开发完成后可以直接发布成菜单功能使用。打开“表单中心”--“发布表单功能”点击“新增”按钮，即可打开功能发布界面，如图：

图 2-4-1

完成上图的设置保存以后重新登录系统就可以看到刚刚绑定的菜单项了。

图 2-4-2

最近上线了一个小型SAAS系统，基于SpringCloud Alibaba，阿里云Serverless部署。系统的核心就是围绕自定义表单展开各种业务，之前对自定义表单的各种方案做过一些调研和对比，苦于没有找到一个比较成熟且“聪明”的方案。最终衡量利弊和开发效率之后，决定尝试一下MongoDB + 前端表单设计的方案。业务核心以外的其他模块Mq，Activiti等等都是一些成熟的方案。

就自定义表单这一块内容，从用户的角度，在表单设计页面用前端工具咔咔连拖带拽设计出一个表单，提交保存之后立马就可以用了，感受还是不错的。

背后要做的事情还挺多，简单罗列一下，后面分几篇文逐个记录一下。

1. 数据类型和数据校验的问题。

2. 多步骤表单、付款步骤以及各步骤的先决条件设置

3. 如何支持Excel的导入，导入模板的管理及校验方式

……

一、表单的定义

现在使用前端进行自定义表单拖拽配置的工具很多，我用的Avue，有一些坑，不过能凑活用。后台所作的工作就是根据解析用户定义的表单配置（JSON格式），把字段、字段类型、校验规则、正则规则、是否必须等等属性全部解析出来保存好，作为后续校验用户提交数据的依据。