我把一套 Flowable + Spring Boot + Vue 的 BPM 流程引擎整理开源了：从流程设计器到待办闭环

最近把一个 BPM 流程引擎项目单独整理成了开源版项目名叫 **Open BPM Flow Engine**。它的定位比较明确给 Java 后端、全栈工程师、技术负责人一个可以本地跑起来、能看懂核心链路、能二次开发接业务系统的 Flowable 工作流示例。项目地址https://gitee.com/luotianding/open-project项目目录open-project/bpm-project建议第一次打开仓库时按这个顺序看顺序文件作用1bpm-project/README.md看项目定位、启动方式和页面入口2bpm-project/docs/minimal-demo-flow.md跑通请假审批最小闭环3bpm-project/docs/secondary-development-guide.md学会把请假 Demo 改成采购、合同、报销等业务4bpm-project/docs/api-and-code-map.md查接口清单、关键类位置和新增接口方式很多开源流程项目只给流程设计器或者只给后端接口真正接业务时还要自己补发起页、待办页、申请记录、业务表单和回调逻辑。这个项目这次整理时重点补了运行入口所以它更像一个最小可用的流程引擎骨架。1. 技术栈后端Java 8 Spring Boot Flowable MyBatis Plus MySQL前端Vue 2.6 Vue Router Element UI Axios floweditor数据库MySQL 5.7整体并没有追求最新版本而是保留了一套比较典型的企业项目技术组合。好处是很多老系统、OA、ERP、CRM、SaaS 后台都能看懂也容易接入。2. 工程目录核心目录如下bpm-project bpm-service 后端流程引擎服务 bpm-portal 前端流程控制台 docs 开源说明文档和截图bpm-service 负责流程定义、实例、任务、按钮权限、角色授权、业务回调等能力。bpm-portal 负责流程设计器、流程配置、流程发起、待办办理和申请记录等页面。docs 放了图文说明、最小请假流程、质量报告和脱敏记录。3. 不只是流程设计器流程引擎最容易被低估的地方是大家以为“能画 BPMN 图”就够了。实际业务落地时至少还需要这些入口页面作用流程设计器画 BPMN、保存流程定义流程定义管理发布流程、查看版本流程属性配置配表单、处理人、按钮、条件、脚本发起流程选择已发布流程进入业务表单我的待办当前用户处理任务我的申请查看我发起的流程状态任务池处理组任务领取我的抄送查看抄送或转阅流程监控管理员看实例和任务明细正文配图建议插入bpm-project/docs/assets/screenshots/03-process-configuration.png4. 发起流程入口怎么做前端运行入口在bpm-portal/src/pages/runtime/StartProcess.vue发起流程的关键逻辑不是直接写死表单地址而是先查已发布流程再查流程关联业务配置。核心流程查询 /bpm/definition/list - 过滤已发布、未锁定流程 - 根据 actDefId 查询 /bpm/refBiz/list - 读取表单路由 roleType - 跳转业务表单代码里对应逻辑是this.$axios.get(/bpm/definition/list, { params: { current: this.page.current, size: this.page.size, staticConditions: [ { column: status, exp: , value: 1 }, { column: lockedStatus, exp: , value: 0 } ] } })加载发起表单配置this.$axios.get(/bpm/refBiz/list, { params: { current: 1, size: 10, actDefId: row.actDefId } })这个设计的好处是流程引擎不关心业务表单长什么样业务系统只要把表单路由配置进去就可以从统一发起入口进入。5. 业务回调怎么接开源版提供了一个请假申请 Demo回调类是cn.icepanda.bpm.demo.service.DemoLeaveFlowService关键代码Service public class DemoLeaveFlowService implements BpmBizInvokeDemoLeaveApply { private final IDemoLeaveApplyService leaveApplyService; Autowired public DemoLeaveFlowService(IDemoLeaveApplyService leaveApplyService) { this.leaveApplyService leaveApplyService; } public BpmResult before(FlowContext context, DemoLeaveApply apply) { if (apply null) { return BpmResult.failure(请假申请数据不能为空); } if (apply.getDays() null || apply.getDays() 0) { return BpmResult.failure(请假天数必须大于 0); } return BpmResult.success(); } public BpmResult after(FlowContext context, DemoLeaveApply apply) { return BpmResult.success(leaveApplyService.syncByFlowCallback(context, apply)); } }这里有一个比较重要的边界**回调类只处理业务数据校验和业务状态同步不负责推进流程。**流程推进仍然由 BPM 引擎负责。这样做可以避免业务代码和流程引擎互相缠在一起。6. 请假 Demo 的闭环开源版提供了一个最小业务表单bpm-portal/src/pages/demo/LeaveForm.vue访问路径http://localhost:8080/#/demo/leave-form建议配置的流程开始 - 填写请假申请 - 主管审批 - 结束关联业务配置配置项示例值流程 Keydemo_leave_process流程名称演示请假审批流程发起表单地址/demo/leave-form默认回调类cn.icepanda.bpm.demo.service.DemoLeaveFlowService这个 Demo 的价值不在“请假”本身而是提供了一个接入范式。你可以把请假单换成采购单、合同审批单、报销单、工单只要保持业务表单和回调类的边界清晰就能复用流程引擎能力。正文配图建议插入bpm-project/docs/assets/screenshots/05-demo-leave-form.png bpm-project/docs/assets/screenshots/06-runtime-my-task.png7. 本地启动初始化数据库CREATE DATABASE open_bpm_flow DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;导入脚本bpm-service/sql/初始化脚本_bpm_flow.sql后端cd bpm-service mvn clean package -DskipTests前端cd bpm-portal npm install npm run serve默认访问http://localhost:80808. 适合怎么二次开发这个项目适合做下面几类扩展1. 把请假 Demo 改成实际业务单例如合同、采购、报销、工单。2. 增加组织、岗位、人员同步接口。3. 增加流程轨迹图和审批意见组件。4. 增加统一消息通知例如站内信、邮件、飞书、企业微信。5. 提供 Docker Compose 一键启动环境。6. 升级 Spring Boot、Flowable 和前端依赖版本。更实际一点如果你要把请假 Demo 改成“采购审批”可以按下面路径做第一步新增采购业务表 purchase_apply 第二步复制 DemoLeaveApply 改成 PurchaseApply 第三步复制 DemoLeaveApplyController 改成 PurchaseApplyController 第四步复制 DemoLeaveApplyServiceImpl 改成 PurchaseApplyServiceImpl 第五步复制 DemoLeaveFlowService 改成 PurchaseFlowService 第六步复制 LeaveForm.vue 改成 PurchaseForm.vue 第七步新增前端路由 /demo/purchase-form 第八步画采购审批流程图并发布 第九步在流程关联业务中配置表单地址和回调类 第十步从 /runtime/start 发起再到 /runtime/myTask 办理业务表建议保留这些流程关联字段BIZ_STATUS 业务状态 ACT_DEF_ID 流程定义ID ACT_DEF_KEY 流程定义Key ACT_INST_ID 流程实例ID PRO_RUN_ID BPM运行主表ID CURRENT_NODE_NAME 当前环节采购业务自己的字段可以放在同一张表里PURCHASE_AMOUNT 采购金额 SUPPLIER_NAME 供应商名称 PURCHASE_REASON 采购原因 APPROVE_COMMENT 审批意见后端最小接口建议保留 5 个接口用途saveDraft只保存业务草稿prepareSubmit发起流程前先保存业务单get根据业务主键查看详情taskContext根据待办任务 ID 找到业务单list做业务列表或申请记录前端表单要支持三种模式模式URL 特征行为发起模式有 actDefId没有 taskUserId填业务数据调用业务保存接口再调用 /bpm/pro/startFlow办理模式有 taskUserId加载待办上下文填写审批意见调用 /bpm/pro/run查看模式有 readOnly1 或 dataId只读查看业务单和流程状态这套规则掌握后采购、合同、报销、工单的接法都类似。真正要变化的是业务表字段、表单字段、节点处理人规则和回调里的业务状态同步。完整二次开发文档见bpm-project/docs/secondary-development-guide.md接口清单和关键代码位置见bpm-project/docs/api-and-code-map.md如果只想先改一个采购审批建议重点看这些文件要改的内容参考文件业务表字段bpm-service/ls-module-bpm/src/main/java/cn/icepanda/bpm/demo/entity/DemoLeaveApply.java后端接口bpm-service/ls-module-bpm/src/main/java/cn/icepanda/bpm/demo/controller/DemoLeaveApplyController.java业务服务bpm-service/ls-module-bpm/src/main/java/cn/icepanda/bpm/demo/service/impl/DemoLeaveApplyServiceImpl.java流程回调bpm-service/ls-module-bpm/src/main/java/cn/icepanda/bpm/demo/service/DemoLeaveFlowService.java前端表单bpm-portal/src/pages/demo/LeaveForm.vue发起入口bpm-portal/src/pages/runtime/StartProcess.vue我的待办bpm-portal/src/pages/runtime/MyTask.vue我的申请bpm-portal/src/pages/runtime/MyApply.vue9. 总结工作流项目最难的不是“画流程图”而是把流程图、业务表单、待办中心、流程状态和业务状态连接成一个可维护的闭环。Open BPM Flow Engine 目前的定位就是提供这个闭环的最小工程骨架。它不包装成万能低代码平台也不声称适配所有业务场景它更适合开发者拿来学习 Flowable 落地方式或者作为企业审批系统、OA 审批流、表单流转系统的二次开发起点。项目地址https://gitee.com/luotianding/open-project如果你正在找 Flowable 工作流、BPM 流程引擎、Vue 流程设计器、Spring Boot 审批流项目可以先看这个开源版本。