種草兩個(gè)可以畫 Flowable 流程圖的 Vue 庫(kù)！
今天跟小伙伴們介紹一下這兩個(gè)可以繪制 Flowable 流程圖的前端庫(kù)。
workflow-bpmn-modeler
workflow-bpmn-modeler 基于 Vue 和 bpmn.io@7.0，實(shí)現(xiàn)了 flowable 的工作流設(shè)計(jì)器。使用這個(gè)流程繪制工具，建議采用 flowable6.4.1 版本，flowable6.4.2 版本開始進(jìn)行商業(yè)化重構(gòu)，為了方便刨碼學(xué)習(xí)，推薦使用 flowable6.4.1 版本。
這個(gè)用法其實(shí)很簡(jiǎn)單，首先我們創(chuàng)建一個(gè) Vue2 的項(xiàng)目，注意 Vue 的版本不要選錯(cuò)了，項(xiàng)目創(chuàng)建好之后，添加 workflow-bpmn-modeler 依賴，執(zhí)行如下任意命令添加：
npm i workflow-bpmn-modeler
或者：
yarn add workflow-bpmn-modeler
添加完成后，package.json 內(nèi)容如下：
{
"name": "bpmn_demo02",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.8.3",
"element-ui": "^2.15.9",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"workflow-bpmn-modeler": "^0.2.8"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"vue-template-compiler": "^2.6.14"
}
}
注意看版本號(hào)。
接下來我們就可以在一個(gè) .vue 文件中使用這個(gè)組件了，代碼如下：
<template>
<div>
<bpmn-modeler
ref="refNode"
:xml="xml"
:users="users"
:groups="groups"
:categorys="categorys"
:is-view="false"
@save="save"
/>
</div>
</template>
<script>
import bpmnModeler from "workflow-bpmn-modeler";
export default {
components: {
bpmnModeler,
},
data() {
return {
xml: "", // 后端查詢到的xml
users: [
{ name: "javaboy", id: 1 },
{ name: "itboyhub", id: 2 },
{ name: "江南一點(diǎn)雨", id: 3 },
],
groups: [
{ name: "經(jīng)理", id: 4 },
{ name: "組長(zhǎng)", id: 5 },
{ name: "員工", id: 6 },
],
categorys: [
{ name: "OA", id: "oa" },
{ name: "財(cái)務(wù)", id: "finance" },
],
};
},
methods: {
getModelDetail() {
// 發(fā)送請(qǐng)求，獲取xml
// this.xml = response.xml
},
save(data) {
console.log(data); // { process: {...}, xml: '...', svg: '...' }
},
},
};
</script>
我們來分析一下這段代碼：
- 首先從 workflow-bpmn-modeler 中導(dǎo)入 bpmnModeler。
- 注冊(cè) bpmnModeler 組件。
- 在頁(yè)面中直接使用 bpmnModeler 組件，使用該組件時(shí)候，有五個(gè)屬性一個(gè)方法，我們挨個(gè)來說：
xml：這個(gè)屬性是 bpmnModeler 要展示的流程圖的 XML 字符串，我們可以提前給一個(gè)流程圖的 XML 字符串，這樣 bpmnModeler 組件就會(huì)將這個(gè) XML 字符串所對(duì)應(yīng)的流程圖給畫出來，如果我們只是單純的想自己繪制流程圖，那么這個(gè)可以不用管，給一個(gè)空字符串就行了。
users：這是一個(gè)數(shù)組，當(dāng)我們配置 UserTask 的時(shí)候，可以設(shè)置這個(gè) UserTask 由誰來處理，users 配置的就是這里用到的用戶。
groups：這個(gè)類似于 users，也是在 UserTask 中，如果我們想要配置一個(gè) UserTask 的候選組的話，那么就會(huì)用到 groups 中的內(nèi)容。
categorys：這個(gè)屬性親測(cè)沒有任何功能，源代碼我也看了，源代碼中也沒有用這個(gè)屬性，這完全就是一個(gè)沒有用的屬性，可忽略之。
is-view：這個(gè)表示當(dāng)前 bpmnModeler 是要畫流程圖還是單純的只是將流程圖展示出來，false 表示我們是用 bpmnModeler 畫流程圖的，如果設(shè)置為 true，就表示 bpmnModeler 只是用來展示流程圖（提前準(zhǔn)備好流程圖的 XML 文件，可以用 bpmnModeler 將之展示出來）。
@save：這個(gè)是點(diǎn)擊網(wǎng)頁(yè)上的保存模型按鈕的時(shí)候，會(huì)觸發(fā)的一個(gè)回調(diào)函數(shù)。
好啦，這就可以了。
接下來，我們啟動(dòng) Vue 項(xiàng)目，就可以看到這個(gè)流程圖繪制頁(yè)面了：
現(xiàn)在就可以愉快的畫流程圖了～
接下來，松哥就用這個(gè)，手把手教大家畫一下之前文章中和大家用的請(qǐng)假流程圖，當(dāng)時(shí)的流程圖是這樣的：
我們來看下如何繪制：
- 首先我們先來定義一下流程的基本信息：
- 接下來繪制經(jīng)理批準(zhǔn)還是拒絕流程：
點(diǎn)擊這個(gè)扳手按鈕可以設(shè)置任務(wù)類型：
為這個(gè)任務(wù)設(shè)置一個(gè)監(jiān)聽器：
設(shè)置監(jiān)聽器的原因是因?yàn)榍岸擞脩粼谔峤徽?qǐng)假申請(qǐng)的時(shí)候，選擇審批人可以直接選擇審批人，也可以選擇審批人的身份（例如經(jīng)理），這兩種選擇都是被允許的。所以我們就添加一個(gè)任務(wù)監(jiān)聽器，當(dāng)流程執(zhí)行到這個(gè) Task 的時(shí)候，我們就在任務(wù)監(jiān)聽器中，根據(jù)前端傳來的參數(shù)去設(shè)置這個(gè)任務(wù)是由候選人處理還是候選用戶組處理。
- 添加互斥網(wǎng)關(guān)：
- 審批通過線
接下來，先是審批通過，審批通過的條件是 approved 字段為 true 就表示審批通過：
- 審批通過發(fā)送通知
審批通過后，給用戶發(fā)送一個(gè)通知，這是一個(gè)服務(wù)任務(wù)，發(fā)送通知的類是我們自己寫的，所以也需要配置一下自定義類的位置：
- 結(jié)束
最后進(jìn)入到審批通過 UserTask 并且結(jié)束：
- 繪制拒絕線
按照如上流程，繼續(xù)繪制請(qǐng)假被拒絕的流程：
muheflow-bpmn-modeler
松哥要和大家介紹的第二個(gè)工具就是 muheflow-bpmn-modeler，這個(gè)基于 Vue 和 bpmn.io@8.0，實(shí)現(xiàn)了 flowable 的工作流設(shè)計(jì)器。使用這個(gè)流程繪制工具，建議采用 flowable6.4.1 版本，flowable6.4.2 版本開始進(jìn)行商業(yè)化重構(gòu)，為了方便刨碼學(xué)習(xí)，推薦使用 flowable6.4.1 版本。
沒找到這個(gè)的源代碼，但是我發(fā)現(xiàn)這個(gè)的用法和 workflow-bpmn-modeler 的用法毫無差別～所以我就不廢話了，照著上面的用這個(gè)就行了。
