bpmn流程图

weixin_48399505

已于 2023-10-18 14:42:29 修改

阅读量466

点赞数

文章标签：流程图

于 2023-10-18 14:36:25 首次发布

本文链接：https://blog.csdn.net/weixin_48399505/article/details/133904884

版权

1.流程图设计
安装 workflow-bpmn-modeler ElementUI

<template>
    <div class="about">
        <bpmn-modeler ref="refNode" :xml="xml" :users="users" :groups="groups" :categorys="categorys" @save='save'/>
    </div>
</template>
<script>
    import bpmnModeler from 'workflow-bpmn-modeler'
    export default {
        name: '',
        components: {
            bpmnModeler
        },
        data () {
            return {
                xml: '', // 后端查询到的xml
                users: [
                    { name: '张三', id: 'zhangsan' },
                    { name: '李四', id: 'lisi' },
                    { name: '王五', id: 'wangwu' }
                ],
                groups: [
                    { name: 'web组', id: 'web' },
                    { name: 'java组', id: 'java' },
                    { name: 'python组', id: 'python' }
                ],
                categorys: [
                    { name: 'OA', id: 'oa' },
                    { name: '财务', id: 'finance' }
                ]
            }
        },
        mounted () { },
        methods: {
            getModelDetail () {
                // 发送请求，获取xml
                // this.xml = response.xml
            },
            async  save () {
                const processModel = this.$refs.refNode.getProcess()
                const xml = await this.$refs.refNode.saveXML()
                console.log(processModel, xml)
            }
        }
    }
</script>
<style lang="less" scoped></style>

展示
在这里插入图片描述

2.显示流程图

<template>
  <div class="show-page">
    <div id="bpmnCanvas" ref="canvas"></div>
  </div>
</template>

<script>
    import BpmnViewer from 'bpmn-js/lib/Viewer';
    import { xmlData } from '@/assets/xml/data.js'
    export default {
        name: '',
        components: {},
        data () {
            return {
                bpmnViewer: null,
                highPoint: ['Activity_1ydv5gl', 'Activity_0jwzd7q']
            }
        },
        mounted () {
            this.handleInit()
        },
        methods: {
            // 初始化
            handleInit () {
                const canvas = this.$refs.canvas;
                this.bpmnViewer = new BpmnViewer({
                    container: canvas
                });
                this.createNewDiagram(xmlData);
            },
            async createNewDiagram (bpmn) {
                // 将字符串转换成图显示出来;
                try {
                    await this.bpmnViewer.importXML(bpmn);
                    // 处理节点高亮
                    this.addMarker();
                    // 给任务节点加备注
                    this.bindEvents();
                } catch (err) {
                    console.log('打开模型出错,请确认该模型符合Bpmn2.0规范');
                }
            },
            // 处理节点高亮
            addMarker () {
                const canvas = this.bpmnViewer.get('canvas');
                canvas.zoom('fit-viewport', 'auto');
                // 需要高亮的节点id
                const value = {
                    highLine: ['Event_0pl8qcw', 'Flow_1nqxb28', 'Flow_1rfbfxg'],
                    highPoint: this.highPoint,
                    waitingToDo: ['Activity_0gv9jfq']
                };
                // 高亮线
                value.highLine.forEach((e) => {
                    if (e) {
                        canvas.addMarker(e, 'highlightFlow');
                    }
                });
                // 高亮任务
                value.highPoint.forEach((e) => {
                    if (e) {
                        canvas.addMarker(e, 'highlightLine');
                    }
                });
                // 高亮下一个任务
                value.waitingToDo.forEach((e) => {
                    if (e) {
                        canvas.addMarker(e, 'highlightTODO');
                    }
                });
            },
            // 给任务节点加备注
            bindEvents () {
                const overlays = this.bpmnViewer.get('overlays');
                this.genNodeDetailBox(overlays);
            },
            // 节点
            genNodeDetailBox (overlays) {
                let popoverEl = null;
                this.highPoint.forEach((item) => {
                    popoverEl = '<div class="container">备注</div>';
                    overlays.add(item, {
                        position: { bottom: 0, left: 0 },
                        html: popoverEl
                    });
                });
            }
        }
    }
</script>

