1.初始化项目

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from '@/mock/xmlStr'
export default {mounted () {this.init()},methods: {init () {// 获取到属性ref为“canvas”的dom节点const canvas = this.$refs.canvas// 建模const customTranslateModule = {translate: ['value', customTranslate]}this.bpmnModeler = new BpmnModeler({container: canvas,// 添加控制板propertiesPanel: {parent: '#js-properties-panel'},additionalModules: [// 左边工具栏以及节点propertiesProviderModule,customTranslateModule]})this.createNewDiagram(xmlStr)},async createNewDiagram(xmlStr) {// 将字符串转换成图显示出来await this.bpmnModeler.importXML(xmlStr, (err) => {if (err) {} else {// 这里是成功之后的回调, 可以在这里做一系列事情this.addEventBusListener();}})}}
}
</script>

2. 节点的事件或方法：

// 监听 element

const eventBus = this.bpmnModeler.get('eventBus');

//  获取流程的所有元素

const elements = this..bpmnModeler.get('elementRegistry')._elements

//  监听流程节点内容发生改变的事件

this.bpmnModeler.on('commandStack.changed', async function() {}）

//  格式化保存流程图为xml文件

this..bpmnModeler.saveXML({ format: true }, async function(err, xml) {})

// 得到流程xml的name的集合
getXmlName(xmlString) {const parser = new DOMParser();const xmlDoc = parser.parseFromString(xmlString, 'text/xml')const nodes = xmlDoc.querySelectorAll('*[name]');const names = Array.from(nodes).map(node => node.getAttribute('name'))return names
}addEventBusListener() {// 监听 elementconst eventBus = this.bpmnModeler.get('eventBus');const eventTypes = ['element.click', 'element.changed', 'element.updateLabel'];let that = this;eventTypes.forEach(function(eventType) {eventBus.on(eventType, async function(e) {if (!e) return;const type = e.element.type  // 选中元素的类型that.selected = typeof e.element.parent !== 'undefined' // 判断是否选中元素if (eventType === 'element.changed') {} else if (eventType === 'element.click') {}})})// 修改节点内容事件this.bpmnModeler.on('commandStack.changed', async function() {await that.bpmnModeler.saveXML({ format: true }, async function(err, xml) {let allElementId = []for (let i in that.bpmnModeler.get('elementRegistry')._elements) {if (i === 'StartEvent_1y45yut' || i.indexOf('Task_') > -1 || i.indexOf('Activity_') > -1 || (i.indexOf('Gateway_') > -1 && i.indexOf('label') === -1)) {allElementId.push(i)}}if (that.getXmlName(xml).length < allElementId.length) {// name为空,给name赋值idlet newxml = xml.replace(('id="' + allElementId[allElementId.length - 1] + '"'), ('id="' + allElementId[allElementId.length - 1] + '" name="' + allElementId[allElementId.length - 1] + '"'))that.bpmnModeler.clear();await that.bpmnModeler.importXML(newxml);}that.camunda.process.processXml = xmlthat.updateNodes(that.bpmnModeler.get('elementRegistry')._elements, that.getXmlName(xml))})})
}

3.bpmn官网：BPMN Editor | bpmn-js modeler Demo | demo.bpmn.io

4.流程设定可参考简道云的设计，简道云的网址：简道云登录_简道云系统入口_零代码平台登录_无代码平台登录-简道云