Vue项目使用bpmn预览流程图

npm install --save bpmn-js

<template>
  <my-dialog :visible="isDialogVisible" :title="'经办进度'" size="big" @closed="closed">
    <div class="box" style="height: auto">
      <title-box title-name="执行流程" />
      <div class="main-box">
        <div class="canvas-tools">
          <div class="tools">
            <i class="el-icon-zoom-in" @click="handleZoom(0.05)" />
            <i class="el-icon-zoom-out" @click="handleZoom(-0.05)" />
            <i class="el-icon-refresh" @click="handleZoom(0)" />
          </div>
          <div class="status">
            <div class="finished">已完成</div>
            <div class="going">进行中</div>
            <div class="nostart">未执行</div>
          </div>
        </div>
        <div ref="canvas" class="canvas" />
      </div>
      <div class="box" style="height: auto">
        <title-box title-name="流程节点列表" />
        <MyTable v-loading="loading" :columns="columns" :data="tableData" />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closed">关闭</el-button>
    </span>
  </my-dialog>
</template>
<script>
import BpmnViewer from 'bpmn-js/lib/Viewer'
import { getHilightProcessInfo } from './Mock.js'
export default {
  name: 'JobDetail',
  model: {
    prop: 'isDialogVisible',
    event: 'closeAll'
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    isDialogVisible: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      default: '标题'
    },
    acceptCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      bpmnViewer: null,
      scale: 1,
      xmlUrl: '',
      columns: [
        { type: 'index', label: '序号', fixed: 'left', sortable: true },
        {
          prop: 'processNodeName',
          label: '经办环节',
          align: 'center',
          minWidth: '120px'
        },
        { prop: 'assignee', label: '经办人', minWidth: '160px' },
        {
          prop: 'startTime',
          label: '经办时间',
          minWidth: '80px',
          type: 'date'
        },
        { prop: 'handleResult', label: '经办结果', minWidth: '180px' },
        { prop: 'comment', label: '办理意见', minWidth: '180px' }
      ],
      tableData: [],
      completedIds: []
    }
  },
  watch: {
    isDialogVisible(v) {
      v && this.getHilightProcessInfo()
    }
  },
  mounted() {
    // 初始请求
    this.getHilightProcessInfo()
  },
  methods: {
    getHilightProcessInfo() {
      const params = {
        acceptCode: this.acceptCode
      }
      getHilightProcessInfo(params).then((res) => {
        this.completedIds = res.data.completedIds
        this.tableData = res.data.processLogs
        this.xmlUrl = res.data.modelXml
        this.getXmlUrl()
      })
    },
    getXmlUrl() {
      // 初始时清除图层
      this.bpmnViewer && this.bpmnViewer.destroy()
      this.$refs.canvas.innerHTML = ''
      this.scale = 1 // 放大缩小比例
      // 初始化canvas
      this.bpmnViewer = new BpmnViewer({
        container: this.$refs.canvas,
        height: 240 // 根据实际情况设置高度，宽度的话设置父元素的宽度就可以，会自适应的
      })
      const self = this
      const bpmnXmlStr = this.xmlUrl // 从接口获取的xml文件
      this.bpmnViewer.importXML(bpmnXmlStr, function(err) {
        if (err) {
          console.error(err)
        } else {
          const canvas = self.bpmnViewer.get('canvas')
          canvas.zoom('fit-viewport', 'auto')
          // nodeCodes为需要设置高亮颜色的部分的id的集合（xml文件中<flowNodeRef>****</flowNodeRef>标签里的部分），这个数据也是从接口获取，这里从xml中随便取出几个测试用

          // const nodeCodes = [
          //   'Activity_1d2rrr0',
          //   'StartEvent_1',
          //   'Activity_1d2wp4b'
          // ]
          console.log(self.completedIds)
          // 调用设置高亮颜色class方法,这里可以根据接口获取的id集合情况，对不同的部分设置不同的class名，然后在css中设置样式
          self.setNodeColor(self.completedIds, 'nodeSuccess', canvas)
        }
      })
    },
    // 设置高亮颜色的class
    setNodeColor(nodeCodes, colorClass, canvas) {
      for (let i = 0; i < nodeCodes.length; i++) {
        canvas.addMarker(nodeCodes[i], colorClass)
      }
    },
    closed() {
      this.$emit('update:isDialogVisible', false)
      this.$emit('closed')
      this.$emit('closeAll', false)
    },
    // 放大缩小，这里尽量设置flag的值小一点，这样每次放大缩小不会很多，避免放大超出父元素
    handleZoom(flag) {
      this.scale += flag
      if (!flag) {
        this.scale = 1
      }

      if (this.scale < 1) {
        this.scale = 1
        return
      }

      // 不让再放大
      if (this.scale > 1.2) {
        this.scale = 1.2
        return
      }
      this.$nextTick(() => {
        this.bpmnViewer.get('canvas').zoom(this.scale)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.containerBox {
  position: relative;
  #container {
    height: 200px;
  }
}
::v-deep .nodeSuccess:not(.djs-connection) {
  .djs-visual {
    > :nth-child(1) {
      stroke: #00be00 !important;
      stroke-width: 2px !important;
      fill: #7dd87e !important;
    }
  }
}

::v-deep .djs-shape {
  // transform: matrix(1, 0, 0, 1, -4, 64);
}

.main-box {
  padding: 10px;
  height: calc(100% - 50px);
  background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
  background-image: linear-gradient(to right, #dfdfdf 1px, transparent 1px),
    linear-gradient(to bottom, #dfdfdf 1px, transparent 1px),
    linear-gradient(to right, #f1f1f1 1px, transparent 1px),
    linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
  background-position: left -1px top -1px, left -1px top -1px,
    left -1px top -1px, left -1px top -1px;
}

.canvas-tools {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .tools {
    display: flex;
    position: absolute;
    left: 10px;
    top: 0;
  }
  i {
    font-size: 16px;
    padding: 0 5px;
    cursor: pointer;
    &:hover {
      color: #333;
    }
  }

  .status {
    display: flex;
    .finished {
      color: #00be00;
      border-left: 20px solid #00be00;
      padding-left: 5px;
    }

    .going {
      color: #d67e7d;
      border-left: 20px solid #d67e7d;
      margin-left: 12px;
      padding-left: 5px;
    }

    .nostart {
      color: #585858;
      border-left: 20px solid #585858;
      margin-left: 12px;
      padding-left: 5px;
    }
  }
}
//去除bpmn的logo,很可能产生侵权，内网无影响
::v-deep .bjs-container {
  a {
    display: none !important;
  }
}
</style>