创建流程 - 表单设计

功能概述

表单设计是创建流程模型的第二步，用于可视化设计流程申请表单。系统提供可视化表单设计器，采用 左侧组件区 + 中间画布区 + 右侧属性区 的三栏布局，通过拖拽组件的方式快速构建申请表单。

页面布局

区域	位置	说明
组件区	页面左侧	列出所有可用的表单组件，分类展示
画布区	页面中间	表单设计的主工作区，支持拖入组件、调整顺序
属性区	页面右侧	选中组件后展示并编辑其属性配置

表单组件列表

系统提供以下 15 种表单组件，覆盖常见的表单字段类型：

1. 输入框

• 用途：单行文本输入，如姓名、手机号、工号等
• 可配置属性：字段名称、提示文字、默认值、最大长度、正则校验、是否必填

2. 多行输入框

• 用途：多行文本输入，如申请原因、备注说明等
• 可配置属性：字段名称、提示文字、默认值、最大行数、是否必填

3. 选择器

• 用途：下拉选择，从预设选项中选择一项或多项
• 可配置属性：字段名称、选项列表（手动录入或数据源）、是否多选、是否必填

4. 单选框

• 用途：单选项，从一组互斥选项中选择一项
• 可配置属性：字段名称、选项列表、排列方向（横向/纵向）、是否必填

5. 多选框

• 用途：多选项，从一组选项中选择多项
• 可配置属性：字段名称、选项列表、排列方向（横向/纵向）、至少选择数

6. 日期

• 用途：日期或日期时间选择，如出差日期、请假日期等
• 可配置属性：字段名称、日期格式（日期/日期时间/时间）、是否包含结束日期、是否必填

7. 说明文字

• 用途：纯展示文本，用于表单中的提示说明、分段标题等
• 可配置属性：文字内容、字号、颜色、对齐方式

8. 附件

• 用途：文件上传，支持附件上传和图片上传
• 可配置属性：字段名称、上传类型（附件/图片/全部）、文件数量限制、文件大小限制

9. 历史记录

• 用途：展示流程审批历史的只读组件，通常放在表单末尾
• 可配置属性：显示条数、默认展开

10. 用户选择器

• 用途：从组织架构中选择用户，如选择审批人、经办人等
• 可配置属性：字段名称、选择范围（全组织/指定部门）、是否多选、是否必填

11. 部门选择器

• 用途：从组织架构中选择部门
• 可配置属性：字段名称、选择层级限制、是否多选、是否必填

12. 字典选择器

• 用途：从系统字典中选择字典项，如费用类型、请假类型等
• 可配置属性：字段名称、字典类型、是否必填

13. 区域选择器

• 用途：省市区域级联选择，如出差地点、办公地点等
• 可配置属性：字段名称、层级深度（省/市/区）、是否必填

14. 假勤控件

• 用途：请假相关的专用控件，自动计算时长
• 可配置属性：字段名称、假勤类型（年假/事假/病假等）、时长单位（天/小时）

15. 时间段

• 用途：开始时间 - 结束时间 的区间选择
• 可配置属性：字段名称、开始字段标签、结束字段标签、是否跨天、是否必填

操作说明

添加组件

1. 从左侧组件区找到需要的组件
2. 鼠标拖拽组件至中间画布区的目标位置
3. 松开鼠标完成添加

编辑组件属性

1. 在画布区点击选中已添加的组件
2. 右侧属性区显示该组件的可配置属性
3. 根据需要修改属性值

调整组件顺序

• 在画布区通过拖拽组件上下移动调整顺序
• 或使用组件右上角的上下箭头按钮调整

删除组件

• 选中组件后，点击组件右上角的删除图标
• 也可以在选中后按键盘 Delete 键删除

表单预览

• 点击画布上方的 预览 按钮
• 以实际样式展示表单效果
• 可测试表单校验逻辑

最佳实践

• 字段命名：使用清晰易懂的字段名称，便于填表人理解
• 必填设置：关键业务字段应设置为必填，确保数据完整性
• 组件排序：按照填表习惯从上到下排列字段，逻辑连贯
• 合理分组：使用"说明文字"组件对表单进行分段分组
• 附件限制：根据业务需求合理设置附件数量和大小限制