support dynamically add task

evanyangg · Dec 26, 2019 · 804a461 · 804a461
1 parent 979ccb5
commit 804a461
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+## 0.1.17
+* `FEATURE`: 新增动态添加任务
 ## 0.1.16
 * `FIXED`:   通过锁定流程编辑区域来判断自动完成的逻辑
 ## 0.1.14

diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Vue.use(VueBpmnModeler);
 ```
 ![viewer](https://image.ulitom.com/other/modeler.png)
 
-<BpmnModeler>组件会显示设计器，参数 v-model="modeler"，会通过画图操作实时返回对应的xml数据和svg数据，用于保存初始化的模板。
+组件会显示设计器，参数 v-model="modeler"，会通过画图操作实时返回对应的xml数据和svg数据，用于保存初始化的模板。
 ```html
 <template>
   <BpmnModeler v-model="modeler"></BpmnModeler>
@@ -34,12 +34,15 @@ Vue.use(VueBpmnModeler);
     data() {
       modeler: {
         // 模型xml数据
+        // model xml data
         xmlData: "",
         // svg图片数据
+        // svg data
         svgImage: ""
       }
     },
     // 详细代码请参考源码
+    // see source code for detail
     mounted() {
     },
     methods: {
@@ -68,6 +71,7 @@ Vue.use(VueBpmnModeler);
             //   // isExecutable: true
             // });
             // 设定开始节点名称和结束节点名称
+            // set StartEvent name 'start' and EndEvent name 'end'
             rootElement.children.forEach(n => {
               if (n.type === 'bpmn:StartEvent') {
                 modeling.updateProperties(n, {
@@ -87,8 +91,10 @@ Vue.use(VueBpmnModeler);
 </script>
 ```
 #### 当流程启动时，流程会默认走到第一个节点 提交申请，此时的待办任务会显示橙色。
+#### When the process starts, the process will complete first task by default, and the TODO tasks will be orange.
 ![viewer](https://image.ulitom.com/other/viewer.png "todo task")
 #### 当流程完成 提交申请 且满足 条件1 时，流程会走到 成本中心 节点，此时已经完成的待办任务会显示绿色。
+#### when the first task completed and met condition 1, the process coming to 'costcenter' task, Completed tasks displayed in green.
 ![viewer](https://image.ulitom.com/other/viewer-completed.png "completed task")
 
 参数介绍：
@@ -117,6 +123,29 @@ taskList: 表示流程的历史记录 可以通过服务的接口 historyService
   };
 </script>
 ```
+#### 动态添加任务节点
+#### dynamically add task
+```javascript
+addTask () {
+  let taskAdd = {
+    // 上一个节点
+    source: 'UserTask_06zjapk',
+    // 上一个节点箭头
+    sourceSequenceFlow: 'SequenceFlow_1l3hfbd',
+    // 下一个节点
+    target: 'ExclusiveGateway_13yj8os',
+    taskList: [
+      {
+        label: 'test task'
+      }
+    ]
+  }
+  this.$refs.modeler.addTask(taskAdd).then((taskList) => {
+    // new task list
+    console.log(taskList);
+  });
+}
+```
 
 ## Examples
 ```bash

diff --git a/examples/App.vue b/examples/App.vue
@@ -1,7 +1,8 @@
 <template>
   <div id="app">
-    <BpmnModeler v-model="modeler" :diagramXML="propXmlData"></BpmnModeler>
+    <BpmnModeler ref='modeler' v-model="modeler" :diagramXML="propXmlData"></BpmnModeler>
     <!-- <BpmnViewer :xmlData="propXmlData" :taskData="propTaskList"></BpmnViewer> -->
+    <!-- <button @click="addTask" style="position: absolute;top:50%;left:50%;width:200px;z-index: 2000;">add task</button> -->
   </div>
 </template>
 <script>
@@ -30,8 +31,37 @@ export default {
     modeler (val) {
       console.log(val)
     }
+  },
+  methods: {
+    test (list) {
+      console.log(list);
+    },
+    addTask () {
+      let taskAdd = {
+        source: 'UserTask_06zjapk',
+        sourceSequenceFlow: 'SequenceFlow_1l3hfbd',
+        target: 'ExclusiveGateway_13yj8os',
+        taskList: [
+          {
+            label: 'test task'
+          }
+        ]
+      }
+      this.$refs.modeler.addTask(taskAdd).then((data) => {
+        // new task list
+        console.log(data);
+      });
+    }
   }
 }
 </script>
-<style lang="less">
+<style lang="less" scoped>
+.zhinengkan {
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
 </style>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-bpmn-modeler",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "private": false,
   "main": "lib/vue-bpmn-modeler.umd.min.js",
   "author": "evanyangg",
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "bpmn-js": "^6.1.1",
+    "bpmn-js-cli": "^1.1.0",
     "camunda-bpmn-moddle": "^4.3.0",
     "diagram-js-minimap": "^2.0.3",
     "inherits": "^2.0.4",

diff --git a/packages/BpmnModeler/src/BpmnModeler.vue b/packages/BpmnModeler/src/BpmnModeler.vue
@@ -9,6 +9,7 @@ import BpmnModeler from "../../CustomModeler";
 import CustomTranslate from "../../CustomTranslate";
 import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";
 import minimapModule from "diagram-js-minimap";
+import CliModule from 'bpmn-js-cli';
 import { debounce } from "min-dash";
 let customTranslateModule = {
   translate: ["value", CustomTranslate]
@@ -37,8 +38,12 @@ export default {
       container: canvas,
       additionalModules: [
         customTranslateModule,
-        minimapModule
+        minimapModule,
+        CliModule
       ],
+      cli: {
+        bindTo: 'cli'
+      },
       moddleExtensions: {
         camunda: camundaModdleDescriptor
       }
@@ -65,42 +70,69 @@ export default {
     exportArtifacts()
   },
   methods: {
-    openDiagram(xml) {
-      if (xml) {
-        this.modeler.importXML(xml, function(err) {
-          if (err) {
-            console.error(err);
+    async addTask(taskAdd) {
+      await this.openDiagram(this.diagramXML);
+      return new Promise((resolve, reject) => { 
+        if (taskAdd && taskAdd.taskList.length > 0) {
+          let cli = window.cli;
+          cli.removeConnection(taskAdd.sourceSequenceFlow);
+          let taskActivity = taskAdd.source;
+          for (let index = 0; index < taskAdd.taskList.length; index++) {
+            taskActivity = cli.append(taskActivity, 'bpmn:UserTask');
+            taskAdd.taskList[index].taskActivity = taskActivity;
+            cli.setLabel(taskActivity, taskAdd.taskList[index].label);
+            cli.move(taskActivity, { x: -200, y: 120 });
+            if (index ===  taskAdd.taskList.length - 1) {
+              cli.connect(taskActivity, taskAdd.target, 'bpmn:SequenceFlow') 
+            }
           }
-        });
-        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
-          // });
-          // 设定开始节点名称和结束节点名称
-          rootElement.children.forEach(n => {
-            if (n.type === 'bpmn:StartEvent') {
-              modeling.updateProperties(n, {
-                name: '开始',
-              });
-            } else if (n.type === 'bpmn:EndEvent') {
-              modeling.updateProperties(n, {
-                name: '结束',
-              });
+          resolve(taskAdd.taskList);
+        } else {
+          reject('params error')
+        }
+      })
+    },
+    openDiagram(xml) {
+       return new Promise((resolve, reject) => { 
+        if (xml) {
+          this.modeler.importXML(xml, function(err) {
+            if (err) {
+              reject(err);
+            } else {
+              resolve()
             }
-          })
-        });
-      }
+          });
+          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
+            // });
+            // 设定开始节点名称和结束节点名称
+            rootElement.children.forEach(n => {
+              if (n.type === 'bpmn:StartEvent') {
+                modeling.updateProperties(n, {
+                  name: '开始',
+                });
+              } else if (n.type === 'bpmn:EndEvent') {
+                modeling.updateProperties(n, {
+                  name: '结束',
+                });
+              }
+            })
+            resolve();
+          });
+        }
+      })
     },
     saveSVG(done) {
       this.modeler.saveSVG(done);

diff --git a/yarn.lock b/yarn.lock
@@ -1634,6 +1634,13 @@ bpmn-font@^0.9.3:
   resolved "https://registry.npm.taobao.org/bpmn-font/download/bpmn-font-0.9.3.tgz#03c2c906dbd30653e5b1f113d92c78cab6710df4"
   integrity sha1-A8LJBtvTBlPlsfET2Sx4yrZxDfQ=
 
+bpmn-js-cli@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/bpmn-js-cli/-/bpmn-js-cli-1.1.0.tgz#6c18fa73aa6145d8fd6753543728feedaf049b0d"
+  integrity sha512-DfoRt4+y1rj0tK78Ga1WI2tHSJMthDjJG5botsFz7TtONVUSJ9XvV4i8pNgV4Mmhj4gmnBJ3SBsHumBJ+aMeoA==
+  dependencies:
+    min-dash "^3.1.0"
+
 bpmn-js@^6.1.1:
   version "6.1.1"
   resolved "https://registry.npmjs.org/bpmn-js/-/bpmn-js-6.1.1.tgz#3094ae8c2d8a0c404bb2de6715b463d6609f0a5a"
@@ -5351,7 +5358,7 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   resolved "https://registry.npm.taobao.org/mimic-fn/download/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha1-ftLCzMyvhNP/y3pptXcR/CCDQBs=
 
-min-dash@^3.0.0, min-dash@^3.5.0, min-dash@^3.5.1, min-dash@^3.5.2:
+min-dash@^3.0.0, min-dash@^3.1.0, min-dash@^3.5.0, min-dash@^3.5.1, min-dash@^3.5.2:
   version "3.5.2"
   resolved "https://registry.npm.taobao.org/min-dash/download/min-dash-3.5.2.tgz#23786fa289116ba3656038e16511577413d27200"
   integrity sha1-I3hvookRa6NlYDjhZRFXdBPScgA=