moreMenu

src/components/sumDoctorCheck/ButtonList.vue

@@ -260,7 +260,7 @@ export default {
                     console.log("audit", res.data);
                     if (res.code > -1) {
                         this.dataTransOpts.tableS.patient_register.isAudit = 'Y';
-                        // this.$message({ type: "success", message: `总检审核成功` });
+                        // this.dataTransOpts.refresh.patient_register.S++
                     }
                 })
                 .catch((err) => {
@@ -285,6 +285,7 @@ export default {
                     if (res.code != -1) {
                         this.dataTransOpts.tableS.patient_register.isAudit = 'N';
                         // this.$message({ type: "success", message: `取消总检审核成功` });
+                        // this.dataTransOpts.refresh.patient_register.S++
                     }
                 })
                 .catch((err) => {

src/views/Home.vue

@@ -6,7 +6,7 @@
           <img src="@/assets/images/logo2.png" alt="" style="width: 24px; height: 24px" />
           <div class="maintitle">神豚体检管理系统</div>
 
-          <!--动态生成菜单 add by pengj 'text-align: center;width:' + (window.pageWidth - 280) + 'px;display:flex;'-->
+          <!--动态生成菜单 add by pengj 'text-align: center;width:' + (window.pageWidth - 280) + 'px;display:flex;'       
           <div :style="'display:flex;justify-content:center;width:' + (window.pageWidth - 300) + 'px;'">
             <div v-for="menu in menuPriv" :key="menu.id"
               :class="className == menu.displayName ? `actived ${menu.displayName}` : menu.displayName">
@@ -21,6 +21,42 @@
               </el-dropdown>
             </div>
           </div>
+          --> 
+          <!--动态生成菜单支持多级 add by pengj -->
+          <div :style="'display:flex;justify-content:center;width:' + (window.pageWidth - 300) + 'px;'">
+            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="display: flex;">
+              <!--1级菜单-->  
+              <el-menu-item v-for="menu1 in menuPriv" :key="menu1.id" v-if="menu1.menuType == '1'" :index="menu1.id">
+                {{ menu1.displayName }}
+              </el-menu-item>
+              <el-submenu v-for="menu1 in menuPriv" :key="menu1.id" v-if="menu1.menuType == '0'" :index="menu1.id">
+                <template slot="title">{{ menu1.displayName }}</template>
+                <!--2级菜单-->
+                <el-menu-item v-for="menu2 in menu1.treeChildren" :key="menu2.id" v-if="menu2.menuType == '1'"
+                  :index="menu2.id">{{ menu2.displayName }}</el-menu-item>
+                <el-submenu v-for="menu2 in menu1.treeChildren" :key="menu2.id" v-if="menu2.menuType == '0'"
+                  :index="menu2.id">
+                  <template slot="title">{{ menu2.displayName }}</template>
+                  <!--3级菜单-->
+                  <el-menu-item v-for="menu3 in menu2.treeChildren" :key="menu3.id" v-if="menu3.menuType == '1'"
+                    :index="menu3.id">{{ menu3.displayName }}</el-menu-item>
+                  <el-submenu v-for="menu3 in menu2.treeChildren" :key="menu3.id" v-if="menu3.menuType == '0'"
+                    :index="menu3.id">
+                    <template slot="title">{{ menu3.displayName }}</template>
+                    <!--4级菜单-->
+                    <el-menu-item v-for="menu4 in menu3.treeChildren" :key="menu4.id" v-if="menu4.menuType == '1'"
+                      :index="menu4.id">{{ menu4.displayName }}</el-menu-item>
+                    <el-submenu v-for="menu4 in menu3.treeChildren" :key="menu4.id" v-if="menu4.menuType == '0'"
+                      :index="menu4.id">
+                      <template slot="title">{{ menu4.displayName }}</template>
+                    </el-submenu>
+                  </el-submenu>
+                </el-submenu>
+              </el-submenu>            
+            </el-menu>
+          </div>
+
+
           <!--  -->
           <div class="btn">
             <img src="@/assets/images/me.png" alt="" class="currentuser" />
@@ -284,10 +320,12 @@
 import router from "@/router";
 import { getapi, postapi } from "@/api/api";
 import { mapState } from "vuex";
+import { getTreeNode } from "../utlis/tree"
 
 export default {
   data() {
     return {
+      activeIndex: '0',
       menuPriv: [], // 菜单权限
       className: '',
       index: 1,
@@ -331,6 +369,14 @@ export default {
     this.getUserMenuPriv()
   },
   methods: {
+    // 菜单操作
+    handleSelect(key, keyPath) {
+      // console.log(key, keyPath);
+      // tree: any, childNodeName: any, idName: any, idVal: any
+      let node = getTreeNode(this.menuPriv,"treeChildren","id",key)
+      if(node) this.$router.push({ path: node.routeUrl });
+      
+    },
     //获取用户所有权限
     getUserAllPriv() {
       getapi('/api/app/menuinfo/getmymenuinfolist').then(res => {
@@ -345,9 +391,28 @@ export default {
       getapi('/api/app/menuinfo/getmymenuinfotreelist').then(res => {
         if (res.code > -1) {
           this.menuPriv = res.data
-          this.menuPriv = this.menuPriv.filter(e => {
-            return e.menuType == '0' || e.menuType == '1'
-          })
+          this.menuPriv = this.menuFilter(this.menuPriv)
+          console.log('this.menuPriv', this.menuPriv)
+        }
+      })
+    },
+
+    // 过滤菜单
+    menuFilter(menu){
+      return menu.filter(e => {
+        if(e.menuType == '0' || e.menuType == '1'){
+          if(e.treeChildren && e.treeChildren.length > 0){
+            let temp = e.treeChildren.filter(e1 => {return e1.menuType == '0' || e1.menuType == '1'})
+            if(temp.length > 0){
+              e.menuType = '0'
+              e.treeChildren = this.menuFilter(e.treeChildren)
+            }else{
+              e.menuType = '1'
+            }
+          }else{
+            e.menuType = '1'
+          }
+          return e
         }
       })
     },
@@ -400,7 +465,7 @@ export default {
       window.sessionStorage.clear();
       this.$router.push({ path: "/login" });
     },
-    
+
     //打开客户端调试工具
     toggleDevTools() {
       if (!this.$peisAPI) {
@@ -683,6 +748,31 @@ export default {
   left: 0;
 }
 
+::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title {
+  font-size: 14px;
+  height: 47px;
+  line-height: 47px;
+}
+
+::v-deep .el-menu--horizontal>.el-menu-item {
+  height: 40px;
+  line-height: 40px;
+}
+
+::v-deep .el-dropdown-menu__item,
+.el-menu-item {
+  font-size: 14px;
+  padding: 0 5px;
+}
+
+::v-deep .el-submenu__title {
+  padding: 0 0 0 5px;
+}
+
+::v-deep .el-icon-arrow-down:before {
+  content: "";
+}
+
 /* .project-dropdown{
   max-height:300px;
   overflow: auto;