表单设计
表单设计器用于配置流程发起时用户需要填写的表单。通过拖拽字段控件到画布,即可快速构建业务表单。
设计器布局
表单设计器采用三栏布局:
- 左侧控件面板:可用字段类型列表,拖拽到中间画布即可添加
- 中间画布:表单预览区,支持拖拽排序、嵌套布局
- 右侧属性面板:选中字段后显示该字段的配置选项
支持的字段类型
| 字段类型 | 说明 | 典型用途 |
|---|---|---|
text | 单行文本 | 标题、名称、简述 |
textarea | 多行文本 | 详细说明、备注 |
number | 数字 | 数量、金额(不带货币) |
amount | 金额 | 带有货币单位的金额,支持精度设置 |
select | 下拉选择 | 单选场景 |
multiSelect | 多选 | 多选场景 |
date | 日期 | 单个日期选择 |
dateRange | 日期范围 | 起止日期选择 |
radio | 单选框 | 选项较少的单选场景 |
checkbox | 复选框 | 多选场景 |
switch | 开关 | 布尔值场景(是/否) |
attachment | 附件 | 上传文件,支持设置最大数量 |
image | 图片 | 上传图片,支持设置最大数量 |
phone | 手机号 | 手机号输入,带格式校验 |
email | 邮箱 | 邮箱输入,带格式校验 |
idCard | 身份证号 | 身份证输入,带格式校验 |
serialNumber | 流水号 | 自动生成的流水号,支持前缀配置 |
description | 说明文字 | 纯展示文本,用于提示说明 |
row | 分栏 | 横向分栏布局,每栏可继续放置字段 |
group | 分组 | 字段分组,可设置分组标题 |
divider | 分割线 | 视觉分隔 |
relatedData | 关联数据 | 关联其他业务数据 |
user | 人员选择 | 选择系统内用户 |
department | 部门选择 | 选择系统内部门 |
字段配置
选中画布上的字段后,右侧属性面板可配置:
基础属性:
- 字段名称:显示在表单上的标签
- 字段标识:表单数据的 key,建议英文命名,如
leaveType、startDate - 是否必填:勾选后该字段必须填写才能提交
- 占位提示:输入框中的提示文字
扩展属性(按字段类型不同):
- 选项值(select/multiSelect/radio/checkbox):配置选项列表
- 精度(number/amount):小数位数
- 货币(amount):如 CNY、USD
- 日期格式(date/dateRange):如 YYYY-MM-DD
- 最大数量(attachment/image):允许上传的最大文件数
- 前缀(serialNumber):流水号前缀
布局能力
分栏(Row)
将字段拖拽到分栏组件中,可实现横向并排布局。分栏支持自定义每栏的宽度比例(如 6:6、4:8、3:9 等)。
分组(Group)
将相关字段放入分组中,可设置分组标题。分组可展开/收起,提升表单可读性。
分割线(Divider)
在不同区块之间添加视觉分隔线。
表单字段在流程中的使用
条件分支中使用
在流程设计的条件分支中,可以引用表单字段的值作为分支条件。例如:
如果 请假类型 == "病假" 且 天数 > 3
则走 "病假审批" 分支
否则走 "普通审批" 分支节点表单权限
在审批/办理节点的配置中,可以设置每个表单字段的权限:
| 权限 | 说明 |
|---|---|
| 可读 | 审批人可以看到该字段的值,但不能修改 |
| 可编辑 | 审批人可以修改该字段的值 |
| 隐藏 | 审批人看不到该字段 |
例如:在"请假申请"流程中,发起人可以填写"请假原因",而审批人只能看到但不能修改。
审批人指定中使用
在审批人节点配置中,可以使用表单字段来动态指定审批人:
- 表单内联系人:选择表单中的人员字段作为审批人
- 表单内部门:选择表单中的部门字段,自动取部门负责人作为审批人
设计规范建议
- 字段标识使用英文:便于后续在条件分支、审批人策略中引用
- 合理分组:将相关字段放入同一分组,提升表单可读性
- 必填项标注:关键信息设置为必填,避免提交后数据不完整
- 预留说明字段:在复杂表单中添加说明文字,引导用户填写