bpmn.js是一個BPMN2.0渲染工具包和web模組化器, 使得畫流程圖的功能在前端來完成.
官方demo https://github.com/bpmn-io/bpmn-js-examples
bpmn.js基本的使用
bpmn.js
畫圖有的基本内容:
1.安裝
（此次介紹使用的老版本）
npm install [email protected]
npm install [email protected]
2.開始使用,html：
<template>
<div style="" class="containers">
<div class="btnTop">
<el-button type="primary" @click="create">重新整理</el-button>
<el-button type="primary" @click="">儲存</el-button>
<el-button type="primary" @click="">元素屬性編輯模式</el-button>
<el-button type="primary" @click="">顯示bpmn源文本</el-button>
<el-button type="primary" @click="download">下載下傳</el-button>
<el-button type="primary" @click="">上傳</el-button>
</div>
<div id="js-canvas"></div>
<div id="js-properties-panel"></div>
</div>
</template>
main.js中引入樣式：
// 以下為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'
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' //屬性的樣式
3.vue頁面script中引入并使用bpmn
import BpmnModdle 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'
import diagramXml from '../../components/Bpmn/newDiagram' //自己的初始xml檔案
import customTranslate from '../../components/Bpmn/customTranslate/customTranslate' //翻譯
// Our custom translation module
// We need to use the array syntax that is used by bpmn-js internally
// 'value' tells bmpn-js to use the function instead of trying to instanciate it
var customTranslateModule = {
translate: [ 'value', customTranslate ]
}
export default {
name: 'bpmn',
data() {
return {
viewer: null,
canvas: null,
bpmnText: '',
}
},
mounted() {
this.$nextTick().then(() => {
this.canvas = document.getElementById('js-canvas')
this.viewer = new BpmnModdle({
container: this.canvas,
keyboard: {
bindTo: window
},
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
// 右邊的屬性欄
propertiesProviderModule,
// 左邊工具欄以及節點
propertiesPanelModule,
customTranslateModule
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
})
this.create()
})
},
created() {
const id = this.$route.params && this.$route.params.id
console.log("id:"+id)
},
methods: {
download() {
this.viewer.saveXML({ format: true }, (err, xml) => {
if (xml) {
this.bpmnText = xml
console.log(xml)
var a = document.createElement('a');
a.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodeURIComponent(xml)
a.download = 'diagram.bpmn';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
a = null;
}
})
},
create() {
this.bpmnText = diagramXml
this.viewer.importXML(diagramXml, err => {
if (err) {
throw (err)
}
this.viewer.get('canvas').zoom('fit-viewport')
var eventBus = this.viewer.get('eventBus');
var events = [
'element.click',
'element.dblclick'
]
events.forEach(event => {
eventBus.on(event, (e) => {
})
})
})
}
}
}
4.vue頁面可加上CSS樣式：
<style scoped>
.containers{
position: absolute;
background-color: #ffffff;
width: 100%;
height: 100%;
}
#js-canvas{
width: 100%;
height: 100%;
}
#js-properties-panel{
position: absolute;
right: 0;
top: 0;
width: 300px;
}
.btnTop{
text-align: center;
margin-bottom: 5px;
margin-top: 5px;
}
</style>
5.終端中使用指令
npm run start(指令自己判斷)
啟動項目, 打開後可以看到:
附件：
附件1.newDiagram.js
const diagramXml = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="6.5.1">
<process id="Process_1" name="流程" isExecutable="false">
<startEvent id="StartEvent_1y45yut" name="開始">
<outgoing>SequenceFlow_0h21x7r</outgoing>
</startEvent>
<task id="Task_1hcentk">
<incoming>SequenceFlow_0h21x7r</incoming>
</task>
<sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
</process>
<bpmndi:BPMNDiagram id="BpmnDiagram_1">
<bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNEdge id="SequenceFlow_0h21x7r_di" bpmnElement="SequenceFlow_0h21x7r">
<omgdi:waypoint x="188" y="120" />
<omgdi:waypoint x="240" y="120" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
<omgdc:Bounds x="152" y="102" width="36" height="36" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="134" y="145" width="73" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_1hcentk_di" bpmnElement="Task_1hcentk">
<omgdc:Bounds x="240" y="80" width="100" height="80" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>`
export default diagramXml
附件2：customTranslate.js
/* eslint-disable no-mixed-spaces-and-tabs */
import translations from './translationsGerman';
export default function customTranslate(template, replacements) {
replacements = replacements || {};
template = translations[template] || template;
return template.replace(/{([^}]+)}/g, function(_, key) {
var str = replacements[key];
if(translations[replacements[key]] != null && translations [replacements[key]] != 'undefined'){
str = translations[replacements[key]];
}
return str || '{' + key + '}';
});
}
附件3：translationsGerman.js
export default {
// Labels
'Activate the global connect tool' : '激活全局連接配接工具',
'Append':'追加',
'Append {type}': '追加 {type}',
'Append EndEvent': '追加 結束事件 ',
'Append Task':'追加 任務',
'Append Gateway':'追加 網關',
'Append Intermediate/Boundary Event':'追加 中間/邊界 事件',
'Add Lane above': '在上面添加道',
'Divide into two Lanes': '分割成兩個道',
'Divide into three Lanes': '分割成三個道',
'Add Lane below': '在下面添加道',
'Append compensation activity': '追加補償活動',
'Change type': '修改類型',
'Connect using Association': '使用關聯連接配接',
'Connect using Sequence/MessageFlow or Association': '使用順序/消息流或者關聯連接配接',
'Connect using DataInputAssociation': '使用資料輸入關聯連接配接',
'Remove': '移除',
'Activate the hand tool': '激活抓手工具',
'Activate the lasso tool': '激活套索工具',
'Activate the create/remove space tool': '激活建立/删除空間工具',
'Create expanded SubProcess': '建立擴充子過程',
'Create IntermediateThrowEvent/BoundaryEvent' : '建立中間抛出事件/邊界事件',
'Create Pool/Participant': '建立池/參與者',
'Parallel Multi Instance': '并行多重事件',
'Sequential Multi Instance': '時序多重事件',
'DataObjectReference':'資料對象參考',
'DataStoreReference':'資料存儲參考',
'Loop': '循環',
'Ad-hoc': '即席',
'Create {type}': '建立 {type}',
'Create Task':'建立任務',
'Create StartEvent':'建立開始事件',
'Create EndEvent':'建立結束事件',
'Create Group':'建立組',
'Task': '任務',
'UserTask':'使用者任務',
'Send Task': '發送任務',
'Receive Task': '接收任務',
'User Task': '使用者任務',
'Manual Task': '手工任務',
'Business Rule Task': '業務規則任務',
'Service Task': '服務任務',
'Script Task': '腳本任務',
'Call Activity': '調用活動',
'Sub Process (collapsed)': '子流程（折疊的）',
'Sub Process (expanded)': '子流程（展開的）',
'Start Event': '開始事件',
'StartEvent': '開始事件',
'Intermediate Throw Event': '中間事件',
'End Event': '結束事件',
'EndEvent': '結束事件',
'Create Gateway': '建立網關',
'GateWay':'網關',
'Create Intermediate/Boundary Event': '建立中間/邊界事件',
'Message Start Event': '消息開始事件',
'Timer Start Event': '定時開始事件',
'Conditional Start Event': '條件開始事件',
'Signal Start Event': '信号開始事件',
'Error Start Event': '錯誤開始事件',
'Escalation Start Event': '更新開始事件',
'Compensation Start Event': '補償開始事件',
'Message Start Event (non-interrupting)': '消息開始事件（非中斷）',
'Timer Start Event (non-interrupting)': '定時開始事件（非中斷）',
'Conditional Start Event (non-interrupting)': '條件開始事件（非中斷）',
'Signal Start Event (non-interrupting)': '信号開始事件（非中斷）',
'Escalation Start Event (non-interrupting)': '更新開始事件（非中斷）',
'Message Intermediate Catch Event': '消息中間捕獲事件',
'Message Intermediate Throw Event': '消息中間抛出事件',
'Timer Intermediate Catch Event': '定時中間捕獲事件',
'Escalation Intermediate Throw Event': '更新中間抛出事件',
'Conditional Intermediate Catch Event': '條件中間捕獲事件',
'Link Intermediate Catch Event': '連結中間捕獲事件',
'Link Intermediate Throw Event': '連結中間抛出事件',
'Compensation Intermediate Throw Event': '補償中間抛出事件',
'Signal Intermediate Catch Event': '信号中間捕獲事件',
'Signal Intermediate Throw Event': '信号中間抛出事件',
'Message End Event': '消息結束事件',
'Escalation End Event': '定時結束事件',
'Error End Event': '錯誤結束事件',
'Cancel End Event': '取消結束事件',
'Compensation End Event': '補償結束事件',
'Signal End Event': '信号結束事件',
'Terminate End Event': '終止結束事件',
'Message Boundary Event': '消息邊界事件',
'Message Boundary Event (non-interrupting)': '消息邊界事件（非中斷）',
'Timer Boundary Event': '定時邊界事件',
'Timer Boundary Event (non-interrupting)': '定時邊界事件（非中斷）',
'Escalation Boundary Event': '更新邊界事件',
'Escalation Boundary Event (non-interrupting)': '更新邊界事件（非中斷）',
'Conditional Boundary Event': '條件邊界事件',
'Conditional Boundary Event (non-interrupting)': '條件邊界事件（非中斷）',
'Error Boundary Event': '錯誤邊界事件',
'Cancel Boundary Event': '取消邊界事件',
'Signal Boundary Event': '信号邊界事件',
'Signal Boundary Event (non-interrupting)': '信号邊界事件（非中斷）',
'Compensation Boundary Event': '補償邊界事件',
'Exclusive Gateway': '互斥網關',
'Parallel Gateway': '并行網關',
'Inclusive Gateway': '相容網關',
'Complex Gateway': '複雜網關',
'Event based Gateway': '事件網關',
'Transaction': '轉運',
'Sub Process': '子流程',
'Event Sub Process': '事件子流程',
'Collapsed Pool': '折疊池',
'Expanded Pool': '展開池',
// Errors
'no parent for {element} in {parent}': '在{parent}裡，{element}沒有父類',
'no shape type specified': '沒有指定的形狀類型',
'flow elements must be children of pools/participants': '流元素必須是池/參與者的子類',
'out of bounds release': 'out of bounds release',
'more than {count} child lanes': '子道大于{count} ',
'element required': '元素不能為空',
'diagram not part of bpmn:Definitions': '流程圖不符合bpmn規範',
'no diagram to display': '沒有可展示的流程圖',
'no process or collaboration to display': '沒有可展示的流程/協作',
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未繪制',
'already rendered {element}': '{element} 已被渲染',
'failed to import {element}': '導入{element}失敗',
//屬性面闆的參數
'Id':'編号',
'Name':'名稱',
'General':'正常',
'Details':'詳情',
'Message Name':'消息名稱',
'Message':'消息',
'Initiator':'建立者',
'Asynchronous Continuations':'持續異步',
'Asynchronous Before':'異步前',
'Asynchronous After':'異步後',
'Job Configuration':'工作配置',
'Exclusive':'排除',
'Job Priority':'工作優先級',
'Retry Time Cycle':'重試時間周期',
'Documentation':'文檔',
'Element Documentation':'元素文檔',
'History Configuration':'曆史配置',
'History Time To Live':'曆史的生存時間',
'Forms':'表單',
'Form Key':'表單key',
'Form Fields':'表單字段',
'Business Key':'業務key',
'Form Field':'表單字段',
'ID':'編号',
'Type':'類型',
'Label':'名稱',
'Default Value':'預設值',
'Validation':'校驗',
'Add Constraint':'添加限制',
'Config':'配置',
'Properties':'屬性',
'Add Property':'添加屬性',
'Value':'值',
'Add':'添加',
'Values':'值',
'Add Value':'添加值',
'Listeners':'監聽器',
'Execution Listener':'執行監聽',
'Event Type':'事件類型',
'Listener Type':'監聽器類型',
'Java Class':'Java類',
'Expression':'表達式',
'Must provide a value':'必須提供一個值',
'Delegate Expression':'代理表達式',
'Script':'腳本',
'Script Format':'腳本格式',
'Script Type':'腳本類型',
'Inline Script':'内聯腳本',
'External Script':'外部腳本',
'Resource':'資源',
'Field Injection':'字段注入',
'Extensions':'擴充',
'Input/Output':'輸入/輸出',
'Input Parameters':'輸入參數',
'Output Parameters':'輸出參數',
'Parameters':'參數',
'Output Parameter':'輸出參數',
'Timer Definition Type':'定時器定義類型',
'Timer Definition':'定時器定義',
'Date':'日期',
'Duration':'持續',
'Cycle':'循環',
'Signal':'信号',
'Signal Name':'信号名稱',
'Escalation':'更新',
'Error':'錯誤',
'Link Name':'連結名稱',
'Condition':'條件名稱',
'Variable Name':'變量名稱',
'Variable Event':'變量事件',
'Specify more than one variable change event as a comma separated list.':'多個變量事件以逗号隔開',
'Wait for Completion':'等待完成',
'Activity Ref':'活動參考',
'Version Tag':'版本标簽',
'Executable':'可執行檔案',
'External Task Configuration':'擴充任務配置',
'Task Priority':'任務優先級',
'External':'外部',
'Connector':'連接配接器',
'Must configure Connector':'必須配置連接配接器',
'Connector Id':'連接配接器編号',
'Implementation':'實作方式',
'Field Injections':'字段注入',
'Fields':'字段',
'Result Variable':'結果變量',
'Topic':'主題',
'Configure Connector':'配置連接配接器',
'Input Parameter':'輸入參數',
'Assignee':'代理人',
'Candidate Users':'候選使用者',
'Candidate Groups':'候選組(即崗位)',
'Due Date':'到期時間',
'Follow Up Date':'跟蹤日期',
'Priority':'優先級',
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':'跟蹤日期必須符合EL表達式，如： ${someDate} ,或者一個ISO标準日期，如：2015-06-26T09:54:00',
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':'跟蹤日期必須符合EL表達式，如： ${someDate} ,或者一個ISO标準日期，如：2015-06-26T09:54:00',
'Variables':'變量',
'Candidate Starter Configuration':'候選開始配置',
'Task Listener':'任務監聽器',
'Candidate Starter Groups':'候選開始組',
'Candidate Starter Users':'候選開始使用者',
'Tasklist Configuration':'任務清單配置',
'Startable':'啟動',
'Specify more than one group as a comma separated list.':'指定多個組,用逗号分隔',
'Specify more than one user as a comma separated list.':'指定多個使用者,用逗号分隔',
'This maps to the process definition key.':'這會映射為流程定義的鍵',
'CallActivity Type':'調用活動類型',
'Condition Type':'條件類型',
'Create UserTask':'建立使用者任務',
'Create CallActivity':'建立調用活動',
'Called Element':'調用元素',
'Create DataObjectReference':'建立資料對象引用',
'Create DataStoreReference':'建立資料存儲引用',
'Multi Instance':'多執行個體',
'Loop Cardinality':'執行個體數量',
'Collection':'任務參與人清單',
'Element Variable':'元素變量',
'Completion Condition':'完成條件',
'Append CallActivity':'追加 調用活動',
'Binding':'綁定',
'Tenant Id':'租戶ID',
'This maps to the task definition key.':'這會映射為任務定義的key',
'Form field id must not be empty':'表單字段不能為空',
'Form field id already used in form data.':'表單中已經存在該字段',
'Must provide either loop cardinality or collection':'必須提供執行個體數量或者任務參與人清單',
'Select UserTask':'選擇一個已經配置的使用者任務',
'Element must have an unique id.':'元素必須要有一個唯一的id'
};