表单设计

设计表单

布局说明

整个页面分为三个区域：

• 左侧：展示所有可用的表单项组件，按类型分类（如单行文本、多行文本、数字、日期、单选、多选、下拉框等）。
• 中间：表单设计画布，实时预览表单布局与样式，所见即所得。
• 右侧：当前选中表单项的属性配置面板，支持字段参数调整。

操作方式

• 添加表单项：从左侧拖拽所需组件至中间画布区域，松开后即完成添加。
• 排序调整：已添加到画布的表单项，支持鼠标拖拽重新排序。
• 删除表单项：点击表单项右上角的 删除 按钮，可移除该字段。
• 编辑表单项：点击表单项右上角的 编辑 按钮，右侧面板将同步展示该字段的配置项。

通用属性说明

每个表单项均包含以下公共配置属性：

属性	说明
表单ID	字段的唯一标识，用于API接口传递表单数据时进行字段映射。支持自定义，但需保证全局唯一。
标题	表单字段的显示标签，即用户在前端看到的字段名称。
默认提示	输入框内的占位提示文字（placeholder），引导用户填写。
其他	包含字段的拓展配置，如是否必填、打印等。

注意：表单ID 为关键字段，请确保在同一表单内不重复，否则可能导致数据覆盖或接口映射异常。

外部表单

表单路径

填写 Vue 组件文件的访问路径，系统将以微前端方式加载该自定义表单页面。

• 参考示例：可参照 /src/views/flyflow/demo/form.vue 文件进行自定义表单开发。
• 实现要求：开发者需在自有 Vue 项目中按约定规范编写表单组件，包括数据提交、校验及事件通信等逻辑。

自定义字段

支持在表单配置中预设自定义字段，用于扩展表单数据结构。

• 字段定义：配置字段名称（key）与字段值（value），支持添加多个字段。
• 用途说明：
  • 通过 API 接口发起流程时，可附带这些字段值一并传递。
  • 自定义字段可作为条件，用于流程分支路由判断（如条件分支节点）。

提示：自定义字段的值可在流程运行中动态获取，适用于需要外部数据参与流转决策的场景。

链接表单

网页地址

填写表单页面的完整 URL 地址。

• 要求：该地址必须为可公网访问或内网可路由的有效链接。
• 实现方式：系统通过 <iframe> 内嵌加载该页面，与主应用保持隔离。
• 自动拼接参数：flowId、processInstanceId、taskId、nodeId、nodeUniqueId。

网页高度

设置 iframe 容器的显示高度（单位：px 或百分比）。

• 作用：合理设置高度可避免滚动条或内容截断，提升用户填单体验。
• 建议：根据目标页面的实际内容高度进行调整，必要时可预留一定余量。

自定义字段

支持在表单配置中预设自定义字段，用于扩展表单数据结构。

• 字段定义：配置字段名称（key）与字段值（value），支持添加多个字段。
• 用途说明：
  • 通过 API 接口发起流程时，可附带这些字段值一并传递。
  • 自定义字段可作为条件，用于流程分支路由判断（如条件分支节点）。

提示：链接表单的自定义字段与外部表单用法一致，可统一管理流程中涉及的扩展参数。