內容概述
本系列“vue項目中使用bpmn-xxxx”分為七篇，均為自己使用過程中用到的實例，手工原創，目前陸續更新中。主要包括vue項目中bpmn使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。如果轉載或通過爬蟲直接爬的，格式特別丑，請來原創看：我是作者原文
前情提要
vue項目中的用到流程圖bpmn，而bpmn-js官方的文檔是英文的，也沒有找到api文檔。所以只能在使用過程中，自己不斷爬坑填坑了。
首先，看一眼效果圖
1.安裝bpmn-js
npm install bpmn-js --save
2.在main.js中引入樣式
import 'bpmn-js/dist/assets/diagram-js.css'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
3.vue頁面引入並使用bpmn
import BpmnModeler from 'bpmn-js/lib/Modeler'; import CustomPaletteProvider from './customPalette'; import camundaExtension from './resources/camunda';
4.基本操作：前進、回退、bpmn文件導入、導出
<template>
<div class="containerBox">
<el-button-group>
<el-button type="primary" size="mini" @click="handleUndo">后退</el-button>
<el-button type="success" size="mini" @click="handleRedo">前進</el-button>
<el-button type="warning" size="mini" @click="handleDownload">下載</el-button>
<el-upload
style="display: inline-block;"
:file-list="fileList"
class="upload-demo"
action=""
:auto-upload="false"
:show-file-list="false"
:http-request="httpRequest"
:on-change="handleOnchangeFile"
:on-remove="handleRemove"
:before-remove="beforeRemove"
>
<el-button type="danger" size="mini">導入</el-button>
</el-upload>
</el-button-group>
<div id="container"></div>
</div>
</template>
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import CustomPaletteProvider from './customPalette';
import camundaExtension from './resources/camunda';
export default {
name: 'index',
data() {
return {
containerEl: null,
bpmnModeler: null,
fileList: []
};
},
mounted() {
this.containerEl = document.getElementById('container');
this.bpmnModeler = new BpmnModeler({
container: this.containerEl,
moddleExtensions: {camunda: camundaExtension},
additionalModules: [CustomPaletteProvider]
});
this.create();
},
methods: {
create() {
this.bpmnModeler.createDiagram(() => {
this.bpmnModeler.get('canvas').zoom('fit-viewport');
});
},
handleRemove(file) {
for (let i = 0; i < this.fileList.length; i++) {
if (file.name === this.fileList[i].name) {
this.fileList.splice(i, 1);
}
}
},
beforeRemove(file) {
return this.$confirm(`確定移除 ${file.name}？`);
},
// 后退
handleUndo() {
this.bpmnModeler.get('commandStack').undo();
},
// 前進
handleRedo() {
this.bpmnModeler.get('commandStack').redo();
},
handleDownload() {
this.bpmnModeler.saveXML({format: true}, (err, data) => {
const dataTrack = 'bpmn';
const a = document.createElement('a');
const name = `diagram.${dataTrack}`;
a.setAttribute(
'href',
`data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}`
);
a.setAttribute('target', '_blank');
a.setAttribute('dataTrack', `diagram:download-${dataTrack}`);
a.setAttribute('download', name);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
},
handleOnchangeFile(file) {
const reader = new FileReader();
let data = '';
reader.readAsText(file.raw);
reader.onload = (event) => {
data = event.target.result;
this.bpmnModeler.importXML(data, (err) => {
if (err) {
this.$message.info('導入失敗');
} else {
this.$message.success('導入成功');
}
});
};
}
}
}
</script>
<style lang="scss">
.containerBox {
height: calc(100vh - 220px);
position: relative;
#container {
height: calc(100% - 50px);
}
}
</style>
5.后續
步驟4代碼中，有2個import，是我在后面會講到的，代碼沒有摘干凈就傳過來了。感謝 @baogege 發現提醒。
import CustomPaletteProvider from './customPalette';
import camundaExtension from './resources/camunda';
這兩句引入的含義：第一個文件 customPalette 是自定義的左側工具欄，如果不需要自定義，可直接把引入去掉，不影響。如果需要自定義，在我的博客這系列的第五篇里講到了如何自定義platter，可以借鑒一下。第二個文件是定義各個元素擁有的屬性配置。我放在了附件中（點我！我是camunda文件），小伙伴們自己下載一下，下載后改一下后綴，改成.json,（因為上傳時，.json格式不支持上傳，所以我把后綴改成js傳的）。
最近在用這個bpmn組件畫圖，遇到了很多知識點，例如預覽、更新節點名字、更新節點顏色、點擊xml獲取節點 id、根據id獲取元素實例，后續慢慢整理~
想獲取完整源碼或有問題，歡迎大家關注我的公粽號，掃下面二維碼或微信搜“前端便利貼”，即可獲取~