bpmn.js是一個BPMN2.0渲染工具包和web模組化器, 使得畫流程圖的功能在前端來完成.
接下來做好準備，開啟bpmn學習之路吧！
Vue中如何安裝并使用bpmn呢？
1、安裝命相關依賴
npm i bpmn-js --save-D
2、編寫HTML代碼：
<template>
<div class="containers">
<div class="canvas" ref="canvas"></div>
</div>
</template>
3、編寫JS代碼
<script>
// 引入相關的依賴
import BpmnModeler from 'bpmn-js/lib/Modeler'
import {
xmlStr
} from '../mock/xmlStr' // 這裡是直接引用了xml字元串
export default {
name: '',
components: {},
// 生命周期 - 建立完成（可以通路目前this執行個體）
created() { },
// 生命周期 - 載入後, Vue 執行個體挂載到實際的 DOM 操作完成，一般在該過程進行 Ajax 互動
mounted() {
this.init()
},
data() {
return {
// bpmn模組化器
bpmnModeler: null,
container: null,
canvas: null
}
},
methods: {
init() {
// 擷取到屬性ref為“canvas”的dom節點
const canvas = this.$refs.canvas
// 模組化
this.bpmnModeler = new BpmnModeler({
container: canvas
})
this.createNewDiagram()
},
createNewDiagram() {
// 将字元串轉換成圖顯示出來
this.bpmnModeler.importXML(xmlStr, (err) => {
if (err) {
// console.error(err)
} else {
// 這裡是成功之後的回調, 可以在這裡做一系列事情
this.success()
}
})
},
success() {
// console.log('建立成功!')
}
}
}
</script>
4、編寫CSS
<style scoped>
.containers{
position: absolute;
background-color: #ffffff;
width: 100%;
height: 100%;
}
.canvas{
width: 100%;
height: 100%;
}
.panel{
position: absolute;
right: 0;
top: 0;
width: 300px;
}
</style>
使用指令：npm run start啟動項目，打開後就可以看到一個面闆，但是沒有左側工具欄和右側屬性框，接下來繼續代碼編寫：
Vue中使用bpmn.js的左側工具欄：
左側工具欄的作用：給圖形添加新的節點
這一步非常簡單，隻需要在main.js中引入相關的樣式即可：
在main.js中引入css:
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
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')
Vue中使用bpmn.js右側屬性欄
屬性欄的作用：使用者在點選圖上的節點的時候，能擷取該節點的屬性資訊
想要使用右側屬性欄，就得安裝一個插件：bpmn-js-properties-panel
1、在指令行中輸入一下指令進行插件安裝
npm i bpmn-js-properties-panel --save-D
2、在main.js中引入樣式：
// main.js
import Vue from 'vue'
...
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右邊工具欄樣式
...
3、頁面中引入propertiesProviderModule和propertiesPanelModule：
// panel.vue
<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'
...
methods: {
init() {
// 擷取到屬性ref為“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()
}
}
完整代碼：
<template>
<div class="containers" ref="content">
<div class="canvas" ref="canvas"></div>
<div id="js-properties-panel" class="panel"></div>
</div>
</template>
<script>
// 引入相關的依賴
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from '../../../mock/xmlStr'
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: '',
components: {},
// 生命周期 - 建立完成（可以通路目前this執行個體）
created() {},
// 生命周期 - 載入後, Vue 執行個體挂載到實際的 DOM 操作完成，一般在該過程進行 Ajax 互動
mounted() {
this.init()
},
data() {
return {
// bpmn模組化器
bpmnModeler: null,
container: null,
canvas: null
}
},
// 方法集合
methods: {
init () {
// 擷取到屬性ref為“content”的dom節點
this.container = this.$refs.content
// 擷取到屬性ref為“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 () {
// 将字元串轉換成圖顯示出來
this.bpmnModeler.importXML(xmlStr, (err) => {
if (err) {
// console.error(err)
}
else {
// 這裡是成功之後的回調, 可以在這裡做一系列事情
this.success()
}
})
},
success () {
// console.log('建立成功!')
}
},
// 計算屬性
computed: {}
}
</script>
<style scoped>
.containers{
background-color: #ffffff;
width: 100%;
height: calc(100vh - 52px);
}
.canvas{
width: 100%;
height: 100%;
}
.panel{
position: absolute;
right: 0;
top: 0;
width: 300px;
}
</style>
到這一步，Vue中引入bpmn就基本完成了，運作項目後，可以看到效果圖如下：
