springboot 整合 activiti 搭配 vue3 element-plus activiti-modeler bpmn-js

夏目 / 2025-02-21 / 原文

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

  • 仓库地址:https://gitee.com/cmmplb/spring-boot-activiti

  • 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