1. 总述

1.1 功能说明

表单创建、查看、编辑等场景的详情页面均由表单设计器设计配置。表单设计总体分4步：

1. 拖动容器布局或者直接拖动属性布局
2. 设置对应组件的属性，例如：名称、编码等
3. 设置按钮和对应的事件动作
4. 如果需要样式调整，可以设置全局样式

1.2 支持场景

多页签、多属性组、多明细表等，以及左右不同组件布局等灵活布局页面均可以实现设计。

2. 表单设计器的构成

主要由3部分构成：表单可拖拽元素、表单设计区域、表单配置

2.1 表单可拖拽元素

2.1.1 表单元素

2.1.2 对象元素

2.2 表单设计区域

表单设计区域主要提供表单的布局和UI编排

2.2.1 栅格布局

栅格布局容器使用方法

2.2.2 表单控件拖拽

表单控件拖拽（支持跨层级拖拽和同层级排序）

2.3 表单配置区域

选中一个组件，在右侧出现的表单中进行配置

3.设计步骤

主要为4个步骤：

3.1 拖动布局

从左侧组件面板中拖动所需要的容器或字段组件到对应的区域。字段即表单的数据呈现字段，也会对应到具体的业务表中数据库字段。

3.2 设置组件属性

选中组件，可以设置组件属性，分UI、基础、校验。如设置组件标题名称、组件编码、显示比例等

目前均需要点击确定才能生效配置

3.2.1 设置标签组件属性

UI：可以设置标签名称和样式
基础：可以设置名称和编码；点击具体子标签可以设置标签的类型

3.2.2 设置字段组件属性

UI：设置标签和输入框比例和样式
基础：设置表单字段名称和数据库字段编码，以及相关的业务控制
校验：设置表单字段的校验逻辑

3.3 设置按钮

目前只有[tab容器][card容器][明细表]支持设置按钮，支持内置按钮和自定义事件按钮
UI：设置按钮样式，包括大小、图标、提示语等
基础：设置按钮名称、编码和事件相关配置

3.4 设置全局样式

4. 预览与保存

4.1 预览

点击预览即可看到配置后的效果

4.2 保存

点击保存即发布，会解析布局并生成对应数据库表结构字段

5. FAQ

5.1 tab容器可以嵌套其他的组件容器吗？

可以，tab可以嵌套其他的任何组件，能无限嵌套，可以根据业务系统进行UI编排；在容器组件（tab，card，明细表，按钮区域）中，只有明细表和按钮区域不能嵌套容器组件。明细表只能放表单基础组件，按钮区域只能放按钮。

5.2 如何快速的从已有的对象中生成一个表单？

5.3 设计器区域的栅格行和栅格可以拖拽吗？

不可以，除了栅格和栅格行不能拖拽外，其他的都是支持拖拽的。

5.4 按钮太多，能将按钮进行归类吗？

可以，我们提供了按钮组的概念，可以将配置中的按钮组编号一致就可以归为一组

设计器中看到的效果：

预览时看到的效果：

5.5 如果要配置工作流按钮，需要单独配置提交、审核、驳回等等按钮吗？

不需要，设计器中已经内置了流程按钮，只需要将流程按钮拖到你指定的容器中就行了。

5.6 如何让栅格横跨两列或者横跨三列

每个栅格行是24等分的，如果总列数有4个。如果其中一个栅格要跨3列，另外一个栅格占一列，计算方式如下：
第一个栅格占据列数：24 / 4 * 3 = 18
第二个栅格占据的列数：24 / 4 * 1 = 6
算出来的结果填入到【外观中的栅格占列】

下面是一个demo:（栅格上的数字为所占的列数）