Vue安装并使用bpmn.js

bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.

接下来做好准备，开启bpmn学习之路吧！

Vue中如何安装并使用bpmn呢？

1、安装命相关依赖

npm i bpmn-js --save-D

2、编写HTML代码：

<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

3、编写JS代码 

<script>
    // 引入相关的依赖
    import BpmnModeler from 'bpmn-js/lib/Modeler'
    import {
      xmlStr
    } from '../mock/xmlStr' // 这里是直接引用了xml字符串
    export default {
      name: '',
      components: {},
      // 生命周期 - 创建完成（可以访问当前this实例）
      created() { },
      // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
      mounted() {
        this.init()
      },
      data() {
        return {
          // bpmn建模器
          bpmnModeler: null,
          container: null,
          canvas: null
        }
      },
      methods: {
        init() {
          // 获取到属性ref为“canvas”的dom节点
          const canvas = this.$refs.canvas
          // 建模
          this.bpmnModeler = new BpmnModeler({
            container: canvas
          })
          this.createNewDiagram()
        },
        createNewDiagram() {
          // 将字符串转换成图显示出来
          this.bpmnModeler.importXML(xmlStr, (err) => {
            if (err) {
              // console.error(err)
            } else {
              // 这里是成功之后的回调, 可以在这里做一系列事情
              this.success()
            }
          })
        },
        success() {
          // console.log('创建成功!')
        }
      }
    }
  </script>

4、编写CSS 

<style scoped>
.containers{
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}
.canvas{
	width: 100%;
	height: 100%;
}
.panel{
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
}
</style>

使用命令：npm run start启动项目，打开后就可以看到一个面板，但是没有左侧工具栏和右侧属性框，接下来继续代码编写：

Vue中使用bpmn.js的左侧工具栏： 

左侧工具栏的作用：给图形添加新的节点

这一步非常简单，只需要在main.js中引入相关的样式即可：

在main.js中引入css:

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
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')

Vue中使用bpmn.js右侧属性栏

属性栏的作用：用户在点击图上的节点的时候，能获取该节点的属性信息

想要使用右侧属性栏，就得安装一个插件：bpmn-js-properties-panel

1、在命令行中输入一下命令进行插件安装

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

2、在main.js中引入样式：

// main.js
import Vue from 'vue'
...
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右边工具栏样式
...

3、页面中引入propertiesProviderModule和propertiesPanelModule：

// panel.vue
<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'
...
methods: {
  init() {
    // 获取到属性ref为“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()
  }
}

完整代码：

<template>
    <div class="containers" ref="content">
        <div class="canvas" ref="canvas"></div>
        <div id="js-properties-panel" class="panel"></div>
    </div>
</template>

<script>
    // 引入相关的依赖
    import BpmnModeler from 'bpmn-js/lib/Modeler'
    import { xmlStr } from '../../../mock/xmlStr'
    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: '',
        components: {},
            // 生命周期 - 创建完成（可以访问当前this实例）
        created() {},
            // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
        mounted() {
            this.init()
        },
        data() {
            return {
                // bpmn建模器
                bpmnModeler: null,
                container: null,
                canvas: null
            }
        },
        // 方法集合
        methods: {
            init () {
                // 获取到属性ref为“content”的dom节点
                this.container = this.$refs.content
                // 获取到属性ref为“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 () {
                // 将字符串转换成图显示出来
                this.bpmnModeler.importXML(xmlStr, (err) => {
                    if (err) {
                        // console.error(err)
                    }
                    else {
                        // 这里是成功之后的回调, 可以在这里做一系列事情
                        this.success()
                    }
                })
            },
            success () {
                // console.log('创建成功!')
                
            }
        },
// 计算属性
        computed: {}
    }
</script>

<style scoped>
    .containers{
        background-color: #ffffff;
        width: 100%;
        height: calc(100vh - 52px);
    }
    .canvas{
        width: 100%;
        height: 100%;
    }
    .panel{
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
    }
</style>

 

到这一步，Vue中引入bpmn就基本完成了，运行项目后，可以看到效果图如下：