vue中使用bpmn.js实现工作流(基础篇)

demo使用脚手架生成，项目结构如下图

安装的依赖项

app.vue中的代码截图

app.vue代码

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
     
  name: 'App',
  components: {
     
    HelloWorld
  }
}
</script>

<style>
#app {
     
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Helloworld.vue中的代码

<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 BpmnViewer from 'bpmn-js'
// 右边工具栏属性模块
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: 'HelloWorld',
  data() {
     
    return {
     
      // bpmn建模器
      bpmnModeler: null,
      canvas: null
    }
  },
  methods: {
     
    createNewDiagram() {
     
      const bpmnXmlStr =
        '\n' +
        '\n' +
        '  \n' +
        '    \n' +
        '      SequenceFlow_0nrfbee\n' +
        '    \n' +
        '    \n' +
        '      SequenceFlow_0nrfbee\n' +
        '      SequenceFlow_00ho26x\n' +
        '    \n' +
        '    \n' +
        '      SequenceFlow_00ho26x\n' +
        '      SequenceFlow_18df8vb\n' +
        '    \n' +
        '    \n' +
        '      SequenceFlow_18df8vb\n' +
        '    \n' +
        '    \n' +
        '    \n' +
        '    \n' +
        '  \n' +
        '  \n' +
        '    \n' +
        '      \n' +
        '        \n' +
        '        \n' +
        '          \n' +
        '        \n' +
        '      \n' +
        '      \n' +
        '        \n' +
        '      \n' +
        '      \n' +
        '        \n' +
        '      \n' +
        '      \n' +
        '        \n' +
        '        \n' +
        '          \n' +
        '        \n' +
        '      \n' +
        '      \n' +
        '        \n' +
        '        \n' +
        '        \n' +
        '        \n' +
        '      \n' +
        '      \n' +
        '        \n' +
        '        \n' +
        '        \n' +
        '        \n' +
        '      \n' +
        '      \n' +
        '        \n' +
        '        \n' +
        '        \n' +
        '        \n' +
        '      \n' +
        '    \n' +
        '  \n' +
        '\n'
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
     
        if (err) {
     
          console.error(err)
        } else {
     
          // 这里还没用到这个，先注释掉吧
          // that.success()
        }
      })
    }
  },
  mounted() {
     
    // 获取到属性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(this.bpmnModeler)
  }
}
</script>

<style scoped>
/* 左边工具栏的样式 去掉该样式左边工具栏不显示 */
@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';

/*右边工具栏样式*/
@import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
.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>