<style lang="less" scoped>
.show-page,#bpmnCanvas{
    width: 100%;
    height: 100%;
}
#bpmnCanvas {
  width: 100%;
  height: 100%;

  /deep/.bjs-powered-by {
    display: none !important;
  }

  /deep/.djs-container {
    /*流程高亮*/
    .highlightLine .djs-visual > :nth-child(1) {
      stroke: rgba(1, 178, 157, 1) !important;
    }

    .highlightFlow .djs-outline > :nth-child(1) {
      stroke: rgba(1, 178, 157, 1) !important;
    }

    .highlightFlow .djs-visual > :nth-child(1) {
      stroke: rgba(1, 178, 157, 1) !important;
    }

    .highlightTODO .djs-visual > :nth-child(1) {
        stroke: rgba(0, 194, 237, 1) !important;
        fill: rgba(108, 228, 254, 1) !important;
    }
  }
}
/deep/.container{
    width: 100px;
    height: 80px;
    margin-top: 30px;
    line-height: 80px;
    border-radius: 7px;
    text-align: center;
    border: 2px solid rgba(1, 178, 157, 1);
}
</style>

展示
在这里插入图片描述
data.js

<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.flowable.org/processdef">
  <process id="process_542vepmg" name="name_juqcupfg">
    <startEvent id="Event_0pl8qcw">
      <outgoing>Flow_1nqxb28</outgoing>
    </startEvent>
    <task id="Activity_1ydv5gl" name="第一步">
      <incoming>Flow_1nqxb28</incoming>
      <outgoing>Flow_1rfbfxg</outgoing>
    </task>
    <sequenceFlow id="Flow_1nqxb28" sourceRef="Event_0pl8qcw" targetRef="Activity_1ydv5gl" />
    <task id="Activity_0jwzd7q" name="第二步">
      <incoming>Flow_1rfbfxg</incoming>
      <outgoing>Flow_0ssaacy</outgoing>
    </task>
    <sequenceFlow id="Flow_1rfbfxg" sourceRef="Activity_1ydv5gl" targetRef="Activity_0jwzd7q" />
    <task id="Activity_0gv9jfq" name="第三步">
      <incoming>Flow_0ssaacy</incoming>
      <outgoing>Flow_05hclu1</outgoing>
    </task>
    <sequenceFlow id="Flow_0ssaacy" sourceRef="Activity_0jwzd7q" targetRef="Activity_0gv9jfq" />
    <task id="Activity_1pio25h" name="第四步">
      <incoming>Flow_05hclu1</incoming>
      <outgoing>Flow_0wbr510</outgoing>
    </task>
    <sequenceFlow id="Flow_05hclu1" sourceRef="Activity_0gv9jfq" targetRef="Activity_1pio25h" />
    <endEvent id="Event_0kiamxd">
      <incoming>Flow_0wbr510</incoming>
    </endEvent>
    <sequenceFlow id="Flow_0wbr510" sourceRef="Activity_1pio25h" targetRef="Event_0kiamxd" />
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">
    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="process_542vepmg">
      <bpmndi:BPMNEdge id="Flow_1nqxb28_di" bpmnElement="Flow_1nqxb28">
        <di:waypoint x="-242" y="90" />
        <di:waypoint x="-190" y="90" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1rfbfxg_di" bpmnElement="Flow_1rfbfxg">
        <di:waypoint x="-90" y="90" />
        <di:waypoint x="-30" y="90" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0ssaacy_di" bpmnElement="Flow_0ssaacy">
        <di:waypoint x="70" y="90" />
        <di:waypoint x="130" y="90" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_05hclu1_di" bpmnElement="Flow_05hclu1">
        <di:waypoint x="230" y="90" />
        <di:waypoint x="290" y="90" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0wbr510_di" bpmnElement="Flow_0wbr510">
        <di:waypoint x="390" y="90" />
        <di:waypoint x="452" y="90" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="Event_0pl8qcw_di" bpmnElement="Event_0pl8qcw">
        <omgdc:Bounds x="-278" y="72" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_1ydv5gl_di" bpmnElement="Activity_1ydv5gl">
        <omgdc:Bounds x="-190" y="50" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0jwzd7q_di" bpmnElement="Activity_0jwzd7q">
        <omgdc:Bounds x="-30" y="50" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0gv9jfq_di" bpmnElement="Activity_0gv9jfq">
        <omgdc:Bounds x="130" y="50" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_1pio25h_di" bpmnElement="Activity_1pio25h">
        <omgdc:Bounds x="290" y="50" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_0kiamxd_di" bpmnElement="Event_0kiamxd">
        <omgdc:Bounds x="452" y="72" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>