vue-bpmn-modeler

Design BPMN 2.0 modeler in a Vue.js application based on bpmn-js.

Usage

yarn add vue-bpmn-modeler

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

# yourPage.vue
<style lang="less">
@import "~vue-bpmn-modeler/lib/vue-bpmn-modeler.css";
</style>

组件会显示设计器，参数 v-model="modeler"，会通过画图操作实时返回对应的xml数据和svg数据，用于保存初始化的模板。

<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>

当流程启动时，流程会默认走到第一个节点提交申请，此时的待办任务会显示橙色。

When the process starts, the process will complete first task by default, and the TODO tasks will be orange.

当流程完成提交申请且满足条件1 时，流程会走到成本中心节点，此时已经完成的待办任务会显示绿色。

when the first task completed and met condition 1, the process coming to 'costcenter' task, Completed tasks displayed in green.

参数介绍： xmlData: 表示流程图的xml数据 taskList: 表示流程的历史记录可以通过服务的接口 historyService 获得

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

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

动态添加/替换任务节点

dynamically add/replace task

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);
  });
}

开启 propertiesPanel

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

Examples

# 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

License

MIT

evanyangg/vue-bpmn-modeler