java中bpmn流程图_vue项目中使用bpmn-流程图预览篇

预览

放大

缩小

>

import BpmnViewer from'bpmn-js/lib/Viewer';

exportdefault{

data() {return{

containerEl:null,

bpmnModeler:null,

scale:1,//此变量为预览的xml文件数据，由于行数过多，附在了附件中，使用时，将附件整个复值到currentCanvasXml即可

currentCanvasXml: ''};

},

methods: {

handleZoom(flag) {if (flag < 0 && this.scale <= 1) {return;

}this.scale +=flag;this.$nextTick(() =>{this.bpmnModeler.get('canvas').zoom('fit-viewport');

});

},

previewTemp() {this.containerEl = document.getElementById('container');//避免缓存，每次清一下

this.bpmnModeler && this.bpmnModeler.destroy();this.scale = 1;this.bpmnModeler = new BpmnViewer({container: this.containerEl});

const viewer= this.bpmnModeler;this.bpmnModeler.importXML(this.currentCanvasXml, (err) =>{if(err) {

console.error(err);

}else{//只实现预览，核心代码以下两句足够

const canvas = viewer.get('canvas');

canvas.zoom('fit-viewport');//以下代码为：为节点注册鼠标悬浮事件

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

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

eventBus.on('element.hover', (e) =>{

const $overlayHtml= jquery(`

你好，我是悬浮框里的内容

`);

overlays.add(e.element.id, {

position: {top: e.element.height, left:0},

html: $overlayHtml

});

});

eventBus.on('element.out', () =>{

overlays.clear();

});//注册悬浮事件结束

}

});

}

}

};

.tipBox {

200px;

background: #fff;

border-radius: 4px;

border: 1px solid #ebeef5;

padding: 12px;

}

}