菜单管理16位，流程设计

src/assets/css/index.css

@@ -198,8 +198,18 @@ div {
   font-size: 16px;
   font-weight: 700;
   color: #1d1e20;
-  border-left: 4px solid #0367f6;
   padding-left: 8px;
+  position: relative;
+}
+.el-dialog__title::before {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 16px;
+  border-radius: 2px;
+  background-color: #515fe7;
+  left: 0;
+  top: 2px;
 }
 .el-dialog__body {
   font-size: 18px;

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

@@ -37,25 +37,64 @@
       >
         <template v-slot:node="{meta}">
           <div
-            :class="{'flow-node-begin': meta.type == 0, 'flow-node-end': meta.type == 1, 'flow-node-default': meta.type == 2}"
+            :class="{'flow-node-begin': nodeParams(meta.id).type == 0, 'flow-node-end': nodeParams(meta.id).type == 1, 'flow-node-default': nodeParams(meta.id).type == 2 && meta.id != nodeItem.id, 'flow-node-default-active': nodeParams(meta.id).type == 2 && meta.id == nodeItem.id }"
             :id="meta.id"
           >
-            <div class="node_span" @click="clickItem(meta)">{{meta.name}}</div>
+            <div
+              class="node_span"
+              @click="clickItem(meta.id)"
+              @blur="blurItem"
+            >{{nodeParams(meta.id).name}}</div>
           </div>
         </template>
       </super-flow>
     </div>
     <div class="flow_options">
       <p class="options_head">操作</p>
-      <div class="options_item">
+      <div class="options_item" @click="generalSettings">
         <img :src="require('@/assets/imgs/lcsj_ic_set.png')" class="options_img" />
         <p class="options_text">常规设置</p>
       </div>
-      <div class="options_item">
+      <div class="options_item_1">
         <img :src="require('@/assets/imgs/lcsj_ic_chajian.png')" class="options_img" />
         <p class="options_text">插件设置</p>
+        <div class="options_pop">
+          <div class="options_pop_item">
+            <img :src="require('@/assets/imgs/lcsj_ic_jiekou.png')" class="options_item_img" />
+            <p class="options_item_text">接口插件</p>
+          </div>
+          <div class="options_pop_item">
+            <img :src="require('@/assets/imgs/lcsj_ic_liucheng.png')" class="options_item_img" />
+            <p class="options_item_text">流程服务</p>
+          </div>
+          <div class="options_pop_item">
+            <img :src="require('@/assets/imgs/lcsj_ic_chaoshi.png')" class="options_item_img" />
+            <p class="options_item_text">超时管理</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      :visible.sync="dialog_general"
+      top="25vh"
+      width="420px"
+      :modal-append-to-body="false"
+      title="常规设置"
+      :close-on-click-modal="false"
+    >
+      <div class="general_settings">
+        <p class="general_title">节点编号：</p>
+        <p class="general_val">WF0000000101</p>
+        <p class="general_title">节点名称：</p>
+        <p class="general_input">
+          <el-input v-model="node_name" placeholder="请输入节点名称"></el-input>
+        </p>
+        <div class="dia_footer">
+          <el-button class="cancel" @click="generalCancel">取消</el-button>
+          <el-button class="submit" @click="generalSubmit">确定</el-button>
         </div>
       </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -161,6 +200,7 @@ export default {
           },
         },
       ],
