devbox
码创造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：码创造者 | 2024-08-04 08:33:14

赞

踩

若依工作流

目录

一、前端迁移流程

1. flowale功能页面相关内容迁移

2. flowale流程设计器相关内容迁移

3. 表单设计器与人员选择模块相关文件迁移

4. 流程表达式、流程监听器相关内容迁移

5. main.js中引入组件

6. package.json中新增依赖

7. 新增路由配置

8. 启动项目

二、后端迁移流程

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

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

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

4. 迁移flowable相关类

5. 在admin项目的yml配置文件中新增如下配置

6. 迁移数据库表

7. 数据迁移

8. 启动项目

此教程适合若依前后端分离项目，其他项目可以在扩展列表中进行查找。

近期公司里需要对很久以前的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
  4.  
  5.   // null, undefined, non-object, function
  6.   if (!obj || typeof obj !== 'object') {
  7.     return obj
  8.   }
  9.  
  10.   // DOM Node
  11.   if (obj.nodeType && 'cloneNode' in obj) {
  12.     return obj.cloneNode(true)
  13.   }
  14.  
  15.   // Date
  16.   if (_toString.call(obj) === '[object Date]') {
  17.     return new Date(obj.getTime())
  18.   }
  19.  
  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') }
  26.  
  27.     return new RegExp(obj.source, flags.join(''))
  28.   }
  29.  
  30.   const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}
  31.  
  32.   for (const key in obj) {
  33.     result[key] = deepClone(obj[key])
  34.   }
  35.  
  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下载完毕后启动项目即可。

由于加入了流程校验器，迁移项目后启动错误请执行以下命令

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>
  33.  
  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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/926962
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号