Skip to content

表单设计

表单设计器用于配置流程发起时用户需要填写的表单。通过拖拽字段控件到画布,即可快速构建业务表单。

设计器布局

表单设计器采用三栏布局:

  • 左侧控件面板:可用字段类型列表,拖拽到中间画布即可添加
  • 中间画布:表单预览区,支持拖拽排序、嵌套布局
  • 右侧属性面板:选中字段后显示该字段的配置选项

支持的字段类型

字段类型说明典型用途
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,建议英文命名,如 leaveTypestartDate
  • 是否必填:勾选后该字段必须填写才能提交
  • 占位提示:输入框中的提示文字

扩展属性(按字段类型不同):

  • 选项值(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
则走 "病假审批" 分支
否则走 "普通审批" 分支

节点表单权限

在审批/办理节点的配置中,可以设置每个表单字段的权限:

权限说明
可读审批人可以看到该字段的值,但不能修改
可编辑审批人可以修改该字段的值
隐藏审批人看不到该字段

例如:在"请假申请"流程中,发起人可以填写"请假原因",而审批人只能看到但不能修改。

审批人指定中使用

在审批人节点配置中,可以使用表单字段来动态指定审批人:

  • 表单内联系人:选择表单中的人员字段作为审批人
  • 表单内部门:选择表单中的部门字段,自动取部门负责人作为审批人

设计规范建议

  1. 字段标识使用英文:便于后续在条件分支、审批人策略中引用
  2. 合理分组:将相关字段放入同一分组,提升表单可读性
  3. 必填项标注:关键信息设置为必填,避免提交后数据不完整
  4. 预留说明字段:在复杂表单中添加说明文字,引导用户填写

Built with VitePress for local documentation preview.