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

ruoyi-cloud若依微服务框架如何集成flowable工作流

前文介绍

技术栈

安装指南

评论 (0)