目录

1.前言

2.安装相关依赖

3.组件部分的template部分

4.组件中的script

5.style代码

6.父组件中的使用场景

7.注意事项

---

1.前言

由于此次处于自己做项目阶段，基本上只要项目中需要使用到流程这一方面的东西，就需要用到bpmn以及后端的activity流，网络上大多数都是vue2的写法，而且方法都是写一半一半的，并且bpmn的官方文档也都是英文，所以我自己封装了一个bpmn的组件，我的项目中使用在了elementui中的dialog中。

请多多点赞收藏，作者不易，谢谢大家，注解全写在代码中，很详细，若还有疑问欢迎讨论区见。

2.安装相关依赖

 c-scrollbar这个包是我为了让右侧的属性栏实现滚动效果而导入的，具体详情可以百度搜索c-scrollbar的用法，我这边只是简单使用

3.组件部分的template部分

<template>
    <div class="container" style="position:relative;height:550px;">
        //此处必须ref绑定，这样才能获取到dom元素，才能后面的操作
        <div class="canvas" ref="canvas"></div>
        //此处简单使用scrollbar，此处为右侧属性栏的html代码
        <el-scrollbar height="93%" style="width:300px; position:absolute;top:0px;right:0px;">
            <div id="js-properties-panel" class="panel"></div>
        </el-scrollbar>
        //此处我放置了几个按钮，导出和部署，导出的ref绑定也是必要的
        <ul class="buttons">
            <li class="item download">
                <a class="btn" @click="exportBPMN" ref="exportbtn">导出</a>
            </li>
            <li class="item submit" v-if="props.isAdd">
                <a class="btn" @click="deploy">
                    部署
                </a>
            </li>
        </ul>
    </div>
</template>

4.组件中的script

<script setup>
import { ref, onMounted } from 'vue'
// 绘制流程图
import BpmnModeler from 'bpmn-js/lib/Modeler'
//此处是个后端书写的接口作用是：（将我这边将bpmn保存为xml的文件存入到数据库中）
import { addDeploymentByString } from "@/api/activiti/definition";
// 预览流程图
import BpmnViewer from "bpmn-js/lib/Viewer"
//右侧属性栏
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
// 汉化组件
import customTranslate from './customTranslate/customTranslate';
//汉化组件的引入使用
var customTranslateModule = {
    translate: ['value', customTranslate]
};
const props = defineProps({
    //xml字符串用于后面创建转化显示
    xmlStr: {
        type: String,
        default: ""
    },
    //是否为查看
    isPreview: {
        type: Boolean,
        default: true
    },
    //是否为新增
    isAdd: {
        type: Boolean,
        default: false
    },
    //高亮节点数组
    highPoint: {
        type: Array,
        default: []
    },
    //当前用户所处理节点数组
    iDo: {
        type: Array,
        default: []
    },
    //等待处理节点数组
    waitingToDo: {
        type: Array,
        default: []
    },
    //高亮线数组
    highLine: {
        type: Array,
        default: []
    },
});
let exportbtn = ref(null)
let bpmnModeler = ref(null);
let container = ref(null);
let canvas = ref(null);
//此处定义了子组件向父组件传递事件作用是（将dialog框不显示，然后刷新列表）此处事件应写在父组件
const emits = defineEmits(["handleExportSuccess"]);
//挂载时初始化
onMounted(() => {   
    init()
})
//更新时初始化
onUpdated(() => {
    //更新时先销毁原实例
    bpmnModeler.destroy()
    init()
})
function init() {
    if (props.isPreview) {
        //预览时候创建实例为BpmnViewer
        bpmnModeler = new BpmnViewer({ // 仅预览
            container: canvas.value
        })
    } else {
        //可操作时候创建实例为BpmnModeler
        bpmnModeler = new BpmnModeler({
            container: canvas.value,
            propertiesPanel: {
                parent: '#js-properties-panel'
            },
            additionalModules: [
                //右侧工具栏以及节点
                propertiesProviderModule,
                propertiesPanelModule,
                //汉化
                customTranslateModule
            ],
            moddleExtensions: {
                camunda: camundaModdleDescriptor
            }

        })
    }
    createNewDiagram()
}
// 将字符串转换成图显示出来
function createNewDiagram() {
    let xmlStrChange = '`' + props.xmlStr + '`'
    //此处判断是否是新增，若是新增固定一个xml的字符串，若字符串为空，那么久无法在画布上编辑，所以我下面就赋值了一个只存在一个节点的xml字符串
    if (props.isAdd) {
        //bpmn2:process属性修改为isExecutable="true就可以默认勾选可执行文件
        xmlStrChange = `
<?xml version="1.0" encoding="UTF-8"?>
  <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
        xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
        xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
        id="sample-diagram"
        targetNamespace="http://bpmn.io/schema/bpmn"
        xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="Process_1" isExecutable="true">
    <bpmn2:startEvent id="StartEvent_1" />
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="192" y="82" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>`
    }
    //importXML()方法后的第一个参数是一个xml字符串，第二个参数为回调err为失败时候的信息
    bpmnModeler.importXML(xmlStrChange, (err) => {
        if (err) {
            console.error(err)
        } else {
            //通常这里会写个成功时候的回调，但是我的组件分为预览与新增，所以我这边判断是否为预览，预览的话进行节点颜色改变等
            if (props.isPreview) {
                //此处获取画布对象，用于后面的节点颜色改变
                const bpmnCanvas = bpmnModeler.get('canvas')
                //获取需要高亮显示的节点
                let highPointNode = props.highPoint;
                let highLineNode = props.highLine;
                let iDoNode = props.iDo
                let waitingToDoNode = props.waitingToDo
                //画布居中显示
                bpmnCanvas.zoom('fit-viewport', 'auto')
                //设置节点颜色，setNodeColor具体查看下面的函数
                setNodeColor(highPointNode, "highlightPoint", bpmnCanvas);
                setNodeColor(highLineNode, "highlightLine", bpmnCanvas);
                setNodeColor(iDoNode, "highlightiDo", bpmnCanvas);
                setNodeColor(waitingToDoNode, "highlightiwaiting", bpmnCanvas);
            }
            // 这里是成功之后的回调, 可以在这里做一系列事情
            success()
        }
    })
}
function success() {
    // console.log('创建成功!')
}
//部署按钮事件
function deploy() {
    //获取bpmn产生的xml文件
    bpmnModeler.saveXML().then(res => {
        //此处为存入数据库的接口，此处需要你们后端根据自己项目去提供接口，有关activity流
        addDeploymentByString({
            stringBPMN: res.xml
        }).then(res => {
            console.log("产生成功");
        })

    })
    //向父组件传方法，用于后面的dialog消失以及列表更新
    emits("handleExportSuccess")
}
//导出按钮事件
function exportBPMN() {
    //saveXML为bpmn提供的api，用于保存为xml,并导出，第一个参数格式保存，正常一样，第二个参数的err为错误值，xml为导出的xml字符串
    bpmnModeler.saveXML({ format: true }, function (err, xml) {
        //此函数转码xml并下载，详情请看以下setEncoded定义
        setEncoded(
            exportbtn.value,
            "diagram.bpmn",
            //判断是否报错，报错则为null三元表达式
            err ? null : xml
        );
    });
    //向父组件传方法，用于后面的dialog消失以及列表更新
    emits("handleExportSuccess")
}
// 设置高亮颜色的class（nodeCodes为需要设置高亮的节点ID数组，colorClass为设置的类名，canvas为画布对象）类名详情请看style样式
function setNodeColor(nodeCodes, colorClass, canvas) {
    for (let i = 0; i < nodeCodes.length; i++) {
        if (nodeCodes[i] == null) {
            continue
        } else {
            canvas.addMarker(nodeCodes[i], colorClass);
        }

    }
}
// 转码xml并下载
// @param {object} link 按钮（需要是dom对象）
// @param {string} name 下载名称 （文件名）任取
// @param {string} data base64XML
function setEncoded(link, name, data) {
    var encodedData = encodeURIComponent(data);
    if (data) {
        link.href="data:application/bpmn20-xml;charset=UTF-8," + encodedData
        link.download=name
    }
};
</script>