+      nodeParamsList: [],
       linkMenu: [
         [
           {
@@ -172,6 +212,13 @@ export default {
           },
         ],
       ],
+      dialog_general: false,
+      nodeItem: {
+        id: "",
+        name: "",
+      },
+      node_name: "",
+      show_options_pop: false,
     };
   },
   mounted() {
@@ -230,10 +277,53 @@ export default {
           clientY - conf.offsetTop
         );
         // 添加节点
+        let query = { width: 120, height: 48, meta: {} };
+        if (conf.info.meta.type == 0) {
+          query.meta.type == 0;
+        } else if (conf.info.meta.type == 1) {
+          query.meta.type == 1;
+        } else if (conf.info.meta.type == 2) {
+          query.meta.type == 2;
+        }
+        if (!conf.info.meta.id) {
+          query.meta.id = parseInt(Math.random() * 1000 * 1000);
+        }
+        console.log(query);
         this.$refs.superFlow.addNode({
           coordinate,
-          ...conf.info,
+          ...query,
         });
+        if (
+          this.nodeParamsList.findIndex((item) => {
+            return item.id == query.meta.id;
+          }) == -1
+        ) {
+          let obj = {};
+          if (conf.info.meta.type == 0) {
+            obj = {
+              label: "开始",
+              name: "开始",
+              type: 0,
+              id: query.meta.id,
+            };
+          } else if (conf.info.meta.type == 1) {
+            obj = {
+              label: "结束",
+              name: "结束",
+              type: 1,
+              id: query.meta.id,
+            };
+          } else if (conf.info.meta.type == 2) {
+            obj = {
+              label: "普通节点",
+              name: "普通节点",
+              type: 2,
+              id: query.meta.id,
+            };
+          }
+          this.nodeParamsList.push(obj);
+          console.log(this.nodeParamsList);
+        }
         conf.isMove = false;
       }
       if (conf.ele) {
@@ -242,7 +332,6 @@ export default {
       }
     },
     nodeItemMouseDown(evt, info) {
-      info.meta.id = parseInt(Math.random() * 1000 * 1000);
       const { clientX, clientY, currentTarget } = evt;
       const { top, left } = evt.currentTarget.getBoundingClientRect();
       const conf = this.dragConf;
@@ -262,13 +351,76 @@ export default {
       ele.style.left = clientX - conf.offsetLeft + "px";
       this.$el.appendChild(this.dragConf.ele);
     },
-    clickItem(item) {
+    clickItem(index) {
+      let item = this.nodeParams(index);
+      this.nodeItem = item;
       console.log(item);
     },
+    blurItem() {
+      this.nodeItem = {
+        id: "",
+      };
+      console.log(this.nodeItem);
+    },
     getData() {
-      return this.$refs.superFlow.toJSON();
+      return {
+        obj: this.$refs.superFlow.toJSON(),
+        params: this.nodeParamsList,
+      };
     },
     handleChange() {},
+    generalSettings() {
+      let self = this;
+      if (self.nodeItem.id && self.nodeItem.id != "") {
+        if (self.nodeItem.type == 2) {
+          self.node_name = self.nodeParamsList.find((item) => {
+            return item.id == self.nodeItem.id;
+          }).name;
+          self.dialog_general = true;
+        } else {
+          self.$message({
+            message: "开始和结束节点不可被编辑",
+            type: "warning",
+          });
+        }
+      } else {
+        self.$message({
+          message: "请选择节点",
+          type: "warning",
+        });
+      }
+    },
+    nodeParams(id) {
+      let index = this.nodeParamsList.findIndex((item) => {
+        return item.id == id;
+      });
+      if (index != -1) {
+        return this.nodeParamsList[index];
+      } else {
+        return {};
+      }
+    },
+    generalCancel() {
+      this.dialog_general = false;
+    },
+    generalSubmit() {
+      let self = this;
+      if (self.nodeItem.type == 2) {
+        let index = self.nodeParamsList.findIndex((item) => {
+          return item.id == self.nodeItem.id;
+        });
+        if (index != -1) {
+          self.nodeParamsList[index].name = self.node_name;
+        } else {
+          self.$message({
+            message: "修改失败",
+            type: "error",
+          });
+        }
+      }
+
+      self.dialog_general = false;
+    },
   },
 };
 </script>
@@ -305,7 +457,7 @@ export default {
     text-align: center;
     .options_head {
       color: #242c43;
-      font-size: 14px;
+      font-size: 12px;
       font-weight: bold;
       margin-top: 30px;
     }
@@ -321,6 +473,53 @@ export default {
         height: 40px;
       }
     }
