vue项目中使用bpmn-流程图预览篇
Posted lemoncool
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中使用bpmn-流程图预览篇相关的知识,希望对你有一定的参考价值。
前情提要
上文已经实现了节点操作的前进、后退、导入。导出等操作,今日来实现“流程图预览”,以及视图的放大缩小
前提:项目安装过bpmn,安装可见上篇文章
实现要点
bpmn提供了两个神器:Modeler 和 Viewer,Modeler带有左侧节点栏和右侧属性栏,点击节点可进行相应操作,Viewer是“查看”,不能更改节点,两者相互独立,可按实际需求按需引入
绘制流程图:import BpmnModeler from ‘bpmn-js/lib/Modeler‘;
预览流程图:import BpmnViewer from ‘bpmn-js/lib/Viewer‘;
直接上代码:
View Code
<template> <div class="container"> <el-button type="primary" @click="previewTemp">预览</el-button> <el-button type="success" @click="handleZoom(1)">放大</el-button> <el-button type="warning" @click="handleZoom(-1)">缩小</el-button> <div class="chart-preview"> <div style="clear: both;"></div> <div class="view-canvas"> <div id="container" v-bind:style="{width: 100 * scale + ‘%‘,height: 100 * scale + ‘%‘}" ></div> </div> </div> </div> </template> <script> import jquery from ‘jquery‘; import BpmnViewer from ‘bpmn-js/lib/Viewer‘; export default { 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(` <div class="tipBox"> 你好,我是悬浮框里的内容 </div>`); overlays.add(e.element.id, { position: {top: e.element.height, left: 0}, html: $overlayHtml }); }); eventBus.on(‘element.out‘, () => { overlays.clear(); }); // 注册悬浮事件结束 } }); } } }; </script> <style lang="scss"> .container { .tipBox { width: 200px; background: #fff; border-radius: 4px; border: 1px solid #ebeef5; padding: 12px; } } </style>
tips
currentCanvasXml 为预览的xml文件数据,由于行数过多,附在了附件中(点我!点我!),使用时,将整个赋值到currentCanvasXml,代码才可以运行,否则报错!!
以上是关于vue项目中使用bpmn-流程图预览篇的主要内容,如果未能解决你的问题,请参考以下文章
springboot整合activiti+bpmn-js或VUE(架构搭建篇)