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

最近把一个 BPM 流程引擎项目单独整理成了开源版，项目名叫 **Open BPM Flow Engine**。它的定位比较明确：给 Java 后端、全栈工程师、技术负责人一个可以本地跑起来、能看懂核心链路、能二次开发接业务系统的 Flowable 工作流示例。

项目地址：

复制代码

https://gitee.com/luotianding/open-project

项目目录：

复制代码

open-project/bpm-project

建议第一次打开仓库时，按这个顺序看：

|----|-----------------------------------------------------|--------------------------|
| 顺序 | 文件 | 作用 |
| 1 | `bpm-project/README.md` | 看项目定位、启动方式和页面入口 |
| 2 | `bpm-project/docs/minimal-demo-flow.md` | 跑通请假审批最小闭环 |
| 3 | `bpm-project/docs/secondary-development-guide.md` | 学会把请假 Demo 改成采购、合同、报销等业务 |
| 4 | `bpm-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.png

4. 发起流程入口怎么做

前端运行入口在：

复制代码

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 BpmBizInvoke<DemoLeaveApply> {



    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

建议配置的流程：

复制代码

开始 -> 填写请假申请 -> 主管审批 -> 结束

关联业务配置：

|--------|-------------------------------------------------------|
| 配置项 | 示例值 |
| 流程 Key | `demo_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.png

7. 本地启动

初始化数据库：

复制代码

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:8080

8. 适合怎么二次开发

这个项目适合做下面几类扩展：

把请假 Demo 改成实际业务单，例如合同、采购、报销、工单。
增加组织、岗位、人员同步接口。
增加流程轨迹图和审批意见组件。
增加统一消息通知，例如站内信、邮件、飞书、企业微信。
提供 Docker Compose 一键启动环境。
升级 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` |
| 查看模式 | 有 `readOnly=1` 或 `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.vue` |

9. 总结

工作流项目最难的不是"画流程图"，而是把流程图、业务表单、待办中心、流程状态和业务状态连接成一个可维护的闭环。

Open BPM Flow Engine 目前的定位就是提供这个闭环的最小工程骨架。它不包装成万能低代码平台，也不声称适配所有业务场景；它更适合开发者拿来学习 Flowable 落地方式，或者作为企业审批系统、OA 审批流、表单流转系统的二次开发起点。

项目地址：

复制代码

https://gitee.com/luotianding/open-project

如果你正在找 Flowable 工作流、BPM 流程引擎、Vue 流程设计器、Spring Boot 审批流项目，可以先看这个开源版本。