此教程適合若依前后端分離項(xiàng)目，其他項(xiàng)目可以在擴(kuò)展列表中進(jìn)行查找。
近期公司里需要對(duì)很久以前的RuoYi-Vue前后端分離項(xiàng)目擴(kuò)展出flowable的功能，當(dāng)然這個(gè)重任也是落在了我的身上（不然也不會(huì)有這篇文章），然后我在官網(wǎng)看到了RuoYi-Vue-Flowable這個(gè)項(xiàng)目，按照文檔提供的遷移方式對(duì)于我們這個(gè)老版本的項(xiàng)目來說無法正常運(yùn)行，所以我聯(lián)系了作者并更新了一下文檔，打算在網(wǎng)上在發(fā)布一篇（畢竟有的人懶得看官方文檔）。
官方項(xiàng)目地址：https://gitee.com/tony2y/RuoYi-flowable
把項(xiàng)目拉到本地后下面開始整合教程，整合教程分為前端和后端兩個(gè)模塊。
前端遷移流程
1.flowale功能頁面相關(guān)內(nèi)容遷移
1.1 把目錄ruoyi-ui/src/views/下的flowable文件夾移動(dòng)到你自己前端項(xiàng)目中的/src/views/文件下。
?
1.2 移動(dòng)頁面配套的js文件，將ruoyi-ui/src/api/下的flowable文件夾移動(dòng)到自己項(xiàng)目中的/src/api/文件下。
?
2.flowale流程設(shè)計(jì)器相關(guān)內(nèi)容遷移
將ruoyi-ui/src/components目錄下的customBpmn，flow，parser，Process，render，tinymce文件夾移動(dòng)到自己項(xiàng)目中的/src/components文件下。
?
3.表單設(shè)計(jì)器與人員選擇模塊相關(guān)文件遷移
3.1 將ruoyi-ui/src/views/tool中的build文件夾移動(dòng)到自己項(xiàng)目中的/src/views/tool文件下，存在則覆蓋。
?
3.2 遷移表單設(shè)計(jì)器相關(guān)樣式，將ruoyi-ui/src下的styles文件移動(dòng)到自己項(xiàng)目中的/src文件夾下。
?
3.3 修改ruoyi-ui/src/utils/index.js中的deepClone函數(shù)。
?
修改為如下內(nèi)容，存在該函數(shù)做修改，不存在做新增。
// 深拷貝對(duì)象
export function deepClone(obj) {
const _toString = Object.prototype.toString
// null, undefined, non-object, function
if (!obj || typeof obj !== 'object') {
return obj
}
// DOM Node
if (obj.nodeType && 'cloneNode' in obj) {
return obj.cloneNode(true)
}
// Date
if (_toString.call(obj) === '[object Date]') {
return new Date(obj.getTime())
}
// RegExp
if (_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 遷移或替換相關(guān)js文件，存在則替換，不存在則新增，將ruoyi-ui/src/utils/generator，ruoyi-ui/src/utils文件夾中對(duì)應(yīng)下圖紅框的js文件移動(dòng)到自己項(xiàng)目中對(duì)應(yīng)的文件夾中。
?
3.5 遷移表單設(shè)計(jì)器相關(guān)圖標(biāo)，將ruoyi-ui/src下的icons文件移動(dòng)到自己項(xiàng)目中的/src文件夾下。?
4. 流程表達(dá)式、流程監(jiān)聽器相關(guān)內(nèi)容遷移
4.1 相關(guān)頁面遷移，將ruoyi-ui/src/views/system下的expression，listener文件夾移動(dòng)到自己項(xiàng)目中的/src/views/system文件夾下。
4.2 相關(guān)js文件遷移，將ruoyi-ui/src/api/system下的expression.js，listener.js文件移動(dòng)到自己項(xiàng)目中的/src/api/system文件夾下。
5. main.js中引入組件
main.js中結(jié)合上圖添加如下代碼。
import Tinymce from '@/components/tinymce/index.vue'
Vue.component('tinymce', Tinymce)6.?package.json中新增依賴
package.json中結(jié)合上圖添加如下依賴。
"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版本路由寫法不一致，請(qǐng)參照自己項(xiàng)目路由進(jìn)行添加。
參考如下：
{
path: '/flowable',
component: Layout,
hidden: true,
children: [
{
path: 'definition/model/',
component: () => import('@/views/flowable/definition/model'),
name: 'Model',
meta: { title: '流程設(shè)計(jì)', 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: '流程發(fā)起', 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. 啟動(dòng)項(xiàng)目
刪除node_modules文件夾，控制臺(tái)執(zhí)行npm install下載完畢后啟動(dòng)項(xiàng)目即可。
由于加入了流程校驗(yàn)器，遷移項(xiàng)目后啟動(dòng)錯(cuò)誤請(qǐng)執(zhí)行以下命令
npm install create-bpmnlint-plugin -D后端遷移流程
1. 在父級(jí)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表達(dá)式計(jì)算-->
<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項(xiàng)目中的ruoyi-flowable文件夾整個(gè)遷移到自己項(xiàng)目中
3. 在admin項(xiàng)目的pom文件中引入ruoyi-flowable項(xiàng)目
<dependency>
<groupId>com.ruoyi</groupId>
<artifactId>ruoyi-flowable</artifactId>
</dependency>4. 遷移flowable相關(guān)類
根據(jù)若依項(xiàng)目的版本不同，缺少的實(shí)體類，mapper，service也會(huì)有所不同，所以需要根據(jù)flowable項(xiàng)目中所提示缺少的類進(jìn)行針對(duì)性的拷貝，如果為service接口記得補(bǔ)全對(duì)應(yīng)的controller。
5. 在admin項(xiàng)目的yml配置文件中新增如下配置
application.yml文件中添加如下配置
# flowable相關(guān)表
flowable:
# true 會(huì)對(duì)數(shù)據(jù)庫中所有表進(jìn)行更新操作。如果表不存在，則自動(dòng)創(chuàng)建(建議開發(fā)時(shí)使用)
database-schema-update: false
# 關(guān)閉定時(shí)任務(wù)JOB
async-executor-activate: false數(shù)據(jù)源地址后需要加上nullCatalogMeansCurrent=true，保證自動(dòng)創(chuàng)建flowable表時(shí)不會(huì)報(bào)錯(cuò)。
6. 遷移數(shù)據(jù)庫表
新建一個(gè)庫執(zhí)行tony-flowable.sql文件，flowable項(xiàng)目中少什么表就將對(duì)應(yīng)的表導(dǎo)入到自己的數(shù)據(jù)庫中，mysql數(shù)據(jù)庫版本要用5.7。
7. 數(shù)據(jù)遷移
將sys_menu對(duì)應(yīng)下圖紅框中的菜單數(shù)據(jù)加入到自己的表中。
?將sys_dict_type對(duì)應(yīng)下圖紅框中的字典類型數(shù)據(jù)添加到自己的表中。
?將sys_dict_data對(duì)應(yīng)下圖紅框中的字典數(shù)據(jù)添加到自己的表中。
8. 啟動(dòng)項(xiàng)目
第一次啟動(dòng)時(shí)需要把yml配置文件中的database-schema-update設(shè)置為true，這樣會(huì)自動(dòng)創(chuàng)建flowable中所需要的全部表。
完成上述操作后就可以在自己項(xiàng)目中正常使用了。?文章來源：http://www.zghlxwxcb.cn/news/detail-420513.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-420513.html
到了這里，關(guān)于若依(RuoYi-Vue)+Flowable工作流前后端整合教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
