流程编辑一部分，流程图节点删除功能，侧边导航栏文本颜色

src/components/general/side-nav-bar-class.vue

@@ -96,7 +96,7 @@ export default {
   border-left: 5px solid #0d1847;
   font-size: 14px;
   line-height: 24px;
-  color: #e6ebfe;
+  color: #6573ae;
   cursor: pointer;
 }
 .side_nav_bar_list > li:hover,

src/components/side-nav-bar.vue

@@ -78,7 +78,7 @@ export default {
   border-left: 5px solid #0d1847;
   font-size: 14px;
   line-height: 24px;
-  color: #e6ebfe;
+  color: #6573ae;
   cursor: pointer;
 }
 .side_nav_bar_list > li:hover,

src/components/work-flow/super-flow.vue

@@ -35,16 +35,18 @@
         onLineColor="#94a8c8"
         :origin="origin"
       >
-        <template v-slot:node="{meta}">
+        <template v-slot:node="node">
           <div
-            :class="{'flow-node-begin': nodeParams(meta.id).type == 1, 'flow-node-end': nodeParams(meta.id).type == 2, 'flow-node-default': nodeParams(meta.id).type == 3 && meta.id != nodeItem.id, 'flow-node-default-active': nodeParams(meta.id).type == 3 && meta.id == nodeItem.id }"
-            :id="meta.id"
+            :class="{'flow-node-begin': nodeParams(node.meta.id).type == 1, 'flow-node-end': nodeParams(node.meta.id).type == 2, 'flow-node-default': nodeParams(node.meta.id).type == 3 && node.meta.id != nodeItem.id, 'flow-node-default-active': nodeParams(node.meta.id).type == 3 && node.meta.id == nodeItem.id }"
+            :id="node.meta.id"
           >
             <div
               class="node_span"
-              @click="clickItem(meta.id)"
+              @click="clickItem(node.meta.id)"
               @blur="blurItem"
-            >{{nodeParams(meta.id).name}}</div>
+              :title="nodeParams(node.meta.id).name"
+            >{{nodeParams(node.meta.id).name}}</div>
+            <div class="node_del" @click="delNode(node.meta.node_id)"></div>
           </div>
         </template>
       </super-flow>
@@ -792,9 +794,42 @@ export default {
         self.dialog_general = true;
       }
     },
-    showInterfacePlugin(query) {
-      if (this.checkNodeCouldEdit()) {
-        this.dialog_interface = true;
+    showInterfacePlugin() {
+      let self = this;
+      if (self.checkNodeCouldEdit()) {
+        let meta = self.nodeParamsList.find((item) => {
+          return item.id == self.nodeItem.id;
+        });
+        if (meta) {
+          let index = meta.plugins.findIndex((item) => {
+            return item.plugin_type === 1;
+          });
+          if (index !== -1) {
+            let data = meta.plugins[index];
+            let arr0 = JSON.parse(data.body_fields);
+            let arr1 = JSON.parse(data.query_fields);
+            let arr_res = JSON.parse(data.response_fields);
+            self.serviceUrl = data.url;
+            self.activeName = "0";
+            self.sqfsVal = data.auth_method;
+            self.tokenVal = data.auth_token;
+            self.noSearchUrl = "";
+            self.datasQqcs = arr0.length != 0 ? arr0 : arr1;
+            self.datasFhcs = arr_res;
+            self.resSuccess = true;
+            self.resultShow = true;
+            self.dataType = arr0.length != 0 ? "body" : "param";
+            self.body_fields = arr0;
+            self.param_fields = arr1;
+            self.select = data.req_type;
+            self.getUrl(self.serviceUrl);
+          } else {
+            self.refleshItem();
+          }
+        } else {
+          self.refleshItem();
+        }
+        self.dialog_interface = true;
       }
     },
     nodeParams(id) {
@@ -825,7 +860,6 @@ export default {
           });
         }
       }
-
       self.dialog_general = false;
     },
     clickTab() {},
