bpmn.js在vue中初體驗

前提：項目中需要繪制流程圖的需求，涉及到Activiti和Bpmn.js的使用，接下來就來看看如何在Vue中使用Bpmn.js繪制線上流程圖吧。

額，bpmn.js是什麼？是一個實驗BPMN2.0渲染工具包和web模組化器，可以使畫流程圖的功能在前端來完成。

如果你不了解它的話，可以來這初體驗一下，看看它是否滿足你的需求吧。

vue

中內建

Bpmn.js

實作線上繪圖，導出

xml

、

svg

、線上儲存等操作

bpmn.js界面内容介紹

接下來進入正題啦！

首先先建立一個

vue

項目，并安裝好路由

vue create vue-bpmn
cd vue-bpmn
npm i vue-router -S
           

項目搭建完成後，配置好路由相關部分，我們在

views

檔案夾下建立一個

basic.vue

的檔案

vue中使用bpmn.js

bpmn.js 基礎

其實這部分主要是将

xml

格式的

bpmn

内容解析為圖檔顯示出來

1. 安裝相關依賴

1. 添加

   Bpmn

   流程圖模闆

   xml

   檔案（這個檔案可以自己繪圖建構）

   在

   mock

   檔案夾下建立

   xmlStr.js

   檔案

export var xmlStr = `
<?xml version="1.0" encoding="UTF-8"?>
  <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
        xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
        xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
        id="sample-diagram"
        targetNamespace="http://bpmn.io/schema/bpmn"
        xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="Process_1" isExecutable="false">
    <bpmn2:startEvent id="StartEvent_1" />
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="192" y="82" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>`
           

1. 編寫相關代碼

   basic.vue

<template>
  <div class="container">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script>
// 引入相關依賴
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from '../mock/xmlStr' // 直接引用 xml格式
export default {
  name: 'basic',
  data () {
    return {
      bpmnModeler: null, // bpmn 模組化器
      container: null,
      canvas: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 擷取canvas的dom節點
      const canvas = this.$refs.canvas
      // 模組化
      this.bpmnModeler = new BpmnModeler({
        container: canvas
      })
      this.createNewDiagram()
    },
    createNewDiagram () {
      // 将字元串轉換成圖顯示出來
      try {
        const result = this.bpmnModeler.importXML(xmlStr)
        const { warnings } = result
        console.log(warnings)
      } catch (err) {
        console.log(err.message, err.warnings)
      }
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
  height: 100%;
}
</style>
           

運作代碼後效果圖

bpmn.js添加左側工具欄

左側工具欄主要是為使用者線上自定義流程圖使用

如果我們需要使用左側的工具欄，隻需要在

main.js

中引入相應的

css

樣式就可以了

在

main.js

中添加bpmn左側工具欄

css

樣式

import Vue from 'vue'
import App from './App.vue'
import router from './routes/index'
Vue.config.productionTip = false

// bpmn 工作流繪圖工具的樣式
import "bpmn-js/dist/assets/diagram-js.css"  // 左邊工具欄以及編輯節點的樣式
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css"
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css"
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
           

其他代碼都不變，此時頁面上就多了左側工具欄了，我們可以自己添加節點

補充：如果你添加了左側工具欄的樣式，但是你不想繪制流程圖，隻檢視流程圖的話，也可以将

basic.vue

下面的内容修改一下就可以啦

// 繪制流程圖
// import BpmnModeler from "bpmn-js/lib/Modeler"
// 預覽流程圖
import BpmnViewer from "bpmn-js/lib/Viewer"

init() {
      const canvas = this.$refs.canvas
      // this.bpmnModeler = new BpmnModeler({  // 可編輯
      this.bpmnModeler = new BpmnViewer({ // 僅預覽
        container: canvas
      })
      this.createNewDiagram()
    },
           

bpmn.js添加右側屬性欄

屬性欄顧名思義就是流程圖中節點的屬性資訊

如果想在界面中添加右側屬性欄的話就需要安裝相關插件了

1. 安裝插件

npm i bpmn-js-properties-panel --save-D
npm i camunda-bpmn-moddle --save-D
           

1. 在

   main.js

   中添加相關

   css

   樣式

import Vue from 'vue'
import App from './App.vue'
...
// 使用bpmn.js- 右側屬性欄
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右邊工具欄樣式
...
           

1. 在

   views

   下建立

   panel.vue

   檔案，并配置好路由

打 … 的地方和

basic.vue

檔案的内容一樣哦

// panel.vue
<template>
  <div class="container">
    <div class="canvas" ref="canvas"></div>
    <!-- 右邊屬性欄部分 -->
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>

<script>
// 引入相關依賴
...
// 使用右側屬性欄
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

export default {
  name: 'basic',
  data () {
    return {
      ...
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 擷取canvas的dom節點
      const canvas = this.$refs.canvas
      // 模組化
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        // 添加控制闆
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          // 右邊的屬性欄
          propertiesProviderModule,
          propertiesPanelModule
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }
      })
      this.createNewDiagram()
    },
    createNewDiagram () {
      ...
    }
  }
}
</script>

<style scoped>
...
.panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
}
</style>
           

運作後效果

以上，就是 在

vue

中使用

bpmn.js

中繪制流程圖的全部内容啦！

關于右下角

BPMN.IO

這個 logo，官方要求是不給删或者隐藏的，否則就侵權，如果實在是不需要 logo的話可以簡單地把 logo 的 css樣式隐藏一下

js

部分

mounted() {
    // 删除 bpmn logo  bpmn.io官方要求不給删或者隐藏，否則侵權   内部使用
    const bjsIoLogo = document.querySelector('.bjs-powered-by')
    while (bjsIoLogo.firstChild) {
      bjsIoLogo.removeChild(bjsIoLogo.firstChild)
    }
},
           

css

部分

.bjs-powered-by {
  display:none !important;
}