bpmn.js在vue中初体验_综合

前提：项目中需要绘制流程图的需求，涉及到Activiti和Bpmn.js的使用，接下来就来看看如何在Vue中使用Bpmn.js绘制在线流程图吧。

额，bpmn.js是什么？是一个实验BPMN2.0渲染工具包和web建模器，可以使画流程图的功能在前端来完成。
如果你不了解它的话，可以来这初体验一下，看看它是否满足你的需求吧。
vue 中集成 Bpmn.js 实现在线绘图，导出 xml、svg、在线保存等操作

bpmn.js界面内容介绍
在这里插入图片描述
接下来进入正题啦！
首先先创建一个 vue 项目，并安装好路由

vue create vue-bpmn
cd vue-bpmn
npm i vue-router -S

项目搭建完成后，配置好路由相关部分，我们在views文件夹下新建一个basic.vue的文件

vue中使用bpmn.js

bpmn.js 基础

其实这部分主要是将 xml 格式的 bpmn 内容解析为图片显示出来

安装相关依赖

npm i bpmn-js --save-D

添加 Bpmn 流程图模板 xml 文件（这个文件可以自己绘图构建）
在 mock 文件夹下新建 xmlStr.js 文件

export var xmlStr = ` <?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="false"><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>`

编写相关代码 basic.vue

<template><div class="container"><div class="canvas" ref="canvas"></div></div>
</template><script>
// 引入相关依赖
import BpmnModeler from 'bpmn-js/lib/Modeler'
import {
     xmlStr } from '../mock/xmlStr' // 直接引用 xml格式
export default {
    name: 'basic',data () {
    return {
    bpmnModeler: null, // bpmn 建模器container: null,canvas: null}},mounted () {
    this.init()},methods: {
    init () {
    // 获取canvas的dom节点const canvas = this.$refs.canvas// 建模this.bpmnModeler = new BpmnModeler({
    container: canvas})this.createNewDiagram()},createNewDiagram () {
    // 将字符串转换成图显示出来try {
    const result = this.bpmnModeler.importXML(xmlStr)const {
     warnings } = resultconsole.log(warnings)} catch (err) {
    console.log(err.message, err.warnings)}}}
}
</script><style scoped>
.container {
    width: 100%;height: 100%;
}
.canvas {
    width: 100%;height: 100%;
}
</style>

运行代码后效果图

在这里插入图片描述

bpmn.js添加左侧工具栏

左侧工具栏主要是为用户在线自定义流程图使用

如果我们需要使用左侧的工具栏，只需要在 main.js 中引入相应的 css 样式就可以了
在 main.js 中添加bpmn左侧工具栏 css 样式

import Vue from 'vue'
import App from './App.vue'
import router from './routes/index'
Vue.config.productionTip = false// bpmn 工作流绘图工具的样式
import "bpmn-js/dist/assets/diagram-js.css"  // 左边工具栏以及编辑节点的样式
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css"
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css"
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"new Vue({
    router,render: h => h(App)
}).$mount('#app')

其他代码都不变，此时页面上就多了左侧工具栏了，我们可以自己添加节点

在这里插入图片描述

补充：如果你添加了左侧工具栏的样式，但是你不想绘制流程图，只查看流程图的话，也可以将 basic.vue 下面的内容修改一下就可以啦

// 绘制流程图
// import BpmnModeler from "bpmn-js/lib/Modeler"
// 预览流程图
import BpmnViewer from "bpmn-js/lib/Viewer"init() {
    const canvas = this.$refs.canvas// this.bpmnModeler = new BpmnModeler({ // 可编辑this.bpmnModeler = new BpmnViewer({
     // 仅预览container: canvas})this.createNewDiagram()},

bpmn.js添加右侧属性栏

属性栏顾名思义就是流程图中节点的属性信息

如果想在界面中添加右侧属性栏的话就需要安装相关插件了

安装插件

npm i bpmn-js-properties-panel --save-D
npm i camunda-bpmn-moddle --save-D

在 main.js 中添加相关 css 样式

import Vue from 'vue'
import App from './App.vue'
...
// 使用bpmn.js- 右侧属性栏
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右边工具栏样式
...

在 views 下新建 panel.vue 文件，并配置好路由

打 … 的地方和 basic.vue 文件的内容一样哦

// panel.vue
<template><div class="container"><div class="canvas" ref="canvas"></div><!-- 右边属性栏部分 --><div id="js-properties-panel" class="panel"></div></div>
</template><script>
// 引入相关依赖
...
// 使用右侧属性栏
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'export default {
    name: 'basic',data () {
    return {
    ...}},mounted () {
    this.init()},methods: {
    init () {
    // 获取canvas的dom节点const canvas = this.$refs.canvas// 建模this.bpmnModeler = new BpmnModeler({
    container: canvas,// 添加控制板propertiesPanel: {
    parent: '#js-properties-panel'},additionalModules: [// 右边的属性栏propertiesProviderModule,propertiesPanelModule],moddleExtensions: {
    camunda: camundaModdleDescriptor}})this.createNewDiagram()},createNewDiagram () {
    ...}}
}
</script><style scoped>
...
.panel {
    position: absolute;top: 0;right: 0;width: 300px;
}
</style>

运行后效果

在这里插入图片描述

以上，就是在 vue 中使用 bpmn.js 中绘制流程图的全部内容啦！

关于右下角 BPMN.IO 这个 logo，官方要求是不给删或者隐藏的，否则就侵权，如果实在是不需要 logo的话可以简单地把 logo 的 css样式隐藏一下

js 部分

mounted() {
    // 删除 bpmn logo bpmn.io官方要求不给删或者隐藏，否则侵权 内部使用const bjsIoLogo = document.querySelector('.bjs-powered-by')while (bjsIoLogo.firstChild) {
    bjsIoLogo.removeChild(bjsIoLogo.firstChild)}
},

css 部分

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

一个可参考的链接地址：https://gitee.com/MiyueSC/bpmn-process-designer?_from=gitee_search