@@ -914,8 +948,8 @@ export default {
       this.$api.workbench.fwzcFwcs(query).then((response) => {
         if (response.data.success == 1) {
           let data = response.data.data;
-          this.body_fields = data.body_fields;
-          this.param_fields = data.param_fields;
+          this.body_fields = data.body_fields || [];
+          this.param_fields = data.param_fields || [];
           if (data.body_fields && data.body_fields.length != 0) {
             this.datasQqcs = data.body_fields;
             this.dataType = "body";
@@ -933,7 +967,7 @@ export default {
         }
       });
     },
-    interfaceCancel() {
+    refleshItem() {
       this.serviceUrl = "";
       this.activeName = "0";
       this.sqfsVal = "";
@@ -949,6 +983,10 @@ export default {
       this.param_fields = [];
       this.request_fields = [];
       this.response_fields = [];
+      this.select = 1;
+    },
+    interfaceCancel() {
+      this.refleshItem();
       this.dialog_interface = false;
     },
     interfaceSubmit() {
@@ -1007,7 +1045,6 @@ export default {
               response_fields: JSON.stringify(self.response_fields),
             };
           }
-          console.log(self.nodeParamsList);
           self.interfaceCancel();
         } else if (this.requestRules != 0) {
           this.$message.error("请完善请求参数信息中的字段名称");
@@ -1112,6 +1149,28 @@ export default {
       });
       this.nodeParamsList[index].plugins.split(plugin_index, 1);
     },
+    delNode(item) {
+      console.log(item);
+      let obj = this.$refs.superFlow.toJSON();
+      let nodes = obj.nodeList;
+      let links = obj.linkList;
+      for (let i = 0; i < nodes.length; i++) {
+        console.log(nodes[i]);
+        if (nodes[i].id == item) {
+          nodes.splice(i, 1);
+        }
+      }
+      for (let i = 0; i < links.length; i++) {
+        console.log(links[i]);
+        if (links[i].startId == item || links[i].endId == item) {
+          links.splice(i, 1);
+          i--;
+        }
+      }
+      this.nodeList = nodes;
+      this.linkList = links;
+      console.log(this.nodeList, this.linkList);
+    },
   },
 };
 </script>
@@ -1225,7 +1284,7 @@ export default {
     }
     .checked_item {
       margin-top: 20px;
-      cursor: pointer;
+      cursor: default;
       position: relative;
       &:hover {
         color: #515fe7;
@@ -1236,6 +1295,7 @@ export default {
       }
       .checked_item_del {
         position: absolute;
+        cursor: pointer;
         width: 12px;
         height: 12px;
         top: -4px;
@@ -1495,6 +1555,21 @@ export default {
     padding: 0 20px;
   }
 }
+.node_del {
+  width: 18px;
+  height: 18px;
+  background: url("~@/assets/imgs/lcsj_btn_node_delete.png") no-repeat center
+    center;
+  cursor: pointer;
+  display: none;
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  z-index: 1999;
+}
+.super-flow__node:hover .node_del {
+  display: block;
+}
 </style>
 <style lang="less">
 .super-flow {
@@ -1518,6 +1593,7 @@ export default {
       border: solid 3px #109e93;
       background-color: #25bdb1;
       color: #ffffff;
+      position: relative;
     }
     .flow-node-end {
       width: 100%;
@@ -1528,6 +1604,7 @@ export default {
       background-color: #f78181;
       border: solid 3px #e86262;
       color: #ffffff;
+      position: relative;
     }
     .flow-node-default {
       width: 100%;
@@ -1537,6 +1614,7 @@ export default {
       border-radius: 8px;
       background-color: #fff;
       border: solid 3px #b4c6f5;
+      position: relative;
     }
     .flow-node-default-active {
       width: 100%;
@@ -1548,6 +1626,7 @@ export default {
       box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
       background-color: #515fe7;
       color: #fff;
+      position: relative;
     }
   }
 }

src/pages/workbench/component-center/process-management/process-design/edit.vue

@@ -58,7 +58,7 @@
           class="apaas_step"
         >
           <div class="step_in">
-            <WorkFlow ref="workFlow" class="work_flow" />
+            <WorkFlow ref="workFlow" :node_list="node_list" :link_list="link_list" :node_params_list="node_params_list" class="work_flow" />
             <div class="btn_footer">
               <el-button class="cancel" @click="cancel">取消</el-button>
               <div>
@@ -271,8 +271,8 @@ export default {
             this.basic_form.name = data.name;
             this.basic_form.workplace = data.workarea;
             this.basic_form.desc = data.describe;
-            this.node_list = [];
-            this.link_list = [];
+            this.node_list = data.nodeList;
+            this.link_list = data.linkList;
             this.node_params_list = [];
             this.node_list.forEach((item) => {
               item.meta.id =