vue-bpmn-modeler

yarn add vue-bpmn-modeler

# main.js
import VueBpmnModeler from "vue-bpmn-modeler";
import "vue-bpmn-modeler/lib/vue-bpmn-modeler.css";
Vue.use(VueBpmnModeler);

<template>
  <BpmnModeler v-model="modeler"></BpmnModeler>
</template>

<script>
  export default {
    name: "BpmnModeler",
    props: {
      diagramXML: String
    },
    watch: {
      diagramXML(val) {
        this.openDiagram(val)
      }
    },
    data() {
      modeler: {
        // 模型xml数据
        // model xml data
        xmlData: "",
        // svg图片数据
        // svg data
        svgImage: ""
      }
    },
    // 详细代码请参考源码
    // see source code for detail
    mounted() {
    },
    methods: {

      openDiagram(xml) {
        if (xml) {
          this.modeler.importXML(xml, function(err) {
            if (err) {
              console.error(err);
            } else {
            }
          });
          this.xmlData = xml;
        } else {
          this.modeler.createDiagram();
          let _self = this;
          setTimeout(() => {
            /**
             * 修改xml属性值 isExecutable = false => true
             * isExecutable = false 后端部署流程时 不会创建流程定义数据
             */
            let modelerCanvas = _self.modeler.get("canvas");
            let rootElement = modelerCanvas.getRootElement();
            let modeling = _self.modeler.get("modeling");
            // modeling.updateProperties(rootElement, {
            //   // isExecutable: true
            // });
            // 设定开始节点名称和结束节点名称
            // set StartEvent name 'start' and EndEvent name 'end'
            rootElement.children.forEach(n => {
              if (n.type === 'bpmn:StartEvent') {
                modeling.updateProperties(n, {
                  name: '开始',
                });
              } else if (n.type === 'bpmn:EndEvent') {
                modeling.updateProperties(n, {
                  name: '结束',
                });
              }
            })
          });
        }
      }
    }
  };
</script>

<template>
  <BpmnViewer :xmlData="xmlData" :taskData="taskList"></BpmnViewer>
</template>

<script>
  export default {
    data() {
      modeler: {
        // 模型xml数据
        xmlData: "",
        // 任务列表
        taskList: [{
          // 任务定义的key
          "key": "",
          // 任务是否完成
          "completed": true
        }]
      }
    }
  };
</script>

addTask () {
  let addOrReplace = {
    // task || sequenceFlow || gateway
    replaceActivity: 'UserTask_0hkfnx2',
    taskList: [
      {
        label: 'test task'
      }
    ]
  }
  this.$refs.modeler.replace(addOrReplace).then((taskList) => {
    // new task list, incluce taskId
    console.log(taskList);
  });
}

# clone the project
git clone https://github.com/evanyangg/vue-bpmn-modeler.git

# enter the project directory
cd vue-bpmn-modeler

# install dependencies
yarn

# serve with hot reload at localhost:8080
yarn serve