+    .options_item_1 {
+      margin-top: 20px;
+      cursor: pointer;
+      color: #242c43;
+      position: relative;
+      .options_img {
+        width: 40px;
+        height: 40px;
+      }
+      .options_pop {
+        display: none;
+      }
+      &:hover .options_pop {
+        position: absolute;
+        width: 250px;
+        height: 82px;
+        background-color: #0d1847;
+        border-radius: 10px;
+        z-index: 2;
+        top: 0;
+        right: 0;
+        animation: myfirst 1s;
+        display: flex;
+        overflow: hidden;
+        justify-content: space-around;
+        color: #ffffff;
+        font-size: 12px;
+        .options_pop_item {
+          padding-top: 10px;
+          .options_item_img {
+            width: 40px;
+            height: 40px;
+          }
+          .options_item_text {
+            white-space: nowrap;
+          }
+        }
+      }
+      @keyframes myfirst {
+        from {
+          width: 0;
+        }
+        to {
+          width: 250px;
+        }
+      }
+    }
   }
 }
 .node-item {
@@ -409,11 +608,6 @@ export default {
     background-color: transparent;
     border-radius: 8px;
     font-size: 16px;
-    &:focus {
-      box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
-      background-color: #515fe7;
-      color: #fff;
-    }
     /deep/ .node_span {
       text-align: center;
       overflow: hidden;
@@ -441,16 +635,77 @@ export default {
       color: #ffffff;
     }
     .flow-node-default {
+      width: 100%;
+      height: 100%;
+      line-height: 42px;
+      padding: 0 6px;
+      border-radius: 8px;
+      background-color: #fff;
+      border: solid 3px #b4c6f5;
+    }
+    .flow-node-default-active {
       width: 100%;
       height: 100%;
       line-height: 42px;
       padding: 0 6px;
       border-radius: 8px;
       border: solid 3px #b4c6f5;
+      box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
+      background-color: #515fe7;
+      color: #fff;
     }
   }
 }
 .super-flow__menu-container .super-flow__menu {
   width: 120px;
 }
+.super-flow-demo1 .el-dialog__wrapper {
+  padding-left: 180px;
+}
+.super-flow-demo1 .el-dialog__body {
+  padding: 20px;
+}
+.super-flow-demo1 >  .v-modal {
+  position: absolute;
+  border-radius: 8px;
+  width: calc(100% + 40px);
+  height: calc(100% + 230px);
+  top: -160px;
+  left: -20px;
+}
+.general_settings {
+  font-size: 14px;
+  text-align: left;
+  .general_title {
+    margin-bottom: 20px;
+    padding-left: 10px;
+  }
+  .general_val {
+    margin-bottom: 30px;
+    padding-left: 10px;
+  }
+  .general_input {
+    margin-bottom: 50px;
+  }
+}
+.dia_footer {
+  font-size: 14px;
+  text-align: center;
+  display: flex;
+  justify-content: flex-end;
+  .cancel {
+    background-color: #c3caf8;
+    color: #0f2683;
+    width: 90px;
+    height: 34px;
+    padding: 0 20px;
+  }
+  .submit {
+    background-color: #0f2683;
+    color: #f8f9fd;
+    width: 90px;
+    height: 34px;
+    padding: 0 20px;
+  }
+}
 </style>
\ No newline at end of file

src/pages/authority/menu/menus.vue

@@ -143,7 +143,7 @@ export default {
       rules: {
         menu_name: [
           { required: true, message: "请填写菜单名称", trigger: "blur" },
-          { min: 0, max: 8, message: "菜单名称不超过8位", trigger: "blur" }
+          { min: 0, max: 16, message: "菜单名称不超过16位", trigger: "blur" }
         ],
         visit_url: [
           { required: true, message: "请填写菜单访问地址", trigger: "blur" },

src/pages/data-analysis/data-analysis.vue

@@ -48,13 +48,13 @@ export default {
         path: `/data_analysis/service_control`,
       },
     ],
-    userNav1: [],
+    userNav2: [],
     navList: [],
   }),
   watch: {
-    "$route.fullPath"(path) {
-      this.initNavList();
-    },
+    // "$route.fullPath"(path) {
+    //   this.initNavList();
+    // },
   },
   methods: {
     initNavList() {
@@ -65,6 +65,7 @@ export default {
         this.navList = this.userNav;
       } else if (this.$store.state.userInfo.is_admin == 2) {
         this.navList = this.userNav1;
+        this.$router.push({ name: "orgServiceDataAnalysis" });
       } else if (this.$store.state.userInfo.is_admin == 1) {
         this.navList = this.userNav2;
       }

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

@@ -127,8 +127,7 @@ export default {
   methods: {
     verification() {
       let self = this;
-      let data = self.$refs.workFlow.getData();
-      console.log(data);
+      let data = JSON.parse(JSON.stringify(self.$refs.workFlow.getData()));
       let start_num = 0;
       let end_num = 0;
       let start_id = "";
@@ -137,7 +136,13 @@ export default {
       let end_after = 0;
       let in_edge = 0;
       let out_edge = 0;
-      data.nodeList.forEach((item) => {
+      let datas = { ...data.obj };
+      console.log(data);
+      datas.nodeList.forEach((item) => {
+        let da = data.params.find((nodep) => {
+          return nodep.id == item.meta.id;
+        });
+        item.meta = da;
         if (item.meta.type == 0) {
           start_num++;
           start_id = item.id;
@@ -147,14 +152,14 @@ export default {
           end_id = item.id;
         }
         if (
-          data.linkList.findIndex((el) => {
+          datas.linkList.findIndex((el) => {
             return el.startId == item.id;
           }) == -1 &&
           item.id != end_id
         ) {
           in_edge++;
         } else if (
-          data.linkList.findIndex((el) => {
+          datas.linkList.findIndex((el) => {
             return el.endId == item.id;
           }) == -1 &&
           item.id != start_id
@@ -162,7 +167,7 @@ export default {
           out_edge++;
         }
       });
-      data.linkList.forEach((item) => {
+      datas.linkList.forEach((item) => {
         if (start_id == item.endId) {
           start_before++;
         }
@@ -191,6 +196,7 @@ export default {
           type: "warning",
         });
       }
+      console.log(datas);
     },
     backToList() {
       this.$router.push("/message/directed_push");
@@ -250,11 +256,11 @@ export default {
 <style>
 .block_item .el-textarea__inner {
   border-radius: 8px;
-  background-color: #e3e5ef;
+  background-color: #f7f8f9;
   border: solid 1px #e3e5ef;
 }
 .block_item .el-input__inner {
-  background-color: #e3e5ef;
+  background-color: #f7f8f9;
   border: solid 1px #e3e5ef;
 }
 .block_item .el-select {