workflow-bpmn-modeler

workflow-bpmn-modeler 基于 Vue 和 bpmn.io@7.0，實現(xiàn)了 flowable 的工作流設計器。使用這個流程繪制工具，建議采用 flowable6.4.1 版本，flowable6.4.2 版本開始進行商業(yè)化重構，為了方便刨碼學習，推薦使用 flowable6.4.1 版本。

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

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
            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: "江南一點雨", id: 3 },
        ],
        groups: [
          { name: "經(jīng)理", id: 4 },
          { name: "組長", id: 5 },
          { name: "員工", id: 6 },
        ],
        categorys: [
          { name: "OA", id: "oa" },
          { name: "財務", id: "finance" },
        ],
      };
    },
    methods: {
      getModelDetail() {
        // 發(fā)送請求，獲取xml
        // this.xml = response.xml
      },
      save(data) {
        console.log(data);  // { process: {...}, xml: '...', svg: '...' }
      },
    },
  };
</script>

我們來分析一下這段代碼：

1. 首先從 workflow-bpmn-modeler 中導入 bpmnModeler。

2. 注冊 bpmnModeler 組件。

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

4. xml：這個屬性是 bpmnModeler 要展示的流程圖的 XML 字符串，我們可以提前給一個流程圖的 XML 字符串，這樣 bpmnModeler 組件就會將這個 XML 字符串所對應的流程圖給畫出來，如果我們只是單純的想自己繪制流程圖，那么這個可以不用管，給一個空字符串就行了。

5. users：這是一個數(shù)組，當我們配置 UserTask 的時候，可以設置這個 UserTask 由誰來處理，users 配置的就是這里用到的用戶。

6. groups：這個類似于 users，也是在 UserTask 中，如果我們想要配置一個 UserTask 的候選組的話，那么就會用到 groups 中的內容。

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

8. is-view：這個表示當前 bpmnModeler 是要畫流程圖還是單純的只是將流程圖展示出來，false 表示我們是用 bpmnModeler 畫流程圖的，如果設置為 true，就表示 bpmnModeler 只是用來展示流程圖（提前準備好流程圖的 XML 文件，可以用 bpmnModeler 將之展示出來）。

9. @save：這個是點擊網(wǎng)頁上的保存模型按鈕的時候，會觸發(fā)的一個回調函數(shù)。

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

image.png

現(xiàn)在就可以愉快的畫流程圖了～

image.png

我們來看下如何繪制：

1. 首先我們先來定義一下流程的基本信息：

image.png

2. 接下來繪制經(jīng)理批準還是拒絕流程：

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

image.png

為這個任務設置一個監(jiān)聽器：

image.png

設置監(jiān)聽器的原因是因為前端用戶在提交請假申請的時候，選擇審批人可以直接選擇審批人，也可以選擇審批人的身份（例如經(jīng)理），這兩種選擇都是被允許的。所以我們就添加一個任務監(jiān)聽器，當流程執(zhí)行到這個 Task 的時候，我們就在任務監(jiān)聽器中，根據(jù)前端傳來的參數(shù)去設置這個任務是由候選人處理還是候選用戶組處理。

3. 添加互斥網(wǎng)關：

image.png

4. 審批通過線

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

image.png

5. 審批通過發(fā)送通知

審批通過后，給用戶發(fā)送一個通知，這是一個服務任務，發(fā)送通知的類是我們自己寫的，所以也需要配置一下自定義類的位置：

image.png

6. 結束

最后進入到審批通過 UserTask 并且結束：

image.png

image.png

image.png

7. 繪制拒絕線

按照如上流程，繼續(xù)繪制請假被拒絕的流程：

image.png

muheflow-bpmn-modeler

第二個工具就是 muheflow-bpmn-modeler，這個基于 Vue 和 bpmn.io@8.0，實現(xiàn)了 flowable 的工作流設計器。使用這個流程繪制工具，建議采用 flowable6.4.1 版本，flowable6.4.2 版本開始進行商業(yè)化重構，為了方便刨碼學習，推薦使用 flowable6.4.1 版本。

用法和 workflow-bpmn-modeler 的用法毫無差別～所以我就不廢話了，照著上面的用這個就行了。