From 4f48696005a6f0c7386a6dc9fcc8f2f46cac4f61 Mon Sep 17 00:00:00 2001
From: Binlin B Wang <binlin.b.wang@cn.pwc.com>
Date: Sun, 14 Aug 2022 23:00:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/resources/application-pro.yml    |  25 +-
 .../src/views/admin/LayoutHeader.vue          |   1 -
 .../src/views/admin/layout/ProcessDesign.vue  |   1 +
 .../admin/layout/process/ProcessTree.vue      | 451 ++++++++++++------
 .../admin/layout/process/ProcessTreeBack.vue  |   1 -
 5 files changed, 318 insertions(+), 161 deletions(-)

diff --git a/flowable-engine-java/src/main/resources/application-pro.yml b/flowable-engine-java/src/main/resources/application-pro.yml
index a4aea36..4c0d20d 100644
--- a/flowable-engine-java/src/main/resources/application-pro.yml
+++ b/flowable-engine-java/src/main/resources/application-pro.yml
@@ -1,8 +1,25 @@
 server:
-  port: 8088
-
+  port: 8080
 spring:
-  datasource: #数据源相关配置
+  type: com.zaxxer.hikari.HikariDataSource
+  driver-class-name: com.mysql.cj.jdbc.Driver
+  hikari:
+    connection-timeout: 30000
+    minimum-idle: 5
+    maximum-pool-size: 20
+    auto-commit: true
+    idle-timeout: 600000
+    pool-name: DateSourceHikariCp
+    max-lifetime: 1800000
+    connection-test-query: SELECT 1
+  datasource:
     url: jdbc:mysql://192.168.101.100:3306/flowable_web?userUnicode=true&characterEncodinf=UTF-8&autoReconnect=true
     username: root
