表单配置器是一款从表单数据结构出发，帮助你快速搭建表单的产品。
将一段JSON数据导入到搭建器中，搭建器将数据转化为JSX和JSON SCHEMA。节点树和配置面板区域根据转化结果将自动回填内容。
- 功能说明
类似于导入JSON，唯一不同的是，不需要做JSON到JSON SCHEMA的转化。
- 操作指引
- 功能说明
可查看当前状态下的schema，并一键复制到剪切板。复制的内容可以通过导入功能导入到编辑器中，借助导入导出可以实现schema的共享。
- 操作指引
- 点击右上角【导出数据】
- 点击弹窗底部按钮【确认】
- 功能描述
确保各个状态可回退，避免误操作引起的数据丢失。
- 操作指
- 功能描述
提供了三种模式分别为：纯预览，纯编辑，半预览。其中半预览模式下可以实现配置修改后实时查看表单效果。如果当前渲染出现异常，预览区域将给出提示。
- 操作指引
节点树是整个表单配置器的操作核心区域，通过维护和管理这个树来搭建维护期望中的表单的结构。在介绍节点树之前，先介绍两个名词：布局节点和字段节点。
- 布局节点：仅用来给表单创建布局效果，比如卡片，这个节点不具有任何数据属性，提交表单值的时候也不会影响提交数据。
- 字段节点：可被包裹在布局节点之中，具有数据属性，提交表单的时候会作为一项数据提交。
理解了这两个词之后，对于表单搭建中的很多设计细节你就可以理解了。
- 功能描述
通过增加树节点来创建一个布局/数据字段。
- 操作指引
- 初始化状态下，默认存在一个不可移除的根节点，代表表单全局配置。
- 鼠标悬浮在游标上，则出现添加按钮。添加按钮分为两种类型：添加兄弟/添 加孩子，自动根据当前选中的节点的类型判断。具体规则如下：
| -- | 根节点 | 布局节点 | 非array/object节点 | array/object节点 |
|---|---|---|---|---|
| 兄弟 | N | Y | Y | Y |
| 孩子 | Y | Y | N | Y |
- 点击添加按钮，出现表单，输入以下信息后点击确认
|输入项|类型|规则|说明| |:--|:--|:--|:--|:--| |类型|string-下拉框|必填，控件可修改|object类型的节点不需要具体的UI控件| |标识|string-输入框|必填，不可修改|同层级必须唯一，否则校验无法通过；布局节点的标示系统自动生成，创建时可修改| |标题|string-输入框|非必填，可修改|layout, object不推荐写标题
- 添加成功后将自动选中节点，根据节点类型联动右侧配置面板内容。
- 功能描述
- 除根节点外，其余节点都可删除。
- 删除无需确认，可通过撤销操作恢复。
- 操作指引
- 鼠标悬浮在待删除的节点上，出现垃圾桶图标，点击即可。
- 功能描述
通过拖拽可以实现：同层级上下顺序调整，不同层级的嵌套顺序调整。
- 操作指引
直接上页面多建些节点，然后拖一拖试试。
- 功能描述
设置整个表单的样式属性，包含尺寸，标签位置，标签对齐方式，标签和字段所占宽度等。
- 操作指引
- 功能描述：配置字段节点的通用的属性，具体包含
| 配置项名称 | 说明 |
|---|---|
| 标识 | 只读，同层级唯一 |
| 标题 | 配置表单字段的标签 |
| 描述 | 配置表单字段的说明文案 |
| 默认值 | 除了布局节点，其余字段均可设置默认值 |
| 控件类型 | 可随时切换字段的控件类型 |
| 是否必填 | 配置表单字段是否必填 |
| 格式 | 仅输入框有该配置项，可限制固定的输入格式，比如邮箱等 |
| 正则规则 | 仅输入框有该配置项，可自定义输入规则 |
- 操作指引
从左侧选中一个字段节点，然后在配置面板中输入配置值即可。 默认值配置 对于复杂表格，支持配置JSON数据作为表格默认数据。
- 功能描述
根据当前节点的控件类型，配置该控件的属性。 部分控件需要配置静态数据源，比如单选框，复选框，下拉选择框等。这种场景下，控件属性中会出现一个数据源配置项，点击配置按钮可输入选项的文案和值。
- 操作指引
在介绍联动规则配置之前，先介绍一些基本概念。
首先，联动规则描述的是一对多关系，即一个字段的变化触发其他多个字段的变化，这也就可以解释为什么一个字段可以有多条联动规则。 其次，每个条联动规则中，结构都是固定的，具体结构如下图：
在理解了以上两个前置信息之后，接下来介绍具体的规则和方法。
- 条件由多条表达式组成，表达式之间由“且”/“或”两种逻辑关系连接
- 每个表达式包含，源字段属性（必选， 默认为value），操作符（必选），比较数据（可选）三个输入字段。
- 源字段属性
仅支持当前字段的value改变触发的联动，其他情况暂不支持；以后可扩展支持范围；
- 操作符
包含两种，通用操作符，和由当前字段的数据类型确定的操作符。
通用操作符包含4种：isExist(是否存在)，isNotExist（是否不存在），isEqual（是否相等），isNotEqual（是否不相等）
根据字段类型联动的特殊操作符包括：
| 字段类型 | 操作符 | 说明 |
|---|---|---|
| string | includes | 是否包含 |
| string | startWith | 是否以xxx开头 |
| string | endWith | 是否以xxx结尾 |
| string | pattern | 正则匹配 |
| number | >, <, <=, >= | 数值比较 |
| array | 监听数组长度（value.length）变化，同number | - |
| object | - |
- 动作配置区域包含多个子动作，子动作可以动态增删
- 每个子动作的结构包含目标节点，目标属性，目标属性值
- 目标节点，可以是字段/布局
- 目标属性，根据目标节点类型的不同，支持修改以下属性
| 目标节点类型 | 可设置属性 |
|---|---|
| 布局节点 | visible, disabled |
| 字段节点 | visible, disabled, value, enum，dataSourceUrl |
- 目标属性值，根据目标属性的类型做输入校验
条件满足时的动作配置，和条件不满足时的动作配置基本类似。
布局节点配置与字段节点配置类似，区别在于相比字段节点，它不需要配置联动与校验的规则。此处不再赘述。