Appearance
工作流系统
**本文引用的文件** - [index.vue](file://dm/lemes-web/src/components/bpmnModeler/index.vue) - [task.vue](file://dm/lemes-web/src/components/bpmnModeler/components/nodePanel/task.vue) - [startEnd.vue](file://dm/lemes-web/src/components/bpmnModeler/components/nodePanel/startEnd.vue) - [init.js](file://dm/lemes-web/src/components/bpmnModeler/flowable/init.js) - [flowable.json](file://dm/lemes-web/src/components/bpmnModeler/flowable/flowable.json) - [index.js](file://dm/lemes-web/src/components/bpmnModeler/index.js) - [FlowClient.java](file://lemes-cloud/lemes-business-devicemate/lemes-service-dm-workflow/lemes-service-dm-workflow-common/src/main/java/com/lenovo/lemes/service/dm/workflow/client/feign/FlowClient.java) - [SyncFlowUserJob.java](file://lemes-job-devicemate/lemes-job-devicemate-executor/src/main/java/com/lenovo/lemes/job/devicemate/executor/handler/SyncFlowUserJob.java) - [FlowUserRoleServiceImpl.java](file://lemes-job-devicemate/lemes-job-devicemate-executor/src/main/java/com/lenovo/lemes/job/devicemate/executor/service/impl/FlowUserRoleServiceImpl.java) - [workflow.sql](file://docs/ddl/workflow.sql) - [BreakInfoDTO.java](file://lemes-cloud/lemes-business-devicemate/lemes-service-dm-workflow/lemes-service-dm-workflow-common/src/main/java/com/lenovo/lemes/service/dm/workflow/entity/dto/BreakInfoDTO.java)目录
简介
本技术文档面向DeviceMate工作流系统，聚焦于Flowable流程引擎的前端设计器集成、流程定义与部署机制、表单设计、任务分配、流程监控与状态管理、与业务系统的集成模式与数据传递、异常处理与回滚机制，以及性能优化策略。文档同时提供流程设计器使用指南、流程图示例与最佳实践，帮助流程设计师与系统集成开发者快速理解并高效落地。
项目结构
工作流系统由三部分组成：
- 前端流程设计器：基于bpmn-js与Flowable扩展，提供流程图绘制、属性配置、任务高亮与导出能力。
- 后端工作流服务：通过Feign客户端对接工作流服务，提供流程启动、审批、节点查询、撤销等接口。
- 作业调度与用户同步：ElasticJob定时任务将业务系统用户与角色同步至工作流用户库，保障任务分配可用性。
图表来源
- index.vue:104-123
- flowable.json:1-858
- init.js:6-24
- task.vue:246-328
- startEnd.vue:73-81
- FlowClient.java:22-62
- SyncFlowUserJob.java:37-54
- FlowUserRoleServiceImpl.java:31-59
- workflow.sql:1-564
章节来源
- index.vue:104-123
- index.vue:154-168
- index.vue:270-314
- FlowClient.java:22-62
- SyncFlowUserJob.java:37-54
- FlowUserRoleServiceImpl.java:31-59
- workflow.sql:1-564
核心组件
- 前端流程设计器
- 初始化与导入：通过初始化模板生成默认流程定义，并支持从XML导入与自适应缩放、放大缩小、撤销重做等操作。
- Flowable扩展：注册Flowable命名空间与扩展类型，确保设计器可识别Flowable属性与元素。
- 属性面板：任务节点面板支持指派人、候选人、候选组、异步执行、到期时间、表单Key、优先级、跳过表达式、补偿标记、触发器、类名、自动存储变量、排除规则、规则变量输入、规则、结果变量等属性的读写与联动。
- 起止节点面板：支持发起人与表单Key配置。
- 导出能力：支持导出XML与SVG，并通过事件向外抛出结果。
- 工作流API客户端
- 提供流程启动、审批、获取业务审批节点、撤销流程等接口，统一返回封装对象。
- 用户与角色同步作业
- 从业务系统拉取用户、角色与用户角色关系，同步至工作流用户库与用户角色中间表，保证任务分配可用。
章节来源
- index.vue:104-123
- index.vue:154-168
- index.vue:270-314
- flowable.json:1-858
- init.js:6-24
- task.vue:246-328
- startEnd.vue:73-81
- FlowClient.java:22-62
- SyncFlowUserJob.java:37-54
- FlowUserRoleServiceImpl.java:31-59
架构总览
前端设计器通过Flowable扩展在bpmn-js中渲染流程图，支持任务节点属性配置与流程导出；后端通过Feign客户端调用工作流服务，完成流程启动、审批、节点查询与撤销；定时作业负责将业务系统用户与角色同步至工作流用户库，保障任务分配与审批可用。
图表来源
- index.vue:104-123
- flowable.json:1-858
- init.js:6-24
- task.vue:246-328
- startEnd.vue:73-81
- FlowClient.java:22-62
- SyncFlowUserJob.java:37-54
- FlowUserRoleServiceImpl.java:31-59
- workflow.sql:1-564
详细组件分析
前端流程设计器（bpmn-js + Flowable）
- 初始化与导入
- 使用初始化模板生成默认流程定义，包含一个起始事件。
- 支持从XML导入并进行视口适配与工具栏样式调整。
- Flowable扩展
- 注册Flowable命名空间与扩展类型，包括输入输出绑定、执行监听器、任务监听器、多实例循环特性等。
- 任务节点属性面板
- 支持指派人、候选人、候选组、异步执行、到期时间、表单Key、优先级、跳过表达式、补偿标记、触发器、类名、自动存储变量、排除规则、规则变量输入、规则、结果变量等属性的读写与联动。
- 起止节点属性面板
- 支持发起人与表单Key配置。
- 导出能力
- 支持导出XML与SVG，并通过事件向外抛出结果，便于后端部署与展示。
图表来源
章节来源
- index.vue:104-123
- index.vue:154-168
- index.vue:270-314
- flowable.json:1-858
- init.js:6-24
- task.vue:246-328
- startEnd.vue:73-81
工作流API客户端（启动、审批、节点查询、撤销）
- 接口定义
- 启动流程：接收流程启动参数，返回启动结果。
- 审批流程：接收审批参数，返回审批结果。
- 获取业务审批节点：根据流程实例ID与业务类型获取审批节点列表。
- 撤销流程：根据流程实例ID撤销流程。
- 集成要点
- 通过Feign客户端统一调用，配置超时与熔断降级策略，确保系统稳定性。
图表来源
章节来源
用户与角色同步作业（ElasticJob）
- 同步流程
- 从业务系统查询用户角色关系，拉取用户与角色列表，过滤后同步至工作流用户库与用户角色中间表。
- 使用批处理插入，减少数据库往返，提升同步效率。
- 关键点
- 基于用户ID与角色ID的组合去重，避免重复同步。
- 通过作业框架定时执行，保障数据一致性。
图表来源
章节来源
表单设计与任务分配
- 表单Key
- 在起止节点与任务节点面板中均可设置表单Key，用于关联业务表单。
- 任务分配
- 支持指派人（assignee）、候选人（candidateUsers）、候选组（candidateGroups）三种方式。
- 支持到期时间、优先级、异步执行、跳过表达式等属性，满足复杂业务场景。
- 多实例与监听器
- 支持多实例循环特性与执行/任务监听器配置，便于扩展业务逻辑。
章节来源
流程监控与状态管理
- 前端高亮
- 根据任务完成状态对节点与连线进行高亮标记，区分已完成与待办节点。
- 数据库日志
- 工作流日志表记录流程实例、任务、节点类型、审批状态与结果等关键信息，便于审计与追踪。
- 审批日志
- 审批日志表记录每个节点的审批人、审批时间、业务单号与备注等，支撑流程追溯。
章节来源
工作流与业务系统的集成模式
- 数据传递
- 通过流程定义中的输入输出绑定与变量传递，实现业务系统与工作流之间的数据交换。
- 状态同步
- 审批日志与工作流日志记录关键状态变化，结合业务系统状态机，实现跨系统状态一致。
- 表单集成
- 通过表单Key将流程节点与业务表单关联，实现表单驱动的流程执行。
章节来源
流程设计器使用指南与最佳实践
- 使用指南
- 新建流程：点击“新建”生成默认流程定义；或通过“加载XML”导入已有流程。
- 编辑流程：拖拽节点、连接线，配置节点属性（表单Key、指派人、候选人、到期时间等）。
- 导出流程：点击“下载xml”与“下载svg”，保存流程定义与图形。
- 最佳实践
- 明确流程分类与命名规范，统一使用表单Key关联业务表单。
- 合理设置任务分配策略，优先使用候选人/候选组以提升灵活性。
- 使用监听器与变量传递实现业务扩展，避免硬编码。
- 对关键节点设置到期时间与优先级，提升流程执行效率。
章节来源
依赖分析
- 前端设计器依赖
- bpmn-js：流程图渲染与交互。
- Flowable扩展：提供Flowable属性与元素支持。
- Element UI：提供按钮、上传、提示等UI组件。
- 后端服务依赖
- Feign：声明式HTTP客户端，简化远程调用。
- Spring Cloud：服务发现与配置中心集成。
- 数据库依赖
- 工作流数据库：包含流程日志、审批日志、节点配置、用户与角色等表。
图表来源
- index.vue:104-123
- FlowClient.java:22-62
- SyncFlowUserJob.java:37-54
- FlowUserRoleServiceImpl.java:31-59
- workflow.sql:1-564
章节来源
- index.vue:104-123
- FlowClient.java:22-62
- SyncFlowUserJob.java:37-54
- FlowUserRoleServiceImpl.java:31-59
- workflow.sql:1-564
性能考虑
- 前端性能
- 使用自适应缩放与工具栏样式优化，减少DOM渲染压力。
- 导出XML/SVG采用异步保存，避免阻塞主线程。
- 后端性能
- Feign客户端合理配置超时与重试策略，降低网络抖动影响。
- 工作流日志与审批日志采用索引优化，提升查询性能。
- 数据同步
- 批量插入用户与角色数据，减少事务开销与数据库往返次数。
章节来源
故障排查指南
- 流程导入失败
- 检查XML格式是否正确，确认CDATA区域被正确转义。
- 查看控制台错误信息，定位导入异常原因。
- 任务无法分配
- 确认用户与角色已同步至工作流用户库。
- 检查任务节点的指派人、候选人、候选组配置是否正确。
- 审批节点不可见
- 确认业务类型与流程实例ID正确，检查节点查询接口返回。
- 日志缺失
- 检查工作流日志与审批日志表是否存在对应记录，确认数据库连接与权限。
章节来源
- index.vue:154-168
- SyncFlowUserJob.java:37-54
- FlowClient.java:50-61
- workflow.sql:1-71
- workflow.sql:198-274
结论
DeviceMate工作流系统通过前端bpmn-js与Flowable扩展实现了可视化的流程设计与配置，后端通过Feign客户端提供统一的流程操作接口，并借助定时作业保障用户与角色数据的一致性。配合完善的日志与审批记录，系统能够满足复杂业务场景下的流程编排、执行与监控需求。建议在实际使用中遵循表单Key规范、任务分配策略与监听器扩展的最佳实践，持续优化性能与稳定性。
附录
- 数据库DDL
- 包含工作流日志、审批日志、节点配置、用户与角色等核心表结构，支撑流程运行与审计。
- 回退配置
- 回退配置表支持按流程图Key与当前节点ID配置回退目标节点，配合回退信息DTO实现回退流程。
章节来源