流程模型创建之bpmn.js与vue的整合

gitHub地址：https://github.com/GoldSubmarine/workflow-bpmn-modeler；

在线 demo： https://goldsubmarine.github.io/workflow-bpmn-modeler/demo/；

vue引用步骤：

1.安装以下包进开发环境

npm install --save bpmn-js;
npm install -- save bpmn-js-properties-panel;
npm install --save camunda-bpmn-moddle;

2.全局安装yarn

npm install -g yarn

3.安装

yarn add workflow-bpmn-modeler

4.页面引入

<template>
  <div>
    <bpmn-modeler
      ref="refNode"
      :xml="xml"
      :users="users"
      :groups="groups"
      :categorys="categorys"
      :is-view="false"
      @save="save"
    />
  </div>
</template>

<script>
import bpmnModeler from "workflow-bpmn-modeler";

export default {
  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" },
      ],
    };
  },
  methods: {
    getModelDetail() {
      // 发送请求，获取xml
      // this.xml = response.xml
    },
    save(data) {
      console.log(data);  // { process: {...}, xml: '...', svg: '...' }
    },
  },
};
</script>

5.最终样式：