1. 需求
引入流程图设计
用户任务的候选组默认是输入框，将它改为下拉选择
生成bpmn文件（xml格式）传给后端
2. 添加package.json依赖
"bpmn-js": "^7.3.1","bpmn-js-properties-panel": "^0.37.2","camunda-bpmn-moddle": "^7.0.1",
3. 封装组件（完整代码）
3.1 bpmn-modeler.vue
<template><div><div ref="canvas"></div><divref="panel"class="bpmn-js-properties-panel"id="js-properties-panel"autocomplete="off"></div><ul><li><cbn-button @click="$refs.refFile.click()">加载本地BPMN文件</cbn-button><input type="file" ref="refFile" @change="loadXML" /></li><li><cbn-button @click="saveXML" title="保存为bpmn">保存为BPMN文件</cbn-button></li><li><cbn-button @click="saveSVG" title="保存为svg">保存为SVG图片</cbn-button></li><li><cbn-button @click="handlerUndo" title="撤销操作">撤销</cbn-button></li><li><cbn-button @click="handlerRedo" title="恢复操作">恢复</cbn-button></li><li><cbn-button @click="handlerZoom(0.1)" title="放大">放大</cbn-button></li><li><cbn-button @click="handlerZoom(-0.1)" title="缩小">缩小</cbn-button></li><li><cbn-button @click="handlerZoom(0)" title="还原">还原大小</cbn-button></li><li><cbn-button @click="handlerCenter" title="还原">居中</cbn-button></li></ul><user-task-dialogv-model="userTaskVisible":formData="formData"@changeFormData="changeFormData"></user-task-dialog></div></template><script>import BpmnModeler from pmn-js/lib/Modelerimport { xmlStr } from ./defaultXmlStrimport customTranslate from ./customTranslateimport propertiesProviderModule from pmn-js-properties-panel/lib/provider/camundaimport propertiesPanelModule from pmn-js-properties-panelimport camundaModdleDescriptor from camunda-bpmn-moddle/resources/camundaimport UserTaskDialog from ./user-task-dialog.vue// 以下为bpmn工作流绘图工具的样式import pmn-js/dist/assets/diagram-js.css // 左边工具栏以及编辑节点的样式import pmn-js/dist/assets/bpmn-font/css/bpmn.cssimport pmn-js/dist/assets/bpmn-font/css/bpmn-codes.cssimport pmn-js/dist/assets/bpmn-font/css/bpmn-embedded.cssimport pmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.cssexport default {name: pmn-modeler,components: { UserTaskDialog },mounted() {this.init()},data() {return {bpmnModeler: null,canvas: null,xmlStr: xmlStr,scale: 1,currentElement: null,userTaskVisible: false,formData: {roleId: [],},}},methods: {init() {this.canvas = this.$refs.canvasthis.bpmnModeler = new BpmnModeler({container: this.canvas,// 加入工具栏支持propertiesPanel: {parent: #js-properties-panel,},additionalModules: [propertiesProviderModule,propertiesPanelModule,{// 汉化translate: [value, customTranslate],},],/*** 键盘快捷键* ctrl + z : 撤销ctrl + y : 恢复ctrl + c : 复制ctrl + v : 粘贴ctrl + + : 放大ctrl + - : 缩小ctrl + 0 : 恢复ctrl + del : 删除ctrl + 箭头 : 上下左右移动*/keyboard: {bindTo: window,},moddleExtensions: {camunda: camundaModdleDescriptor,},})this.createNewDiagram()},async createNewDiagram() {try {const result = await this.bpmnModeler.importXML(this.xmlStr)const { warnings } = resultconsole.log(warnings)this.success()} catch (err) {console.log(err.message, err.warnings)}},success() {this.addModelerListener()this.addEventBusListener()this.addPanelListener()this.handlerCenter()},async loadXML() {const that = thisconst file = this.$refs.refFile.files[0]var reader = new FileReader()reader.readAsText(file)reader.onload = function () {that.xmlStr = that.reformXML(this.result)console.log(加载xml)console.log(that.xmlStr)that.createNewDiagram()}},async saveXML() {try {const result = await this.bpmnModeler.saveXML({ format: true })let { xml } = resultxml = this.formXML(xml)var xmlBlob = new Blob([xml], {type: application/bpmn20-xml;charset=UTF-8,,})var downloadLink = document.createElement(a)downloadLink.download = ops-coffee-bpmn.bpmndownloadLink.innerHTML = Get BPMN SVGdownloadLink.href = window.URL.createObjectURL(xmlBlob)downloadLink.onclick = function (event) {document.body.removeChild(event.target)}downloadLink.style.visibility = hiddendocument.body.appendChild(downloadLink)downloadLink.click()} catch (err) {console.log(err)}},async saveSVG() {try {const result = await this.bpmnModeler.saveSVG()const { svg } = resultvar svgBlob = new Blob([svg], {type: image/svg+xml,})var downloadLink = document.createElement(a)downloadLink.download = ops-coffee-bpmn.svgdownloadLink.innerHTML = Get BPMN SVGdownloadLink.href = window.URL.createObjectURL(svgBlob)downloadLink.onclick = function (event) {document.body.removeChild(event.target)}downloadLink.style.visibility = hiddendocument.body.appendChild(downloadLink)downloadLink.click()} catch (err) {console.log(err)}},handlerRedo() {this.bpmnModeler.get(commandStack).redo()},handlerUndo() {this.bpmnModeler.get(commandStack).undo()},handlerZoom(radio) {const newScale = !radio ? 1.0 : this.scale + radiothis.bpmnModeler.get(canvas).zoom(newScale)this.scale = newScale},handlerCenter() {let canvas = this.bpmnModeler.get(canvas)canvas.zoom(fit-viewport, auto)},addPanelListener() {let panelDom = document.getElementById(js-properties-panel)panelDom.addEventListener(click, this.setPanelRoleIds)},setPanelRoleIds(e) {console.log(e)if (e.target.id === camunda-candidateGroups) {e.target.autocomplete = offlet value = e.target.valueif (value) {value = value.split(,)}this.formData.roleId = valuethis.userTaskVisible = true}},addModelerListener() {const that = thisthat.bpmnModeler.on(element.click, (e) => {console.log(modelerListener, e)})that.bpmnModeler.on(shape.added, (e) => {that.elementClick(e)})},addEventBusListener() {const that = thisconst eventBus = this.bpmnModeler.get(eventBus)eventBus.on(element.click, function (e) {that.elementClick(e)})},elementClick(e) {const that = thisif (e.element.businessObject.$type === pmn:UserTask) {that.currentElement = e.element} else {that.currentElement = null}},formXML(data) {let temp = data.replace(/camunda:/gi, activiti:)temp = temp.replace(/formField/gi, formProperty)temp = temp.replace(/<activiti:FormData>/gi, \)temp = temp.replace(/<\/activiti:FormData>/gi, \)return temp},// 回显的时候activiti转camundareformXML(data) {let temp = data.replace(/activiti:/gi, camunda:)temp = temp.replace(/formProperty/gi, formField)temp = temp.replace(/<extensionElements>/gi, `<extensionElements><camunda:FormData>`)temp = temp.replace(/<\/extensionElements>/gi, `</camunda:FormData></extensionElements>`)return temp},changeFormData(params) {// 弹框设置const modeling = this.bpmnModeler.get(modeling)if (this.currentElement) {modeling.updateProperties(this.currentElement, {candidateGroups: params.roleId.join(,),})}},},destroyed() {let panelDom = document.getElementById(js-properties-panel)if (panelDom.removeEventListener) {panelDom.removeEventListener(click, this.setPanelRoleIds)}},}</script><style scoped>.containers {width: 100%;height: 100%;position: relative;/* 以下是设置网格线样式 */background: white;overflow: auto;background-image: linear-gradient(90deg, rgba(220, 220, 220, 0.5) 6%, transparent 0),linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0);background-size: 12px 12px;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}.canvas {width: 100%;height: 100%;}.buttons {position: absolute;left: 20px;bottom: 20px;}.buttons li {display: inline-block;margin: 5px;}#js-properties-panel {position: absolute;top: 0;right: 20px;height: 100%;overflow: auto;border:
