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);

}

}