安装
npm install --save bpmn-js
在需要使用bpmn.js的页面引入bpmn-js的组件，需要编辑就引入Modeler，如果只需要预览就引入Viewer就可以 .
关键代码
<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>
预览
