随笔 - 17,  文章 - 0,  评论 - 4,  阅读 - 44011

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

posted on   夏目co  阅读(201)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗
历史上的今天:
2019-10-31 idea格式化代码把方法上的文字注释换行的问题

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示