RuoYi Office 工作流前端实现BPMN 与 SIMPLE 双设计器如何落到 Flowable业务单据怎样嵌进审批演示地址http://ruoyioffice.com | 源码1·GitHubruoyi-office | 源码2·GitCoderuoyi-office | 源码3·Giteeruoyi-office | 微信17156169080备注「RuoYi Office」很多团队一提工作流就只想到「Flowable 引擎好不好用」却忽略真正决定交付效率的是前端怎么画、怎么发、怎么嵌业务单。RuoYi Office 在 PC 管理端Vue3 Vben Admin上同时提供BPMN 标准设计器与SIMPLE 简单流程设计器运行时统一落到 Flowable业务侧再用 CUSTOM 路径 FlowBill 把用印、请假、资产领用等单据嵌进同一套待办详情。本文按「技术栈 → 双模式差异 → 编译路径 → 单据集成 → 详情运行时」拆开讲。▲ 全景配色对齐平台架构图蓝BPMN、绿SIMPLE、青运行时 UI底层统一 Spring Boot Flowable引言工作流前端要解决三件事问题只靠后端引擎不够前端要补的能力谁来配流程XML 手写门槛高可视化设计器业务可配 / 专家可深表单从哪来变量 Map 太散NORMAL 拖拽表单 / CUSTOM 业务页审批页怎么长引擎只给任务详情嵌业务组件 操作按钮 轨迹图RuoYi Office 的答案不是「二选一设计器」而是双模式共存默认给业务同学用 SIMPLE需要复杂网关、监听器、标准 BPMN 图元时切 BPMN。一、技术栈与工程落点层技术工程位置印象PC 壳Vue3 Vben Admin Ant Design Vueapps/web-antdBPMN 画布bpmn-js diagram-js properties-panelviews/bpm/components/bpmn-process-designer/SIMPLE 画布自研钉钉风节点树 右侧配置抽屉views/bpm/components/simple-process-design/模式枚举BpmModelType.BPMN10/SIMPLE20vben/constants运行时引擎Flowable 7后端模型保存进 ACT_RE_*SIMPLE 编译SimpleModelUtils.buildBpmnModel服务端把 JSON 编成 BpmnModel模式切换入口在模型向导「流程设计」步process-design.vue按modelData.type挂载BpmModelEditor或SimpleModelDesign。template v-ifmodelData.type BpmModelType.BPMN BpmModelEditor ... successhandleDesignSuccess / /template template v-else SimpleModelDesign ... refsimpleDesign / /template保存时BPMN 成功回调写入bpmnXmlSIMPLE 写入simpleModelJSON。▲ 流程模型是双设计器的统一入口创建/修改时选择类型再进入对应画布二、BPMN 模式标准图元直接出 XML2.1 能做什么标准 BPMN 2.0 元素用户任务、网关、事件、子流程等Flowable 扩展候选人、多实例、监听器、表单键等属性面板二次封装适合复杂分支、包容/并行精细控制、与外部 BPMN 工具互通、专家建模2.2 编译路径前端画布导出BPMN XML→ 后端saveModel写入流程模型仓库 → 部署后成为 ProcessDefinition。没有「先 JSON 再转」的中间层——所见即 XML。2.3 代价学习曲线陡业务同学容易配错网关方向、漏画连线。属性面板字段多培训成本高于 SIMPLE。三、SIMPLE 模式业务友好JSON 再编译3.1 能做什么节点类型覆盖常见审批场景枚举BpmSimpleModelNodeTypeEnum例如发起人 / 审批人 / 抄送人 / 办理人条件分支 / 并行 / 包容 / 路由延迟、触发器、子流程右侧配置抽屉可配候选人策略、多人审批依次/会签/或签、超时、驳回、字段权限等——用业务语言而不是 BPMN 术语。▲ SIMPLE 右侧面板审批人策略与多人审批方式等配置后编译进 Flowable 多实例/边界事件3.2 编译路径simpleModel (JSON) → SimpleModelUtils.buildBpmnModel(...) → Flowable BpmnModel → 生成 XML 自动布局 → 与 BPMN 模式一样部署进引擎运行时还可基于 SIMPLE 结构做节点预测simulateProcess一类能力时间轴展示更贴近「钉钉审批链」体验。3.3 默认为什么是 SIMPLE模型创建默认type SIMPLE大多数 OA/HRM 单据是「发起 → 若干审批 → 结束」SIMPLE 交付更快真要上复杂编排再改类型或重建 BPMN 模型。四、BPMN vs SIMPLE一张表说清差异维度BPMNSIMPLE前端技术bpmn-js 生态自研 Vue 节点树存储形态bpmnXmlsimpleModelJSON进引擎方式XML 直接部署JSON →SimpleModelUtils→ BpmnModel配置体验标准图元 属性面板抽屉表单 业务枚举擅长复杂网关、监听、互通审批链、组织策略、快速上线详情预览bpm-viewersimple-bpm-viewer学习成本高低选型建议80% 业务审批单 → SIMPLE需要「按金额走不同网关 服务任务」→ BPMN同一业务尽量固定一种类型避免运营时两边各改一版导致认知分裂五、表单双轨NORMAL 与 CUSTOM流程模型还要绑「表单从哪来」类型含义发起时审批详情时NORMALform-create 流程表单设计器表单渲染同套字段 字段权限CUSTOM业务自定义页formCustomCreatePath路由跳转formCustomViewPath动态组件嵌入CUSTOM 是单据集成的关键用印申请、资产领用等不是在流程表单里拖几百个字段而是跳到业务info页发起审批时再把同一业务组件嵌进详情。▲ NORMAL 表单可在「流程表单」里维护CUSTOM 则指向业务模块路由/组件六、业务单据如何集成三角对齐把一张业务单接到工作流通常要对齐三件事6.1 processDefinitionKey ↔ 单据类型枚举例如用印、补卡、资产入库各自有固定 process key如hr_card_replacement_bill。前端发起与后端FlowBillServiceFactory.getServiceByProcessKey都靠它找实现。6.2 FlowBillService 生命周期业务 Service 实现统一接口引擎回调时updateProcessStatus同步审批中/通过/驳回等onProcessApproved/ 拒绝 / 撤回写业务副作用建卡、回写打卡、改库存…删除实例时清理单据按模块实现前端不直接改业务终态——按钮调的是任务 API终态靠回调避免双写不一致。6.3 发起人自选审批人当节点候选人策略为「发起人自选」时发起页收集startUserSelectAssignees:RecordnodeId,userId[]随createProcessInstance变量提交引擎按节点 id 注入候选人。SIMPLE 与 BPMN 都能配该策略前端发起页要能按模型解析哪些节点需要自选。▲ 发起入口选流程定义后NORMAL 填表单 / CUSTOM 跳业务创建页七、审批详情一套壳两种图嵌业务processInstance/detail/index.vue是运行时中枢拉审批详情任务、权限、活动节点若 CUSTOM用businessKey当单据 idregisterComponent(formCustomViewPath)动态加载业务详情注入isApproval、字段权限、活动节点给业务组件底部operation-button通过 / 拒绝 / 退回 / 加签 / 转办 / 抄送…轨迹区按模型类型挂simple-bpm-viewer或bpm-viewer待办列表 → todo-detail?idtaskId → 左/中业务表单NORMAL 或 CUSTOM 组件 → 右/下流程图 审批记录 → 底操作按钮权限由引擎与模型按钮配置决定▲ 待办是员工主入口点进去才是「业务单 流程壳」的完整详情字段权限可写/只读/隐藏在 SIMPLE 审批节点可配businessFieldsPermission详情渲染时落到业务表单——这是 CUSTOM 单据「同一套页面、审批态只读部分字段」的前端基础。八、端到端推荐体验在线演示http://ruoyioffice.com/web/账号admin/admin123流程模型打开列表新建或编辑一个 SIMPLE 模型看节点抽屉配置。再找一个 BPMN 类型模型或改类型对比画布差异。发起流程走一笔 OA/HRM 业务单CUSTOM观察是否跳业务页。待办另一账号审批看详情是否嵌业务表单、轨迹图是否与类型匹配。可选同一单据看 NORMAL 流程表单流程对比体验。源码仓库GitHub | GitCode | Gitee常见问题FAQSIMPLE 和 BPMN 能来回改类型吗类型切换意味着设计器数据源切换simpleModelvsbpmnXml。实务上视为「换一套图」不要指望无损互转重要流程变更应回归测试部署版本。业务单据必须走 CUSTOM 吗字段少、无复杂主子表可用 NORMAL 快速上线。主子表、附件、领域校验多CUSTOM FlowBill 更稳。前端要直接调 Flowable REST 吗不要。统一走本系统/admin-api/bpm/**由服务端封装引擎便于权限、租户、FlowBill 回调一致。移动端设计器一样吗移动端侧重待办办理与轻发起双设计器在 PC。App/H5 与 PC 共用同一 process key 与任务 API。和「多人审批 / 超时 / 抄送」文什么关系那些是节点能力本文是承载这些能力的前端骨架画在哪、存在哪、详情怎么嵌。结语工作流前端的核心不是「再包一层漂亮流程图」而是给业务一条低门槛的 SIMPLE 路给专家一条标准 BPMN 路两者编译进同一引擎再用 CUSTOM FlowBill 把真实单据嵌进发起与审批详情。配色与三端架构图一致——设计器可以分蓝绿两路底座始终是那条蓝色的 Spring Boot Flowable。你们团队现在是全员 BPMN还是已经默认 SIMPLE单据集成卡在「跳转发起」还是「详情嵌组件」欢迎评论区交流。想要体验 RuoYi Office 的强大功能在线演示http://ruoyioffice.com/web/账号 admin / admin123源码仓库GitHub | GitCode | Gitee技术咨询添加微信17156169080备注「RuoYi Office」⭐如果觉得不错请给个 Star 支持一下