bpmn2 vue 设计器_vue项目中使用bpmn-基础篇
后退
前进
下载
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);
}
}
总结
以上是生活随笔为你收集整理的bpmn2 vue 设计器_vue项目中使用bpmn-基础篇的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： DDOS攻击检测（排查ddos攻击）
- 下一篇： json请求 post vue_Spri