5.style代码

<style lang="scss">
.container {
    width: 100%;
    height: 100%;

}
//以下几个都是设置的高亮，通过设置类名来控制高亮颜色，此处自定义，可以通过f12开发者工具查看类名来自己定义样式记得样式后面加上!important
//设置高亮点的样式颜色（对应组件参数中的highPoint）
.highlightPoint:not(.djs-connection) .djs-visual> :nth-child(1),
.highlightPoint:not(.djs-connection) .djs-visual>path {
    fill: #ebeaea !important;
    /* color elements as green */
    stroke: #ebeaea !important;
}

//设置高亮线的样式颜色（对应组件参数中的highLine）
.highlightLine {
    .djs-visual {
        path {
            fill: #008000 !important;
            stroke-width: 2px !important;
            stroke: #008000 !important;
            stroke-linejoin: round !important;
            marker-end: url("#sequenceflow-end-green-green-3lfjjpcx65dm9ix6p7cd7oo3y") !important;
        }
    }
}
//设置高亮IDO的样式颜色（对应组件参数中的iDo）
.highlightiDo:not(.djs-connection) .djs-visual> :nth-child(1),
.highlightiDo:not(.djs-connection) .djs-visual>path {
    fill: #a8d894 !important;
    /* color elements as green */
    stroke: #008000 !important;
}
//设置高亮waitingToDo的样式颜色（对应组件参数中的waitingToDo）
.highlightiwaiting:not(.djs-connection) .djs-visual> :nth-child(1),
.highlightiwaiting:not(.djs-connection) .djs-visual>path {
    fill: #ffff0d !important;
    /* color elements as green */
    stroke: #008000 !important;
}

.canvas {
    width: 100%;
    height: 100%;

}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);

    .panel {
        width: 300px;
    }

}


.buttons {
    position: absolute;
    bottom: 0px;

    li {
        /* display: inline-block; */
        margin-right: 10px;
        height: 26px;
        line-height: 26px;
        float: left;
        list-style: none;

        .btn {
            background: #00BCD4;
            border: none;
            outline: none;
            padding: 0px 10px;
            color: #fff;
            display: inline-block;
            opacity: 1;
            height: 26px;
            font-size: 14px;
            line-height: 26px;
        }
    }

}
</style>

6.父组件中的使用场景

通常会以对话框的形式使用

        

 <!-- 查看进度话框 -->
    <el-dialog v-model="modelVisible" title="进度查询" width="1480px" append-to-body>
      <BpmnView @handleExportSuccess="handleExportSuccess" :modelVisible="modelVisible" :iDo="iDo" :waitingToDo="waitingToDo" :highLine="highLine" :highPoint="highPoint" :xmlStr="xml" :isPreview="true" :isAdd="isAdd"></BpmnView>
    </el-dialog>

7.注意事项

1.此组件中包含了高亮显示节点的部分，若需要则直接复制，不需要则需删除对应内容，需要则要满足前面传的高亮节点数组

2.style不能加scoped不然高亮无法显示