此教程適合若依前后端分離項目，其他項目可以在擴展列表中進行查找。

近期公司里需要對很久以前的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函數。

修改為如下內容，存在該函數做修改，不存在做新增。

// 深拷貝對象
export function deepClone(obj) {const _toString = Object.prototype.toString// null, undefined, non-object, functionif (!obj || typeof obj !== 'object') {return obj}// DOM Nodeif (obj.nodeType && 'cloneNode' in obj) {return obj.cloneNode(true)}// Dateif (_toString.call(obj) === '[object Date]') {return new Date(obj.getTime())}// RegExpif (_toString.call(obj) === '[object RegExp]') {const flags = []if (obj.global) { flags.push('g') }if (obj.multiline) { flags.push('m') }if (obj.ignoreCase) { flags.push('i') }return new RegExp(obj.source, flags.join(''))}const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}for (const key in obj) {result[key] = deepClone(obj[key])}return result
}

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中結合上圖添加如下代碼。

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

6.package.json中新增依賴

package.json中結合上圖添加如下依賴。

"bpmn-js": "^11.1.0",
"diagram-js": "^11.4.1",
"xcrud": "^0.4.19",
"vkbeautify": "^0.99.3",

7. 新增路由配置

在ruoyi-ui/src/router/index.js文件中添加路由配置，不同的ruoyi版本路由寫法不一致，請參照自己項目路由進行添加。

參考如下：

  {path: '/flowable',component: Layout,hidden: true,children: [{path: 'definition/model/',component: () => import('@/views/flowable/definition/model'),name: 'Model',meta: { title: '流程設計', icon: '' }}]},{path: '/flowable',component: Layout,hidden: true,children: [{path: 'task/finished/detail/index',component: () => import('@/views/flowable/task/finished/detail/index'),name: 'FinishedRecord',meta: { title: '流程詳情', icon: '' }}]},{path: '/flowable',component: Layout,hidden: true,children: [{path: 'task/myProcess/detail/index',component: () => import('@/views/flowable/task/myProcess/detail/index'),name: 'MyProcessRecord',meta: { title: '流程詳情', icon: '' }}]},{path: '/flowable',component: Layout,hidden: true,children: [{path: 'task/myProcess/send/index',component: () => import('@/views/flowable/task/myProcess/send/index'),name: 'SendRecord',meta: { title: '流程發起', icon: '' }}]},{path: '/flowable',component: Layout,hidden: true,children: [{path: 'task/todo/detail/index',component: () => import('@/views/flowable/task/todo/detail/index'),name: 'TodoRecord',meta: { title: '流程處理', icon: '' }}]},{path: '/tool',component: Layout,hidden: true,children: [{path: 'build/index',component: () => import('@/views/tool/build/index'),name: 'FormBuild',meta: { title: '表單配置', icon: '' }}]}

8. 啟動項目

刪除node_modules文件夾，控制臺執行npm install下載完畢后啟動項目即可。

由于加入了流程校驗器，遷移項目后啟動錯誤請執行以下命令

npm install create-bpmnlint-plugin -D

后端遷移流程

1. 在父級pom文件中加入如下依賴

<!-- properties -->
<properties><flowable.version>6.7.2</flowable.version>
</properties>
<!-- dependency -->
<dependency><groupId>com.ruoyi</groupId><artifactId>ruoyi-flowable</artifactId><version>${ruoyi.version}</version>
</dependency>
<dependency><groupId>io.swagger</groupId><artifactId>swagger-annotations</artifactId><version>1.5.21</version><scope>compile</scope>
</dependency>
<dependency><groupId>org.flowable</groupId><artifactId>flowable-spring-boot-starter</artifactId><version>${flowable.version}</version>
</dependency>
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.0</version>
</dependency>
<!--el表達式計算-->
<dependency><groupId>com.googlecode.aviator</groupId><artifactId>aviator</artifactId><version>5.3.3</version>
</dependency><!--modules --><modules><module>ruoyi-flowable</module>
</modules>

2. 把RuoYi-flowable項目中的ruoyi-flowable文件夾整個遷移到自己項目中

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

<dependency><groupId>com.ruoyi</groupId><artifactId>ruoyi-flowable</artifactId>
</dependency>

4. 遷移flowable相關類

根據若依項目的版本不同，缺少的實體類，mapper，service也會有所不同，所以需要根據flowable項目中所提示缺少的類進行針對性的拷貝，如果為service接口記得補全對應的controller。

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

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

# flowable相關表
flowable:# true 會對數據庫中所有表進行更新操作。如果表不存在，則自動創建(建議開發時使用)database-schema-update: false# 關閉定時任務JOBasync-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中所需要的全部表。

完成上述操作后就可以在自己項目中正常使用了。