1 Star 0 Fork 5

727614744 / vue-bpmn-modeler

Gitee —— 企业级 DevOps 研发管理平台
加入 Gitee
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

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";
import "vue-bpmn-modeler/lib/vue-bpmn-modeler.css";
Vue.use(VueBpmnModeler);

viewer

组件会显示设计器,参数 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.

viewer

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

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

viewer

参数介绍: 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

viewer

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

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

点评 ( 0 )

你可以在登录后,发表评论

简介

克隆一下evanyang大神的项目用来学习; 可以彩色展示路径 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/mujianfenghe78/vue-bpmn-modeler.git
git@gitee.com:mujianfenghe78/vue-bpmn-modeler.git
mujianfenghe78
vue-bpmn-modeler
vue-bpmn-modeler
master

搜索帮助