Skip to content

表单设计

表单决定发起人提交哪些数据,也决定条件分支能使用哪些字段。建议先完成业务字段清单,再进入设计器拖拽组件。

设计器结构

区域用途
左侧组件面板选择输入、选择、附件和布局组件
中间表单画布排列、复制或删除字段
右侧属性面板设置名称、必填、选项、默认值和样式

审批表单设计器的组件、画布和属性面板

图中从左到右依次是组件列表、表单画布和属性面板,设计时应同时关注 PC/手机预览效果。

1. 左侧组件库

左侧组件库用于选择表单需要采集的数据类型。可以通过搜索框按组件名称查找,也可以在基础控件、增强控件等分类中浏览。

表单设计器左侧的组件搜索和组件库

添加字段时:

  1. 先判断业务数据属于文本、数字、选项、日期、人员组织还是附件;
  2. 从左侧找到对应组件,将其拖入中间画布的目标位置;
  3. 不要为了方便把金额、日期、部门等结构化数据全部做成文本框;
  4. 组件较多时使用搜索框定位,避免选中名称相似但数据类型不同的组件。

基础控件适合常规输入和选择,增强控件用于身份证、电话、手写签名、部门、省市区、评分、附件和金额等特定数据。组件类型会影响校验、条件分支和后续数据统计,发布后不宜随意更换。

2. 中间表单画布

中间画布展示发起人最终看到的表单结构,也是调整字段顺序和页面布局的主要区域。

表单设计器中间的字段画布和设备视图

在画布中可以:

  • 点击字段,在右侧打开该字段的属性和样式;
  • 拖动字段调整填写顺序;
  • 复制结构相近的字段,再修改名称和选项;
  • 删除不再使用的字段;
  • 使用卡片、栅格或布局组件划分较长的业务表单;
  • 通过 PC/手机视图检查不同终端的排版。

画布中的字段顺序应贴近实际填写过程。建议先放申请事由、业务类型等核心信息,再放金额、时间、明细和附件,避免发起人频繁上下查找。

3. 右侧属性与样式面板

右侧面板根据当前选中的对象切换配置内容。未选中具体字段时,展示页面级属性;选中字段后,展示该字段的名称、必填、提示语、默认值、选项、校验和样式。

表单设计器右侧的页面属性和样式面板

截图中选中的是根页面,可以配置页面名称、画布宽度和画布高度。选中具体字段后,应重点检查:

  • 字段名称是否清楚表达业务含义;
  • 是否必须填写,以及为空时的提示是否明确;
  • 单选、多选和选择框的选项是否完整且互斥关系正确;
  • 默认值是否会造成误提交;
  • 数字、金额、日期等字段的范围和格式是否合理;
  • 样式调整后是否仍适配手机页面。

4. 顶部步骤、预览与发布

顶部显示当前审批表单名称和四个配置步骤,并提供预览、发布等全局操作。

表单配置顶部的四个步骤、预览和发布入口

  • 基础设置:维护名称、分组、发起范围和管理员;
  • 表单设计:配置本页说明的字段和布局;
  • 流程设计:使用表单字段设置审批路径;
  • 高级设置:配置撤销、去重、加签、通知和退回等规则;
  • 预览:在发布前模拟发起人看到的表单;
  • 发布:保存当前配置并用于后续新发起的审批。

切换步骤不会代替校验和发布。修改表单字段后,还要检查流程中的条件分支和节点字段权限,确认没有引用已删除或已变更含义的字段。

5. 画布工具栏和设备视图

画布上方的工具栏用于辅助编辑和检查当前设计。

表单设计画布的搜索、删除、撤销、缩放和设备视图工具

常用操作包括:

  • 切换设计相关视图,辅助查看组件结构;
  • 对选中字段执行删除等操作;
  • 使用撤销、重做恢复最近的编辑;
  • 调整画布缩放比例,查看整体或局部布局;
  • 在 PC 和手机视图之间切换;
  • 点击 表单预览,实际检查字段填写效果。

建议每完成一个业务区域就预览一次,不要等到整个表单全部完成后才集中检查。手机视图空间更窄,长字段名、并排布局和较多选项尤其容易出现换行或拥挤。

常用组件

业务数据推荐组件
标题、事由单行输入框
详细说明多行输入框
数量数字输入框
金额金额组件
业务类型单选框或选择框
多个业务标签多选框
发生时间日期或日期范围
证明材料图片或附件
多条费用/采购明细明细或表格
所属组织部门组件

推荐设计顺序

  1. 列出审批判断和业务执行所需的全部字段。
  2. 把最常填写、最影响流程判断的字段放在前面。
  3. 逐个添加组件并设置清晰字段名。
  4. 配置必填、选项、默认值和提示语。
  5. 使用卡片或栅格对长表单分区。
  6. 分别检查 PC 和手机布局。
  7. 用表单预览模拟一次完整填写。

字段设计规则

  • 字段名表达完整业务含义,例如“申请金额”,不要只写“金额”。
  • 金额、数量、日期使用对应结构化组件,不要全部用文本框。
  • 单选和多选的选项值发布后不要随意删除或改变含义。
  • 附件字段应写明格式、数量和用途。
  • 身份证、电话、签名等敏感字段只对必要节点开放。

条件字段规则

条件分支中可直接使用:

  • 发起人;
  • 设为必填的数字输入框;
  • 设为必填的单选框;
  • 设为必填的多选框。

如果字段没有出现在条件选择列表,先检查组件类型,再检查是否已经设置为必填。

节点字段权限

流程中的每个发起、审批、办理和抄送节点可以配置:

  • 可编辑:允许该节点修改字段;
  • 只读:允许查看但不能修改;
  • 隐藏:该节点不展示字段;
  • 可编辑字段还可设置该节点是否必填。

遵循最小可见、最小可编辑原则,不要让无关人员看到敏感信息。

预览检查

  • [ ] 必填字段不能被跳过。
  • [ ] 选项和值符合业务规则。
  • [ ] 附件说明清楚。
  • [ ] PC 和手机布局均可正常填写。
  • [ ] 条件字段已经设为必填。
  • [ ] 敏感字段权限符合要求。

下一步:设计审批流程