由于之前的公司的項目中的工作流管理要用到流程圖佳镜，而bpmn-js官方的文檔是全英的而且使用的js框架是jQuery扇调，可能是比較新的技術(shù)把兔，官方也還在不斷的更新玉锌，相關(guān)的文檔或者資料很少很難找名挥，只好自己不斷爬坑填坑了。
什么是bpmn-js主守？
一個BPMN 2.0渲染工具包和Web建模器禀倔。
github地址：https://github.com/bpmn-io
實例地址：https://bpmn.io/toolkit/bpmn-js/
1.先從簡單開始，能獲取服務(wù)器上的流程圖并顯示出來：
安裝相關(guān)的依賴都是必須的参淫，可以在官方文檔上查看救湖，在這里就不詳細(xì)講了。
- html: (界面很簡單涎才，這些都是必需的鞋既。)
<template>
<div class="containers" ref="content">
<div class="canvas" ref="canvas"></div>
<div id="js-properties-panel" class="panel"></div>
</div>
</template>
- js:
<script>
// 引入相關(guān)的依賴
import BpmnViewer from 'bpmn-js'
import BpmnModeler from 'bpmn-js/lib/Modeler'
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 {
data(){
return {
// bpmn建模器
bpmnModeler: null,
container: null,
canvas: null
}
},
methods:{
createNewDiagram() {
const bpmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
'<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_0fppxr8" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
' <bpmn:process id="Process_1" isExecutable="false">\n' +
' <bpmn:startEvent id="StartEvent_1" name="begin ">\n' +
' <bpmn:outgoing>SequenceFlow_0nrfbee</bpmn:outgoing>\n' +
' </bpmn:startEvent>\n' +
' <bpmn:task id="Task_0ho18x0" name="hello ">\n' +
' <bpmn:incoming>SequenceFlow_0nrfbee</bpmn:incoming>\n' +
' <bpmn:outgoing>SequenceFlow_00ho26x</bpmn:outgoing>\n' +
' </bpmn:task>\n' +
' <bpmn:task id="Task_1ymuvem" name="world">\n' +
' <bpmn:incoming>SequenceFlow_00ho26x</bpmn:incoming>\n' +
' <bpmn:outgoing>SequenceFlow_18df8vb</bpmn:outgoing>\n' +
' </bpmn:task>\n' +
' <bpmn:endEvent id="EndEvent_1c0ed2n" name="end">\n' +
' <bpmn:incoming>SequenceFlow_18df8vb</bpmn:incoming>\n' +
' </bpmn:endEvent>\n' +
' <bpmn:sequenceFlow id="SequenceFlow_0nrfbee" sourceRef="StartEvent_1" targetRef="Task_0ho18x0" />\n' +
' <bpmn:sequenceFlow id="SequenceFlow_00ho26x" sourceRef="Task_0ho18x0" targetRef="Task_1ymuvem" />\n' +
' <bpmn:sequenceFlow id="SequenceFlow_18df8vb" sourceRef="Task_1ymuvem" targetRef="EndEvent_1c0ed2n" />\n' +
' </bpmn:process>\n' +
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
' <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
' <dc:Bounds x="173" y="102" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="178" y="145" width="27" height="27" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Task_0ho18x0_di" bpmnElement="Task_0ho18x0">\n' +
' <dc:Bounds x="485" y="244" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="Task_1ymuvem_di" bpmnElement="Task_1ymuvem">\n' +
' <dc:Bounds x="712" y="391" width="100" height="80" />\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNShape id="EndEvent_1c0ed2n_di" bpmnElement="EndEvent_1c0ed2n">\n' +
' <dc:Bounds x="1056" y="568" width="36" height="36" />\n' +
' <bpmndi:BPMNLabel>\n' +
' <dc:Bounds x="1065" y="611" width="19" height="14" />\n' +
' </bpmndi:BPMNLabel>\n' +
' </bpmndi:BPMNShape>\n' +
' <bpmndi:BPMNEdge id="SequenceFlow_0nrfbee_di" bpmnElement="SequenceFlow_0nrfbee">\n' +
' <di:waypoint x="209" y="120" />\n' +
' <di:waypoint x="347" y="120" />\n' +
' <di:waypoint x="347" y="284" />\n' +
' <di:waypoint x="485" y="284" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="SequenceFlow_00ho26x_di" bpmnElement="SequenceFlow_00ho26x">\n' +
' <di:waypoint x="585" y="284" />\n' +
' <di:waypoint x="649" y="284" />\n' +
' <di:waypoint x="649" y="431" />\n' +
' <di:waypoint x="712" y="431" />\n' +
' </bpmndi:BPMNEdge>\n' +
' <bpmndi:BPMNEdge id="SequenceFlow_18df8vb_di" bpmnElement="SequenceFlow_18df8vb">\n' +
' <di:waypoint x="812" y="431" />\n' +
' <di:waypoint x="934" y="431" />\n' +
' <di:waypoint x="934" y="586" />\n' +
' <di:waypoint x="1056" y="586" />\n' +
' </bpmndi:BPMNEdge>\n' +
' </bpmndi:BPMNPlane>\n' +
' </bpmndi:BPMNDiagram>\n' +
'</bpmn:definitions>\n'
// 將字符串轉(zhuǎn)換成圖顯示出來
this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
if (err) {
console.error(err);
}
else {
// 這里還沒用到這個眶拉，先注釋掉吧
// that.success()
}
})
}
},
mounted(){
// 獲取到屬性ref為“content”的dom節(jié)點
this.container = this.$refs.content
// 獲取到屬性ref為“canvas”的dom節(jié)點
const canvas = this.$refs.canvas
// 建模，官方文檔這里講的很詳細(xì)
this.bpmnModeler = new BpmnModeler({
container: canvas,
//添加控制板
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
// 左邊工具欄以及節(jié)點
propertiesProviderModule,
// 右邊的工具欄
propertiesPanelModule
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
this.createNewDiagram(this.bpmnModeler);
}
}
</script>
- css: (記得引入樣式眠菇，否則左邊的工具欄無法顯示T_T 別問我怎么知道的)
<style lang="scss">
/*左邊工具欄以及編輯節(jié)點的樣式*/
@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';
/*右邊工具欄樣式*/
@import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
.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>
有圖有真相
