bpmn2 vue 设计器_vue项目中使用bpmn-基础篇-CSDN博客

本文链接：https://blog.csdn.net/weixin_39999586/article/details/111968624

本文介绍了如何在Vue项目中使用BPMN2设计器，通过引入CustomPaletteProvider和camundaExtension模块，实现流程图的创建、撤销、重做、下载和导入功能。同时，详细展示了相关代码实现，包括文件读取、XML数据处理和UI交互操作。

摘要由CSDN通过智能技术生成

后退

前进

下载

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"

导入

import CustomPaletteProvider from'./customPalette';

import camundaExtension from'./resources/camunda';

exportdefault{

name:'index',

data() {return{

containerEl:null,

bpmnModeler:null,

fileList: []

};

mounted() {this.containerEl = document.getElementById('container');this.bpmnModeler = newBpmnModeler({

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= newFileReader();

let data= '';

reader.readAsText(file.raw);

reader.οnlοad= (event) =>{

data=event.target.result;this.bpmnModeler.importXML(data, (err) =>{if(err) {this.$message.info('导入失败');

}else{this.$message.success('导入成功');

}

});

};

}

height: calc(100vh-220px);

position: relative;

#container {

height: calc(100% -50px);

}