ruoyi-cloud若依微服务框架如何集成flowable工作流
前文介绍
若依微服务的框架本身并不包含工作流模块，而我们在项目实战中，经常会需要用到工作流审批流。如何在若依框架中集成一个工作流就成了必须。本文就是介绍如何解决这个问题。本文后端用的是ruoyi-cloud，前端使用的是若依微服务-vue3版本。
技术栈
本项目使用以下技术栈构建：
- 前端: Vue 3, Element Plus, Vite , js ,ps:如果你前端用的是ruoyi-vue3版本，那直接拷贝使用
- 后端: 若依微服务，直接把模块复制进modules启动即可
安装指南
以下是安装和配置项目的步骤：
1、先克隆拉取若依RuoYi-Cloud代码到本地：
#若依微服务
git clone https://gitee.com/y_project/RuoYi-Cloud.git
#若依微服务前端VUE3版本
git clone https://gitcode.com/yangzongzhuan/RuoYi-Cloud-Vue3.git
#本仓库-若依微服务-工作流中心
git clone https://gitee.com/bdn007/ruoyi-cloud-module-flowable.git
拉取到本地的目录如下：
这里有个关键一步是先要把ruoyi-cloud项目的后端和前端运行起来，本文这里不在详述，大家可以到若依官网查询文档对照做即可。如果小伙伴需要，可以微信我：Jasonwcy123。
2、将本ruoyi-flowable直接拷贝进若依微服务的ruoyi-modules目录。
这里需要把ruoyi-cloud-module-flowable目录下的ruoyi-flowable目录下全部文件和目录拷贝到rui-cloud项目的ruoyi-modules目录下。
3、在RuoYi-Cloud/ruoyi-modules/pom.xml 里添加 ruoyi-flowable
<modules>
<module>ruoyi-system</module>
<module>ruoyi-gen</module>
<module>ruoyi-job</module>
<module>ruoyi-file</module>
<!--这是新增的模块-->
<module>ruoyi-flowable</module>
</modules>
4、根据若依微服务官网进行nacos配置，然后执行nacos配置.sql配置好工作流模块的配置,最后在网关配置新增以下：
(1)routes配置
...
# 工作流中心
- id: ruoyi-flowable
uri: lb://ruoyi-flowable
predicates:
- Path=/flowable/**
filters:
- StripPrefix=1
(2)防止XSS攻击配置
...
xss:
enabled: true
excludeUrls:
- /system/notice
# 这个是新加的，不然保存流程的时候会被拦截
- /flowable/model/save
5、ruoyi-api新增几个接口，自己实现即可，就是简单的查查用户、角色。
6、执行工作流模块flowable相关表.sql、工作流中心菜单.sql、nacos配置.sql
7、在若依微服务的vue3版前端工程install以下几个依赖
npm install bpmn-js@^8.10.0
npm install bpmn-js-task-resize@^1.2.0
npm install bpmn-js-token-simulation@^0.10.0
npm install codemirror-editor-vue3@^2.8.0
npm install diagram-js@^15.2.4
npm install diagram-js-minimap@^5.2.0
npm install screenfull@^6.0.2
npm install vue-i18n@^11.0.1
npm install x2js@^3.4.4
npm install vform3-builds@^3.0.10
8、在若依微服务的vue3版前端工程编辑以下代码
(1)src/main.js:引入表单设计器
...
// 表单设计器
import VForm3 from 'vform3-builds' //引入VForm 3库
import 'vform3-builds/dist/designer.style.css' //引入VForm3样式
// 全局组件挂载
...
app.use(VForm3)
(2)src/router/index.js:新增发起流程、流程详情的动态路由
...
// 动态路由，基于用户权限动态去加载
export const dynamicRoutes = [
...
{
path: '/workflow/process',
component: Layout,
hidden: true,
permissions: ['workflow:process:query'],
children: [
{
path: 'start/:deployId([\\w|\\-]+)',
component: () => import('@/views/workflow/work/start.vue'),
name: 'WorkStart',
meta: { title: '发起流程', activeMenu: '/workflow/process', icon: '' }
},
{
path: 'detail/:procInsId([\\w|\\-]+)',
component: () => import('@/views/workflow/work/detail.vue'),
name: 'WorkDetail',
meta: { title: '流程详情', activeMenu: '/work/own', icon: '' }
}
]
}
...
]
(3)vite.config.js:新增预编译配置
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd())
const { VITE_APP_ENV } = env
return {
...
// 预编译
optimizeDeps: {
include: [
'vue',
'vue-router',
'pinia',
'axios',
'@vueuse/core',
'echarts',
'vue-i18n',
'@vueup/vue-quill'
]
}
...
}
9、拷贝本前端工程RuoYI-Cloud-Vue3的代码到若依微服务的vue3版前端工程( 注意：备份好自己的代码！！！以免被覆盖 )
10、新增数据字典
#字典类型
insert into sys_dict_type values(500, '流程状态', 'wf_process_status', '0', 'admin', sysdate(), '', null, '工作流程状态');
#字典值
insert into sys_dict_data values(501, 1, '进行中', 'running', 'wf_process_status', '', 'primary', 'N', '0', 'admin', sysdate(), '', null, '进行中状态');
insert into sys_dict_data values(502, 2, '已终止', 'terminated', 'wf_process_status', '', 'danger', 'N', '0', 'admin', sysdate(), '', null, '已终止状态');
insert into sys_dict_data values(503, 3, '已完成', 'completed', 'wf_process_status', '', 'success', 'N', '0', 'admin', sysdate(), '', null, '已完成状态');
insert into sys_dict_data values(504, 4, '已取消', 'canceled', 'wf_process_status', '', 'warning', 'N', '0', 'admin', sysdate(), '', null, '已取消状态');
11、启动你的项目后端和前端即可。
经过以上步骤，成功运行项目。可以新建流程、表单、发布流程，发起工作流任务，进行审批操作了。实测可行。
备注：本文使用的是flowable的版本是6.8.0.0
如果过程中，你遇到了什么问题，可以加我微信：Jasonwcy123
全部评论