-    password: password
\ No newline at end of file
+    password: password
+
+logging:
+  config: classpath:logback-dev.xml
+  level:
+    root: info
+
+
diff --git a/flowable-engine-web/src/views/admin/LayoutHeader.vue b/flowable-engine-web/src/views/admin/LayoutHeader.vue
index fa7847e..5987302 100644
--- a/flowable-engine-web/src/views/admin/LayoutHeader.vue
+++ b/flowable-engine-web/src/views/admin/LayoutHeader.vue
@@ -52,7 +52,6 @@ export default {
     this.check()
   },
   mounted() {
-    console.log(document.body.offsetWidth)
     if (document.body.offsetWidth <= 970) {
       this.$msgbox.alert("本设计器未适配中小屏幕，建议您在PC电脑端浏览器进行操作")
     }
diff --git a/flowable-engine-web/src/views/admin/layout/ProcessDesign.vue b/flowable-engine-web/src/views/admin/layout/ProcessDesign.vue
index 356a20c..d8c3753 100644
--- a/flowable-engine-web/src/views/admin/layout/ProcessDesign.vue
+++ b/flowable-engine-web/src/views/admin/layout/ProcessDesign.vue
@@ -30,6 +30,7 @@
 
 <script>
 import ProcessTree from './process/ProcessTree.vue'
+// import ProcessTree from './process/ProcessTreeBack.vue'
 import NodeConfig from '../../common/process/config/NodeConfig'
 //流程设计器
 export default {
diff --git a/flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue b/flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue
index b2bdba4..b63bd02 100644
--- a/flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue
+++ b/flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue
@@ -24,7 +24,7 @@ export default {
     nodeMap() {
       return this.$store.state.nodeMap;
     },
-    parentIdMap() {
+    parentMap() {
       return this.$store.state.parentMap;
     },
     dom() {
@@ -34,41 +34,73 @@ export default {
   render(h, ctx) {
     console.log("渲染流程树")
     this.nodeMap.clear()
-    this.toMapping(this.dom)
-    console.log(this.nodeMap, this.parentIdMap)
-
-
-    // let processTrees = this.getDomTreeOld(h, this.dom)
+    this.parentMap.clear()
+    this.initMapping(this.dom)
+    console.log(this.dom)
+    console.log(this.nodeMap, this.parentMap)
     let processTrees = this.getDomTree(h, "admin")
     //插入末端节点
     processTrees.push(h('div', {style: {'text-align': 'center'}}, [
       h('div', {class: {'process-end': true}, domProps: {innerHTML: '流程结束'}})
     ]))
-    console.log(processTrees)
     return h('div', {class: {'_root': true}, ref: '_root'}, processTrees)
   },
   methods: {
     // 获取demo的树形结构
     getDomTree(h, id) {
-      let nodeList = this.getNodeByParentId(id)
-      if (nodeList.length===0){
+      let node = this.parentMap.get(id)
+      if (!(node && node.id)) {
         return []
       }
-      let doms = nodeList.map(node =>{
-        console.log(node, "node")
-          //普通业务节点
-          let childDoms = this.getDomTree(h, node.id)
-          console.log(childDoms,"前")
-          this.decodeAppendDom(h, node, childDoms)
-          console.log(childDoms,"后")
-          return [h('div', {'class': {'primary-node': true}}, childDoms)];
-      })
-      return [h('div', {'class': {'primary-node': true}}, doms)];
+      console.log(node.name, "node.name", node.id, "node.id")
+      if (this.isPrimaryNode(node)) {
+
+        //普通业务节点
+        console.log("node name", node.name, "id", node.id, "parentId", node.parentId)
+        let childDoms = this.getDomTree(h, node.id)
+        this.decodeAppendDom(h, node, childDoms)
+        return [h('div', {'class': {'primary-node': true}}, childDoms)];
+
+
+      } else if (this.isBranchNode(node)) {
+        let index = 0;
+        //遍历分支节点，包含并行及条件节点
+        let branchItems = node.branchs.map(branchNode => {
+          //处理每个分支内子节点
+          this.toMapping(branchNode)
+          let childDoms = this.getDomTree(h, branchNode.id)
+          this.decodeAppendDom(h, branchNode, childDoms, {level: index + 1, size: node.branchs.length})
+          //插入4条横线，遮挡掉条件节点左右半边线条
+          this.insertCoverLine(h, index, childDoms, node.branchs)
+          //遍历子分支尾部分支
+          index++;
+          return h('div', {'class': {'branch-node-item': true}}, childDoms);
+        })
+        //插入添加分支/条件的按钮
+        branchItems.unshift(h('div', {'class': {'add-branch-btn': true}}, [
+          h('el-button', {
+            'class': {'add-branch-btn-el': true},
+            props: {size: 'small', round: true},
+            on: {click: () => this.addBranchNode(node)},
+            domProps: {innerHTML: `添加${this.isConditionNode(node) ? '条件' : '分支'}`},
+          }, [])
+        ]));
+        let bchDom = [h('div', {'class': {'branch-node': true}}, branchItems)]
+        //继续遍历分支后的节点
+        let afterChildDoms = this.getDomTree(h, node.id)
+        return [h('div', {}, [bchDom, afterChildDoms])]
+      } else if (this.isEmptyNode(node)) {
+        //空节点，存在于分支尾部
+        let childDoms = this.getDomTree(h, node.id)
+        this.decodeAppendDom(h, node, childDoms)
+        return [h('div', {'class': {'empty-node': true}}, childDoms)];
+      }
+      return []
     },
 
 
     getDomTreeOld(h, node) {
-      this.toMappingOld(node);
+      this.toMapping(node);
       if (this.isPrimaryNode(node)) {
         //普通业务节点
         let childDoms = this.getDomTreeOld(h, node.children)
@@ -79,7 +111,7 @@ export default {
         //遍历分支节点，包含并行及条件节点
         let branchItems = node.branchs.map(branchNode => {
           //处理每个分支内子节点
-          this.toMappingOld(branchNode);
+          this.toMapping(branchNode);
           let childDoms = this.getDomTreeOld(h, branchNode.children)
           this.decodeAppendDom(h, branchNode, childDoms, {level: index + 1, size: node.branchs.length})
           //插入4条横线，遮挡掉条件节点左右半边线条
@@ -129,14 +161,15 @@ export default {
         }
       }, []))
     },
-    toMapping(node) {
+    // 初始化map集合,以便数据整理
+    initMapping(node) {
       node.forEach(node => {
         this.nodeMap.set(node.id, node)
-        this.parentIdMap.set(node.parentId, node)
+        this.parentMap.set(node.parentId, node)
       })
     },
     //id映射到map，用来向上遍历
-    toMappingOld(node) {
+    toMapping(node) {
       if (node && node.id) {
         //console.log("node=> " + node.id + " name:" + node.name + " type:" + node.type)
         let newNode = {
@@ -146,12 +179,14 @@ export default {
         this.nodeMap.set(newNode.id, newNode)
       }
     },
+    // 新增线条
     insertCoverLine(h, index, doms, branchs) {
       if (index === 0) {
         //最左侧分支
         doms.unshift(h('div', {'class': {'line-top-left': true}}, []))
         doms.unshift(h('div', {'class': {'line-bot-left': true}}, []))
-      } else if (index === branchs.length - 1) {
+      }
+      if (index === branchs.length - 1) {
         //最右侧分支
         doms.unshift(h('div', {'class': {'line-top-right': true}}, []))
         doms.unshift(h('div', {'class': {'line-bot-right': true}}, []))
@@ -170,6 +205,7 @@ export default {
       parentNode.branchs.splice(parentNode.branchs.indexOf(node), 0, branchNode)
       this.$forceUpdate()
     },
+    //移动节点
     branchMove(node, offset) {
       let parentNode = this.nodeMap.get(node.parentId)
       let index = parentNode.branchs.indexOf(node)
@@ -210,141 +246,177 @@ export default {
       this.$store.commit('selectedNode', node)
       this.$emit('selectedNode', node)
     },
-    getNodeByParentId(id) {
-      let nodeList = []
-      this.dom.forEach(node => {
-        if (node.parentId === id)
-          nodeList.push(node)
-      })
-      return nodeList;
-    },
 
     //处理节点插入逻辑
     insertNode(type, parentNode) {
-
-
-      console.log(parentNode, "111");
       this.$refs['_root'].click()
       //缓存一下后面的节点
-      let afterNode = parentNode.children
-      console.log(afterNode)
+      console.log(parentNode)
       //插入新节点
+      let id = this.getRandomId();
+      this.updateParentId(id, parentNode.id)
       let children = {
-        id: this.getRandomId(),
+        id: id,
         parentId: parentNode.id,
         // props: {},
         type: type,
       }
       switch (type) {
         case 'APPROVAL':
-          this.insertApprovalNode(children, afterNode);
+          this.insertApprovalNode(children);
           break;
         case 'CC':
-          this.insertCcNode(parentNode);
+          this.insertCcNode(children);
           break;
         case 'DELAY':
-          this.insertDelayNode(parentNode);
+          this.insertDelayNode(children);
           break;
         case 'TRIGGER':
-          this.insertTriggerNode(parentNode);
+          this.insertTriggerNode(children);
           break;
         case 'CONDITIONS':
-          this.insertConditionsNode(parentNode);
+          this.insertConditionsNode(children);
           break;
         case 'CONCURRENTS':
-          this.insertConcurrentsNode(parentNode);
+          this.insertConcurrentsNode(children);
           break;
         default:
           break;
       }
-      //拼接后续节点
-      if (this.isBranchNode({type: type})) {
-        if (afterNode && afterNode.id) {
-          afterNode.parentId = parentNode.children.children.id
-        }
-        this.$set(parentNode.children.children, 'children', afterNode)
-      } else {
-        if (afterNode && afterNode.id) {
-          afterNode.parentId = parentNode.children.id
-        }
-        this.$set(parentNode.children, 'children', afterNode)
-      }
       this.$forceUpdate()
     },
+    /**
+     * 更新父id
+     * @param newId
+     * @param oldId
+     */
+    updateParentId(newId, oldId) {
+      this.dom.map(node => {
+        if (node.parentId === oldId) {
+          node.parentId = newId
+        }
+      })
+    },
+    /**
+     * 审批人
+     * @param parentNode
+     */
     insertApprovalNode(parentNode) {
-      console.log(parentNode)
       let node = {
         ...parentNode,
         name: "审批人",
         props: this.$deepCopy(DefaultProps.APPROVAL_PROPS)
       }
       this.dom.push(node)
+    },
+    /**
+     * 抄送人
+     * @param node
+     */
+    insertCcNode(node) {
+      let newNode = {
+        ...node,
+        name: "抄送人",
+        props: this.$deepCopy(DefaultProps.CC_PROPS)
+      }
+      this.dom.push(newNode)
+    },
+    /**
+     * 延时处理
+     * @param node
+     */
+    insertDelayNode(node) {
+      let newNode = {
+        ...node,
+        name: "延时处理",
+        props: this.$deepCopy(DefaultProps.DELAY_PROPS)
+      }
+      this.dom.push(newNode)
+    },
+    /**
+     * 触发器
+     * @param node
+     */
+    insertTriggerNode(node) {
+      let newNode = {
+        ...node,
+        name: "触发器",
+        props: this.$deepCopy(DefaultProps.TRIGGER_PROPS)
+      }
+      this.dom.push(newNode)
+    },
+    /**
+     * 新增条件分支
+     * @param node
+     */
+    insertConditionsNode(node) {
+      let newNode = {
+        ...node,
+        name: "条件分支",
+        branchs: [
+          {
+            id: this.getRandomId(),
+            parentId: node.id,
+            type: "CONDITION",
+            props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
+            name: "条件1",
+            children: {}
+          }, {
+            id: this.getRandomId(),
+            parentId: node.id,
+            type: "CONDITION",
+            props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
+            name: "条件2",
+            children: {}
+          }
+        ]
+      }
+      this.dom.push(newNode)
+      let emptyNode = {
+        id: this.getRandomId(),
+        parentId: node.id,
+        type: "EMPTY"
+      }
+      this.updateParentId(emptyNode.id, newNode.id)
+      this.dom.push(emptyNode)
+    },
+    /**
+     * 新增同步运行节点
+     * @param node
+     */
+    insertConcurrentsNode(node) {
+      let newNode = {
+        ...node,
+        name: "并行分支",
+        branchs: [
+          {
+            id: this.getRandomId(),
+            parentId: node.id,
+            type: "CONDITION",
+            props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
+            name: "条件1",
+            children: {}
+          }, {
+            id: this.getRandomId(),
+            parentId: node.id,
+            type: "CONDITION",
+            props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
+            name: "条件2",
+            children: {}
+          }
+        ]
+      }
 
-      // this.$set(parentNode.children, "name", "审批人")
-      // this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.APPROVAL_PROPS))
-    },
-    insertCcNode(parentNode) {
-      this.$set(parentNode.children, "name", "抄送人")
-      this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.CC_PROPS))
-    },
-    insertDelayNode(parentNode) {
-      this.$set(parentNode.children, "name", "延时处理")
-      this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.DELAY_PROPS))
-    },
-    insertTriggerNode(parentNode) {
-      this.$set(parentNode.children, "name", "触发器")
-      this.$set(parentNode.children, "props", this.$deepCopy(DefaultProps.TRIGGER_PROPS))
-    },
-    insertConditionsNode(parentNode) {
-      this.$set(parentNode.children, "name", "条件分支")
-      this.$set(parentNode.children, 'children', {
+      this.dom.push(newNode)
+      let emptyNode = {
         id: this.getRandomId(),
-        parentId: parentNode.children.id,
+        parentId: node.id,
         type: "EMPTY"
-      })
-      this.$set(parentNode.children, "branchs", [
-        {
-          id: this.getRandomId(),
-          parentId: parentNode.children.id,
-          type: "CONDITION",
-          props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
-          name: "条件1",
-          children: {}
-        }, {
-          id: this.getRandomId(),
-          parentId: parentNode.children.id,
-          type: "CONDITION",
-          props: this.$deepCopy(DefaultProps.CONDITION_PROPS),
-          name: "条件2",
-          children: {}
-        }
-      ])
-    },
-    insertConcurrentsNode(parentNode) {
-      this.$set(parentNode.children, "name", "并行分支")
-      this.$set(parentNode.children, 'children', {
-        id: this.getRandomId(),
-        parentId: parentNode.children.id,
-        type: "EMPTY"
-      })
-      this.$set(parentNode.children, "branchs", [
-        {
-          id: this.getRandomId(),
-          name: "分支1",
-          parentId: parentNode.children.id,
-          type: "CONCURRENT",
-          props: {},
-          children: {}
-        }, {
-          id: this.getRandomId(),
-          name: "分支2",
-          parentId: parentNode.children.id,
-          type: "CONCURRENT",
-          props: {},
-          children: {}
-        }
-      ])
+      }
+      this.updateParentId(emptyNode.id, newNode.id)
+      this.dom.push(emptyNode)
     },
+
     getBranchEndNode(conditionNode) {
       if (!conditionNode.children || !conditionNode.children.id) {
         return conditionNode;
@@ -365,52 +437,108 @@ export default {
         this.$message.warning("最多只能添加 8 项😥")
       }
     },
+
+
     //删除当前节点
     delNode(node) {
-      console.log("删除节点", node)
       //获取该节点的父节点
       let parentNode = this.nodeMap.get(node.parentId)
       if (parentNode) {
-        //判断该节点的父节点是不是分支节点
         if (this.isBranchNode(parentNode)) {
-          //移除该分支
-          parentNode.branchs.splice(parentNode.branchs.indexOf(node), 1)
-          //处理只剩1个分支的情况
-          if (parentNode.branchs.length < 2) {
-            //获取条件组的父节点
-            let ppNode = this.nodeMap.get(parentNode.parentId)
-            //判断唯一分支是否存在业务节点
-            if (parentNode.branchs[0].children && parentNode.branchs[0].children.id) {
-              //将剩下的唯一分支头部合并到主干
-              ppNode.children = parentNode.branchs[0].children
-              ppNode.children.parentId = ppNode.id
-              //搜索唯一分支末端最后一个节点
-              let endNode = this.getBranchEndNode(parentNode.branchs[0])
-              //后续节点进行拼接, 这里要取EMPTY后的节点
-              endNode.children = parentNode.children.children
-              if (endNode.children && endNode.children.id) {
-                endNode.children.parentId = endNode.id
-              }
-            } else {
-              //直接合并分支后面的节点，这里要取EMPTY后的节点
-              ppNode.children = parentNode.children.children
-              if (ppNode.children && ppNode.children.id) {
-                ppNode.children.parentId = ppNode.id
-              }
-            }
-          }
+          this.delBranchNode(parentNode, node)
         } else {
-          //不是的话就直接删除
-          if (node.children && node.children.id) {
-            node.children.parentId = parentNode.id
-          }
-          parentNode.children = node.children
+          this.delNodeInDomChange(node.id, parentNode.id)
         }
-        this.$forceUpdate()
       } else {
         this.$message.warning("出现错误，找不到上级节点😥")
       }
     },
+    //删除分支
+    delBranchNode(parentNode, node) {
+      let sunNode = this.parentMap.get(node.id)
+      //判断当前节点下有没有字节点,有则需要提示
+      if (sunNode) {
+        this.$confirm('当前分支下有子节点，是否继续?', '提示', {
+          confirmButtonText: '确 定',
+          cancelButtonText: '取 消',
+          type: 'warning'
+        }).then(() => {
+          //确认后进行子节点的操作
+          this.delBranchSunNode(sunNode.id)
+          this.doDelBranchNode(parentNode, node)
+        })
+        return
+      }else {
+        // 没有直接开始删除
+        this.doDelBranchNode(parentNode, node)
+      }
+    },
+    //删除分支的子节点
+    delBranchSunNode(id) {
+      let node = this.parentMap.get(id)
+      this.delNodeInDomChange(id)
+      if (node) {
+        this.delBranchSunNode(node.id)
+      }
+    },
+    //删除分支节点
+    doDelBranchNode(parentNode, node){
+      //判断当前分时是否为2
+      if (parentNode.branchs.length === 2){
+        let nodeList = [...parentNode.branchs]
+        nodeList.splice(nodeList.indexOf(node), 1)
+        //查看另外一个分支上是否有节点
+        let sunNode = this.parentMap.get(nodeList[0].id)
+        //有则需要放到主分支上
+        if (sunNode){
+          //更改分支上第一个节点的父id
+          this.updateParentId(parentNode.parentId,sunNode.parentId)
+          //找到最后一个节点
+          let lastNode = this.getLastNode(sunNode.id)
+          let emptyNode = this.parentMap.get(parentNode.id)
+          //更新空节点下的第一个节点的id为当前分支最后一个节点
+          this.updateParentId(lastNode.id,emptyNode.id)
+          //删除分支的主节点
+          this.delNodeInDom(parentNode)
+          //删除分支的空节点
+          this.delNodeInDom(emptyNode)
+        }else {
+          //没有则直接删除
+          this.delEntireBranch(parentNode)
+        }
+      }else {
+        parentNode.branchs.splice(parentNode.branchs.indexOf(node), 1)
+      }
+    },
+    //获取最后一个节点
+    getLastNode(id){
+      let node = this.parentMap.get(id)
+      if (node){
+        return this.getLastNode(node.id)
+      }else {
+        return this.nodeMap.get(id)
+      }
+    },
+    delEntireBranch(node){
+      //删除分支节点和空节点
+      let emptyNode = this.parentMap.get(node.id)
+      this.delNodeInDomChange(node.id,node.parentId)
+      this.delNodeInDomChange(emptyNode.id,emptyNode.parentId)
+    },
+
+    /**
+     * 从dom中删除
+     * @param delId
+     * @param parentId
+     */
+    delNodeInDomChange(delId, parentId) {
+      this.updateParentId(parentId, delId)
+      let delNode = this.nodeMap.get(delId)
+      this.dom.splice(this.dom.indexOf(delNode),1)
+    },
+    delNodeInDom(delNode){
+      this.dom.splice(this.dom.indexOf(delNode),1)
+    },
     validateProcess() {
       this.valid = true
       let err = []
@@ -441,7 +569,20 @@ export default {
       }
     },
     //校验所有节点设置
-    validate(err, node) {
+    validate(err, nodeList) {
+      nodeList.map(node=>{
+        if (this.isPrimaryNode(node)){
+          //校验条件节点
+          this.validateNode(err, node)
+        }else if (this.isBranchNode(node)){
+          node.branchs.map(branchNode => {
+            //校验条件节点
+            this.validateNode(err, branchNode)
+          })
+        }
+      })
+    },
+    validateOld(err, node) {
       if (this.isPrimaryNode(node)) {
         this.validateNode(err, node)
         this.validate(err, node.children)
diff --git a/flowable-engine-web/src/views/admin/layout/process/ProcessTreeBack.vue b/flowable-engine-web/src/views/admin/layout/process/ProcessTreeBack.vue
index 4ee840c..04b4e56 100644
--- a/flowable-engine-web/src/views/admin/layout/process/ProcessTreeBack.vue
+++ b/flowable-engine-web/src/views/admin/layout/process/ProcessTreeBack.vue
@@ -392,7 +392,6 @@ export default {
       }else if (this.isEmptyNode(node)){
         this.validate(err, node.children)
       }
-
     }
   },
   watch:{