若依(RuoYi-Vue)+Flowable工作流前后端整合教程

此教程得当若依前后端分离项目，其他项目可以在扩展列表中举行查找。
近期公司里必要对很久以前的RuoYi-Vue前后端分离项目扩展出flowable的功能，当然这个重任也是落在了我的身上（否则也不会有这篇文章），然后我在官网看到了RuoYi-Vue-Flowable这个项目，按照文档提供的迁徙方式对于我们这个老版本的项目来说无法正常运行，以是我联系了作者并更新了一下文档，计划在网上在发布一篇（毕竟有的人懒得看官方文档）。
官方项目地址：https://gitee.com/tony2y/RuoYi-flowable
把项目拉到本地后下面开始整合教程，整合教程分为前端和后端两个模块。
前端迁徙流程

1.flowale功能页面干系内容迁徙

1.1 把目次ruoyi-ui/src/views/下的flowable文件夹移动到你自己前端项目中的/src/views/文件下。
​
1.2 移动页面配套的js文件，将ruoyi-ui/src/api/下的flowable文件夹移动到自己项目中的/src/api/文件下。
​
2.flowale流程计划器干系内容迁徙

将ruoyi-ui/src/components目次下的customBpmn，flow，parser，Process，render，tinymce文件夹移动到自己项目中的/src/components文件下。
​
3.表单计划器与职员选择模块干系文件迁徙

3.1 将ruoyi-ui/src/views/tool中的build文件夹移动到自己项目中的/src/views/tool文件下，存在则覆盖。
​
3.2 迁徙表单计划器干系样式，将ruoyi-ui/src下的styles文件移动到自己项目中的/src文件夹下。
​
3.3 修改ruoyi-ui/src/utils/index.js中的deepClone函数。
​
修改为如下内容，存在该函数做修改，不存在做新增。
  

1. // 深拷贝对象
2. export function deepClone(obj) {
3.   const _toString = Object.prototype.toString
5.   // null, undefined, non-object, function
6.   if (!obj || typeof obj !== 'object') {
7.     return obj
8.   }
10.   // DOM Node
11.   if (obj.nodeType && 'cloneNode' in obj) {
12.     return obj.cloneNode(true)
13.   }
15.   // Date
16.   if (_toString.call(obj) === '[object Date]') {
17.     return new Date(obj.getTime())
18.   }
20.   // RegExp
21.   if (_toString.call(obj) === '[object RegExp]') {
22.     const flags = []
23.     if (obj.global) { flags.push('g') }
24.     if (obj.multiline) { flags.push('m') }
25.     if (obj.ignoreCase) { flags.push('i') }
27.     return new RegExp(obj.source, flags.join(''))
28.   }
30.   const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}
32.   for (const key in obj) {
33.     result[key] = deepClone(obj[key])
34.   }
36.   return result
37. }

复制代码

3.4 迁徙或更换干系js文件，存在则更换，不存在则新增，将ruoyi-ui/src/utils/generator，ruoyi-ui/src/utils文件夹中对应下图红框的js文件移动到自己项目中对应的文件夹中。
​
3.5 迁徙表单计划器干系图标，将ruoyi-ui/src下的icons文件移动到自己项目中的/src文件夹下。​

4. 流程表达式、流程监听器干系内容迁徙

4.1 干系页面迁徙，将ruoyi-ui/src/views/system下的expression，listener文件夹移动到自己项目中的/src/views/system文件夹下。

4.2 干系js文件迁徙，将ruoyi-ui/src/api/system下的expression.js，listener.js文件移动到自己项目中的/src/api/system文件夹下。

5. main.js中引入组件


main.js中连合上图添加如下代码。

1. import Tinymce from '@/components/tinymce/index.vue'
2.   
3. Vue.component('tinymce', Tinymce)

复制代码

6. package.json中新增依赖


package.json中连合上图添加如下依赖。

1. "bpmn-js": "^11.1.0",
2. "diagram-js": "^11.4.1",
3. "xcrud": "^0.4.19",
4. "vkbeautify": "^0.99.3",

复制代码

7. 新增路由配置

在ruoyi-ui/src/router/index.js文件中添加路由配置，差异的ruoyi版本路由写法不同等，请参照自己项目路由举行添加。
参考如下：

