Skip to content

流程表单 ​

概述 ​

流程表单(动态表单)是 BPM 工作流中承载业务数据的载体。它把「表单」从「流程模型」中解耦出来,作为可独立维护、可被多个流程复用的资源。流程管理员先通过可视化设计器拖拽出表单,再在流程模型中引用该表单,发起与审批时用户填写的数据最终成为流程变量,驱动条件分支、候选人计算与监听器执行。

表单分为两类,由流程模型的 formType 决定:

  • 流程表单(动态表单,formType=10):使用本模块维护的表单配置,由表单设计器渲染,数据以流程变量形式流转。
  • 业务表单(formType=20):指向前端自定义路由(formCustomCreatePath / formCustomViewPath),由业务自行实现页面,本模块不托管其结构。

image-20260930170505363

后端设计 ​

数据模型 ​

概念说明
表单配置 confform-create 的全局配置(JSON 字符串),如表单布局、label 宽度等
表单项 fields表单字段数组,每个元素是一条 form-create 生成规则(JSON 字符串),含 field、title、type 等
表单字段 field每个表单项在流程变量中的唯一键,条件、候选人策略、监听器均通过它取值
表单快照模型部署时把表单的 conf/fields 复制到流程定义,保证已发起实例不受表单后续修改影响

表单存储于 bpm_form 表,对应 BpmFormModel:

字段类型说明
idBigInteger表单编号
nameString(63)表单名称
statusSmallInteger状态:0 开启 / 1 关闭
confText表单整体配置(JSON 字符串),可为空
fieldsJSON表单项数组(JSON 字符串数组)
remarkString(255)备注,可为空

表单配置格式 ​

image-20260930170546223

表单基于 form-create 生态实现:设计器用 @form-create/designer,渲染用 @form-create/element-ui。保存时,前端通过两个方法把设计器状态编码为后端可存储的结构:

  • encodeConf(designer) → getOption() 转为 JSON,存入 conf
  • encodeFields(designer) → 遍历 getRule(),逐条 toJson 存入 fields

回显时通过 decodeConf / decodeFields 还原,再以 setConfAndFields(designer, conf, fields) 注入设计器。一个典型的 fields 元素是:

json
{"type":"input","field":"leaveDays","title":"请假天数","name":"leaveDays","props":{"type":"number"}}

其中 field 是流程变量的键,提交后可在条件表达式、候选人策略(表单内用户字段、表单内部门负责人)和 HTTP 监听器中以 FORM_VARIABLE 引用。

后端接口 ​

路由前缀 /bpm/form,标签「工作流-动态表单」,所需权限见下表:

接口方法权限说明
/bpm/form/pageGETbpm:form:query分页查询,支持按名称模糊、状态过滤
/bpm/form/simple-listGET登录即可简单列表(id/name/conf/fields),供模型选择表单
/bpm/form/getGETbpm:form:query根据 id 获取详情
/bpm/form/createPOSTbpm:form:create新增表单
/bpm/form/updatePUTbpm:form:update修改表单
/bpm/form/deleteDELETEbpm:form:delete删除表单(按 id)

服务层 BpmFormService 仅做标准 CRUD 与分页;数据层 BpmFormCRUD 继承通用 CRUDBase,无需额外逻辑。删除为物理删除,调用前请确保没有流程模型正在引用该表单。

与流程模型的绑定 ​

流程模型通过 formType + formId 关联到表单。模型部署(model/service.py 的发布逻辑)时会:

  1. 校验关联的流程表单是否存在(关联的流程表单不存在 会阻断部署);
  2. 把表单的 conf、fields 快照写入流程定义(form_conf、form_fields),并记下 form_id;
  3. 在模型详情中回填 formName 供前端展示。

表单与流程变量 ​

流程表单提交的数据即流程变量,是工作流引擎运转的「燃料」:

  • 条件分支:条件节点读取字段变量决定走哪条分支;
  • 候选人策略:表单内用户字段、表单内部门负责人 直接取字段值计算审批人;
  • 监听器参数:HTTP 监听器可将表单变量(FORM_VARIABLE)作为请求参数传出;
  • 触发器节点:触发器可更新/删除流程表单数据(流程变量)。

表单字段权限 ​

审批链路中,不同节点可能对同一字段有不同的可见/可编辑诉求。系统通过节点级「字段权限」控制,权限枚举 BpmFieldPermissionEnum:

值含义
1 READ只读
2 WRITE可编辑
3 NONE隐藏

节点(如发起人节点、审批人节点)在简易设计器中配置 fieldsPermission(结构为 [{字段: 权限值}],兼容 {field, permission} 项)。引擎在以下时机读取权限:

  • 获取实例详情/发起预览时,返回 formFieldsPermission,前端据此渲染字段的只读或隐藏态;
  • 提交变量时,引擎 _filter_variables_by_permission 仅保留配置为「可编辑」的字段,避免越权写入。

前端实现 ​

表单列表 ​

views/bpm/form/index.vue 提供表单管理列表,支持:

  • 新增 / 编辑 / 复制(复制时名称追加 _copy 并清空 id)/ 删除 / 查看详情;
  • 顶部内嵌 DocAlert 指向官方审批接入文档;
  • 操作按钮按 bpm:form:create、bpm:form:update、bpm:form:delete 等权限显隐。

表单设计器 ​

views/bpm/form/designer/index.vue 基于 FcDesigner(@form-create/designer)实现可视化拖拽,并通过 useFormCreateDesigner 增强,额外注入系统字段组件:

  • 用户选择器 UserSelect、部门选择器 DeptSelect、字典选择器 DictSelect、接口选择器 ApiSelect;
  • 文件上传、单图/多图上传、富文本、行政区划选择等。

保存时打开 modules/form.vue 弹窗,填写表单名称/备注后,调用 encodeConf、encodeFields 把设计器状态编码,再提交 createForm 或 updateForm。

与流程模型的集成 ​

在流程模型编辑器 model/form/modules/bpm-model-editor.vue 中,监听 modelData.formId 变化:当选中流程表单时,调用 getForm(id) 拉取 fields,通过 provide('formFields', ...) 注入,供条件、候选人等配置引用表单字段。

实例发起与审批中的渲染 ​

views/bpm/processInstance/create/modules/form.vue 与详情页(processInstance/detail)使用 setConfAndFields2 在 form-create 渲染器上装载 conf/fields 并回填流程变量值,结合 formFieldsPermission 控制字段只读/隐藏。

典型使用流程 ​