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

vue项目中使用bpmn-流程图预览篇 内容概述

本系列 “vue项目中使用bpmn-xxxx” 分为七篇，均为自己使用过程中用到的实例，手工原创，目前陆续更新中。

主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

如果转载或通过爬虫直接爬的，格式特别丑，请来原创看：我是作者原文

前情提要

上文已经实现了节点 *** 作的前进、后退、导入。

导出等 *** 作，今日来实现“流程图预览”，以及视图的放大缩小,效果如下：

前提：项目安装过bpmn，安装可见上篇文章

实现要点

bpmn提供了两个神器：Modeler 和 Viewer，Modeler带有左侧节点栏和右侧属性栏，点击节点可进行相应 *** 作，Viewer是“查看”，不能更改节点，两者相互独立，可按实际需求按需引入

绘制流程图：import BpmnModeler from 'bpmn-js/lib/Modeler';

预览流程图：import BpmnViewer from 'bpmn-js/lib/Viewer';

直接上代码：

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

后续

currentCanvasXml 为预览的xml文件数据，由于行数过多，附在了附件中（点我！点我！），使用时，将整个赋值到currentCanvasXml，代码才可以运行，否则报错！！

想获取完整源码或有问题，欢迎大家关注我的公粽号，扫下面二维码或微信搜“Lemoncool”，即可获取~

可爱的你可能还需要

• vue项目中使用bpmn-番外篇(留言问题总结)
• vue项目中使用bpmn-流程图json属性转xml（七篇更新完成）
• vue项目中使用bpmn-流程图xml文件中节点属性转json结构
• vue项目中使用bpmn-自定义platter
• vue项目中使用bpmn-节点添加颜色
• vue项目中使用bpmn-节点篇（为节点添加点击事件、根据id找节点实例、更新节点名字、获取指定类型的所有节点）
• vue项目中使用bpmn-基础篇