分享兩個可以繪製 Flowable 流程圖的Vue前端庫

之前發了一篇文章和小夥伴們介紹了前端的bpmn.js 這個函式庫，利用這個函式庫我們可以自己將繪製流程圖的功能嵌入到我們的專案中。

然而，這個庫預設是給Camunda 設計的，所以畫出來的流程圖導出來的XML 檔案無法直接使用，必須要做一些深度定制，才能將XML 檔案轉為Flowable 流程引擎可用的XML 檔案。這個深度訂製太太太麻煩了。

所以我就在想前端有沒有現成的函式庫，可以直接用來繪製 Flowable 流程圖的？找來找去，找到了兩個，這兩個的相似度還蠻高的，不過這兩個都有一個問題，那就是都是基於Vue2 開發的，在Vue3 中用不了，算了，作為一個工具，Vue2 就Vue2 吧，忍了。畢竟我也不是專業的前端工程師，掌握的前端技能能滿足我後端的需求也就足夠了，要是專業的前端工程師，我肯定把 bpmn.js Vue3 整的明明白白了。 【相關推薦：vuejs影片教學】

好啦，接下來就不廢話了，跟小夥伴們介紹一下這兩個可以繪製 Flowable 流程圖的前端庫。

workflow-bpmn-modeler

workflow-bpmn-modeler 基於 Vue 和 bpmn.io@7.0，實作了 flowable 的工作流程設計器。使用這個流程繪製工具，建議採用 flowable6.4.1 版本，flowable6.4.2 版本開始進行商業化重構，為了方便刨碼學習，建議使用 flowable6.4.1 版本。

這個用法其實很簡單，首先我們創建一個Vue2 的項目，注意Vue 的版本不要選錯了，項目創建好之後，添加workflow-bpmn-modeler 依賴，執行如下任意命令添加：

npm i workflow-bpmn-modeler

或：

yarn add workflow-bpmn-modeler

新增完成後，package.json 內容如下：

{
  "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"
  }
}

注意看版本號碼。

接下來我們就可以在一個.vue 檔案中使用這個元件了，程式碼如下：

<template>
  <div>
    <bpmn-modeler></bpmn-modeler>
  </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: "江南一点雨", id: 3 },
        ],
        groups: [
          { name: "经理", id: 4 },
          { name: "组长", id: 5 },
          { name: "员工", id: 6 },
        ],
        categorys: [
          { name: "OA", id: "oa" },
          { name: "财务", id: "finance" },
        ],
      };
    },
    methods: {
      getModelDetail() {
        // 发送请求，获取xml
        // this.xml = response.xml
      },
      save(data) {
        console.log(data);  // { process: {...}, xml: &#39;...&#39;, svg: &#39;...&#39; }
      },
    },
  };
</script>

我們來分析這段程式碼：

• 首先從workflow-bpmn-modeler 中匯入bpmnModeler。

• 註冊 bpmnModeler 元件。

• 在頁面中直接使用bpmnModeler 元件，使用該元件時候，有五個屬性一個方法，我們挨個來說：

  • xml ：這個屬性是bpmnModeler 要展示的流程圖的XML 字串，我們可以事先給一個流程圖的XML 字串，這樣bpmnModeler 元件就會將這個XML 字串所對應的流程圖給畫出來，如果我們只是單純的想自己繪製流程圖，那麼這個可以不用管，給一個空字串就行了。

  • users：這是一個數組，當我們配置 UserTask 的時候，可以設定這個 UserTask 由誰來處理，users 配置的就是這裡用到的使用者。

  • groups：這個類似 users，也是在 UserTask 中，如果我們想要設定一個 UserTask 的候選群組的話，那麼就會用到 groups 中的內容。

  • categorys：這個屬性親測沒有任何功能，原始碼我也看了，原始碼中也沒有用這個屬性，這完全就是一個沒有用的屬性，可忽略之。

  • is-view：這個表示目前bpmnModeler 是要畫流程圖還是單純的只是將流​​程圖展示出來，false 表示我們是用bpmnModeler 畫流程圖的，如果設定為true ，就表示bpmnModeler 只是用來展示流程圖（事先準備好流程圖的XML 文件，可以用bpmnModeler 展示）。

  • @save：這個是點擊網頁上的儲存模型按鈕的時候，會觸發的一個回呼函數。

好啦，這就可以了。

接下來，我們啟動Vue 項目，就可以看到這個流程圖繪製頁面了：

#現在就可以愉快的畫流程圖了～

接下來，松哥就用這個，手把手教大家畫一下之前文章中和大家用的請假流程圖，當時的流程圖是這樣的：

我們來看下如何繪製：

1、首先我們先定義一下流程的基本資訊：

2、接下來繪製經理批准或拒絕流程：

點擊這個扳手按鈕可以設定任務類型：

#為這個任務設定一個監聽器：

設定監聽器的原因是因為前端使用者在提交請假申請的時候，選擇審核者可以直接選擇審核人，也可以選擇審核者的身分（例如經理），這兩種選擇都是被允許的。所以我們就加入一個任務監聽器，當流程執行到這個 Task 的時候，我們就在任務監聽器中，根據前端傳來的參數去設定這個任務是由候選人處理還是候選用戶組處理。

3、加入互斥網關：

#4、審核通過線

接下來，先審核通過，審批通過的條件是approved 欄位為true 就表示審批通過：

5、批准通知通過發送通知

批准通過後，給用戶發送通知，這是一個服務任務，發送通知的類別是我們自己寫的，所以也需要配置自訂類別的位置：

6、結束

########## #最後進入到審核通過UserTask 並且結束：#########################7、繪製拒絕線#######按照如上流程，繼續繪製請假被拒絕的流程：##################muheflow-bpmn-modeler#########松哥要跟大家介紹的第二個工具就是muheflow-bpmn-modeler，這個是基於Vue 和bpmn.io@8.0，實作了flowable 的工作流程設計器。使用這個流程繪製工具，建議採用 flowable6.4.1 版本，flowable6.4.2 版本開始進行商業化重構，為了方便刨碼學習，建議使用 flowable6.4.1 版本。 ######我沒找到這個的原始碼，但是我發現這個的用法和 workflow-bpmn-modeler 的用法毫無差別～所以我就不廢話了，照著上面的用這個就行了。 ######更多程式相關知識，請造訪：###程式設計入門###！ ！ ###

以上是分享兩個可以繪製 Flowable 流程圖的Vue前端庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！