springboot 整合 activiti 搭配 vue3 element-plus activiti-modeler bpmn-js
配合使用 Element Plus + Vue3（idea开发，需要安装lombok插件）
相关依赖版本
后台：
| 依赖 | 版本 |
|---|---|
| spring-boot | 2.7.18 |
| knife4j-spring-boot-starter | 3.0.3 |
| pagehelper-spring-boot-starter | 1.3.0 |
| mybatis-plus-boot-starter | 3.4.3.1 |
| activiti | 7.1.0.M6 |
| mapstruct | 1.5.2.Final |
其他版本查看 pom 中配置的 properties
前端：
| 依赖 | 版本 |
|---|---|
| vue | 3.5.10 |
| typescript | 5.5.3 |
| element-plus | 2.8.6 |
| sass | 1.80.4 |
| sass-loader | 16.0.2 |
| activiti-modeler | 5.22.0 |
| bpmn-js | 17.11.1 |
| bpmn-js-properties-panel | 5.25.0 |
| diagram-js-minimap | 5.1.0 |
其他版本查看 package.json
-
doc 目录下写了项目模块搭建过程以及 activiti 每个功能的实现步骤
-
doc/db/v7.1.0.M6.sql 脚本是 activiti 初始化时自动生成的相关表，这里加上了各个表的字段注释，可以执行一遍脚本刷一下表注释（初始化生成的表名是大写的，脚本里面的是小写的）。
-
tag/2.5.3 分支是之前学习 activiti 的时候敲的，基于 springboot 2.5.3 + thymeleaf 快速集成，配合使用 Element-UI + Vue。
项目结构
spring-boot-activiti
├── doc 文档目录
├── src 后端模块 [20000]
├── web 前端模块 [30000]
└── pom.xml 工程依赖
防止每个功能代码迭代替换了前面步骤的代码，所以每个功能模块的代码都放在了单独的分支上，按照doc目录下的序号打的分支，跟着学习的话可以按着顺序切换分支查看。
feature
├── 1.x 模块搭建
├────── 后端模块
├────── 前端模块
├── 2.x 基础
├────── 流程模型
├────── 部署流程
├────── 启动流程
├────── 处理任务
├── 3.1 项目起步
├── 3.2 模型管理
├── 3.3 前端布局
├── 3.4 模型管理-前端实现
├── 3.5 整合activiti-modeler+bpmn-js
feature/latest version todo：
- vue3 整合 activiti-modeler ✅
- vue3 整合 bpmn-js ✅
- 首页数据统计 ❌
- 流程管理
- 模型管理 ✅
- 部署管理 ❌
- 事项申请
- 发起申请 ❌
- 申请历史 ❌
- 办理事项
- 代办任务 ❌
- 已办任务 ❌
- Spring Security 5.7+ 权限配置 ❌
- 用户、用户组、租户 ❌
tag/2.5.3：
- vue2 整合 activiti-modeler ✅
- vue2 整合 bpmn-js ✅
- 首页数据统计 ✅
- 流程管理
- 模型管理 ✅
- 部署管理 ✅
- 事项申请
- 发起申请 ✅
- 申请历史 ✅
- 办理事项
- 代办任务 ✅
- 已办任务 ✅
tag/2.5.3 相关功能：
Activiti Modeler 查看流程进度 ：
Bpmn-Js 查看流程进度：
学习参考的源码仓库:
https://gitee.com/leafseelight/Spring-activiti
https://gitee.com/shenzhanwang/RuoYi-activiti
标签：springboot,bpmn,spring,activiti,boot,js,modeler From： https://www.cnblogs.com/cmmplb/p/18517120