1.   {
2.     path: '/flowable',
3.     component: Layout,
4.     hidden: true,
5.     children: [
6.       {
7.         path: 'definition/model/',
8.         component: () => import('@/views/flowable/definition/model'),
9.         name: 'Model',
10.         meta: { title: '流程设计', icon: '' }
11.       }
12.     ]
13.   },
14.   {
15.     path: '/flowable',
16.     component: Layout,
17.     hidden: true,
18.     children: [
19.       {
20.         path: 'task/finished/detail/index',
21.         component: () => import('@/views/flowable/task/finished/detail/index'),
22.         name: 'FinishedRecord',
23.         meta: { title: '流程详情', icon: '' }
24.       }
25.     ]
26.   },
27.   {
28.     path: '/flowable',
29.     component: Layout,
30.     hidden: true,
31.     children: [
32.       {
33.         path: 'task/myProcess/detail/index',
34.         component: () => import('@/views/flowable/task/myProcess/detail/index'),
35.         name: 'MyProcessRecord',
36.         meta: { title: '流程详情', icon: '' }
37.       }
38.     ]
39.   },
40.   {
41.     path: '/flowable',
42.     component: Layout,
43.     hidden: true,
44.     children: [
45.       {
46.         path: 'task/myProcess/send/index',
47.         component: () => import('@/views/flowable/task/myProcess/send/index'),
48.         name: 'SendRecord',
49.         meta: { title: '流程发起', icon: '' }
50.       }
51.     ]
52.   },
53.   {
54.     path: '/flowable',
55.     component: Layout,
56.     hidden: true,
57.     children: [
58.       {
59.         path: 'task/todo/detail/index',
60.         component: () => import('@/views/flowable/task/todo/detail/index'),
61.         name: 'TodoRecord',
62.         meta: { title: '流程处理', icon: '' }
63.       }
64.     ]
65.   },
66.   {
67.     path: '/tool',
68.     component: Layout,
69.     hidden: true,
70.     children: [
71.       {
72.         path: 'build/index',
73.         component: () => import('@/views/tool/build/index'),
74.         name: 'FormBuild',
75.         meta: { title: '表单配置', icon: '' }
76.       }
77.     ]
78.   }

复制代码

8. 启动项目

删除node_modules文件夹，控制台实行npm install下载完毕后启动项目即可。
由于参加了流程校验器，迁徙项目后启动错误请实行以下下令

1. npm install create-bpmnlint-plugin -D

复制代码

后端迁徙流程

1. 在父级pom文件中参加如下依赖

1. <!-- properties -->
2. <properties>
3.   <flowable.version>6.7.2</flowable.version>
4. </properties>
5. <!-- dependency -->
6. <dependency>
7.   <groupId>com.ruoyi</groupId>
8.   <artifactId>ruoyi-flowable</artifactId>
9.   <version>${ruoyi.version}</version>
10. </dependency>
11. <dependency>
12.   <groupId>io.swagger</groupId>
13.   <artifactId>swagger-annotations</artifactId>
14.   <version>1.5.21</version>
15.   <scope>compile</scope>
16. </dependency>
17. <dependency>
18.     <groupId>org.flowable</groupId>
19.     <artifactId>flowable-spring-boot-starter</artifactId>
20.     <version>${flowable.version}</version>
21. </dependency>
22. <dependency>
23.   <groupId>com.baomidou</groupId>
24.   <artifactId>mybatis-plus-boot-starter</artifactId>
25.   <version>3.4.0</version>
26. </dependency>
27. <!--el表达式计算-->
28. <dependency>
29.   <groupId>com.googlecode.aviator</groupId>
30.   <artifactId>aviator</artifactId>
31.   <version>5.3.3</version>
32. </dependency>
34. <!--modules -->
35. <modules>
36.     <module>ruoyi-flowable</module>
37. </modules>

复制代码

2. 把RuoYi-flowable项目中的ruoyi-flowable文件夹整个迁徙到自己项目中


3. 在admin项目标pom文件中引入ruoyi-flowable项目

1. <dependency>
2.     <groupId>com.ruoyi</groupId>
3.     <artifactId>ruoyi-flowable</artifactId>
4. </dependency>

复制代码

4. 迁徙flowable干系类

根据若依项目标版本差异，缺少的实体类，mapper，service也会有所差异，以是必要根据flowable项目中所提示缺少的类举行针对性的拷贝，假如为service接口记得补全对应的controller。
5. 在admin项目标yml配置文件中新增如下配置

application.yml文件中添加如下配置

1. # flowable相关表
2. flowable:
3.   # true 会对数据库中所有表进行更新操作。如果表不存在，则自动创建(建议开发时使用)
4.   database-schema-update: false
5.   # 关闭定时任务JOB
6.   async-executor-activate: false

复制代码

数据源地址后必要加上nullCatalogMeansCurrent=true，包管自动创建flowable表时不会报错。
6. 迁徙数据库表

新建一个库实行tony-flowable.sql文件，flowable项目中少什么表就将对应的表导入到自己的数据库中，mysql数据库版本要用5.7。

7. 数据迁徙

将sys_menu对应下图红框中的菜单数据参加到自己的表中。

 将sys_dict_type对应下图红框中的字典类型数据添加到自己的表中。

 将sys_dict_data对应下图红框中的字典数据添加到自己的表中。

8. 启动项目

第一次启动时必要把yml配置文件中的database-schema-update设置为true，如许会自动创建flowable中所必要的全部表。
完成上述操作后就可以在自己项目中正常利用了。 


来源：https://blog.csdn.net/TangBoBoa/article/details/129481865
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！