集优化项目菜单跳转问题处理

src/views/integrateOptimization/page/businessPages/topMenu.vue

@@ -9,10 +9,11 @@
                 </div>
             </template>
             <a-popover placement="bottom" v-if="showMore" class="show-more-style">
-                <template slot="content" >
-                    <div v-for="hiddenMenu in hiddenMenus" :key="hiddenMenu.name" class="hidden-menu-style" >
-                        <my-icon :type="hiddenMenu.iconType" class="icon-style" ></my-icon>
-                        <span @click="hiddenMenuClick(hiddenMenu)" class="menu-name-style" style="margin-left: 0.5rem;margin-top:0.5rem;cursor: pointer">{{hiddenMenu.title}}</span>
+                <template slot="content">
+                    <div v-for="hiddenMenu in hiddenMenus" :key="hiddenMenu.name" class="hidden-menu-style">
+                        <my-icon :type="hiddenMenu.iconType" class="icon-style"></my-icon>
+                        <span @click="hiddenMenuClick(hiddenMenu)" class="menu-name-style"
+                              style="margin-left: 0.5rem;margin-top:0.5rem;cursor: pointer">{{hiddenMenu.title}}</span>
                     </div>
                 </template>
                 <my-icon :type="showMoreIconType" class="icon-style"></my-icon>
@@ -42,7 +43,7 @@
                 windowWidth: document.body.clientWidth,
                 showMore: false,//是否展示更多按钮
                 showMoreTitle: "更多",
-                showMoreIconType:"icon-caidan",
+                showMoreIconType: "icon-caidan",
                 hiddenMenus: [],//隐藏的菜单集合
             }
         },
@@ -61,9 +62,9 @@
         },
         methods: {
             /*
-            * 计算菜单宽度和屏幕宽度之间的关系
-            * */
-            calcMenuWidth:function () {
+             * 计算菜单宽度和屏幕宽度之间的关系
+             * */
+            calcMenuWidth: function () {
                 this.menus = _.cloneDeep(this.$store.state.userStore.menus);//所有菜单项
                 let menuTotalWidth = 0;
                 let menuDomArr = document.getElementsByClassName("menu-style");
@@ -94,6 +95,29 @@
                         }
                         //展示更多
                         this.showMore = true;
+                        this.handleHiddenMenu();
+                    }
+                }
+            },
+            /*
+             * 处理跳转菜单为隐藏菜单
+             * */
+            handleHiddenMenu: function () {
+                let hiddenMenus = this.hiddenMenus;
+                let menuName = this.menuName;
+                for(let i = 0,len = hiddenMenus.length;i < len;i ++){
+                    if(menuName === hiddenMenus[i].name){
+                        this.showMoreTitle = hiddenMenus[i].title;
+                        this.showMoreIconType = hiddenMenus[i].iconType ? hiddenMenus[i].iconType : "";
+                        this.menuName = hiddenMenus[i].name;
+                        this.childMenuName = "";
+                        this.menuChildren = this.getMenuChildren();
+                        let path = hiddenMenus[i].path;
+                        if (this.menuChildren && this.menuChildren.length > 0) {
+                            path = this.menuChildren[0].path;
+                            this.childMenuName = this.menuChildren[0].name;
+                        }
+                        break;
                     }
                 }
             },
@@ -127,10 +151,10 @@
             /*
              * 隐藏菜单点击事件
              * */
-            hiddenMenuClick:function (menu) {
+            hiddenMenuClick: function (menu) {
                 if (this.menuName !== menu.name) {
                     this.showMoreTitle = menu.title;
-                    this.showMoreIconType = menu.iconType?menu.iconType:"";
+                    this.showMoreIconType = menu.iconType ? menu.iconType : "";
                     this.menuName = menu.name;
                     this.childMenuName = "";
                     this.menuChildren = this.getMenuChildren();
@@ -199,13 +223,13 @@
                     cursor: default;
                 }
             }
-            .public-menu-style{
+            .public-menu-style {
                 display: flex;
                 flex-direction: column;
-                .icon-style{
+                .icon-style {
                     font-size: 1rem;
                 }
-                .menu-name-style{
+                .menu-name-style {
                     font-size: 0.6rem;
                     margin-top: 0.2rem;
                 }
@@ -218,7 +242,7 @@
                 align-items: center;
                 color: white;
                 font-size: 1.2rem;
-                .icon-style{
+                .icon-style {
                     font-size: 1rem;
                 }
                 .menu-name-style {

src/views/integrateOptimization/page/homePage/fixedNavigation.vue

@@ -3,10 +3,10 @@
         <div v-for="menu in menus" :key="menu.iconType" class="menu-style" @mouseenter="mouseenter(menu)"
              @mouseleave="mouseleave(menu)">
             <span v-show="isOpen && !menu.isBigger">{{menu.title}}</span>
-            <my-icon v-show="!isOpen" :type="menu.iconType" :title="menu.title" class="menu-icon-style"></my-icon>
+            <my-icon v-show="!isOpen" :type="menu.iconType" :title="menu.title" class="menu-icon-style" @click="toReplace(menu)"></my-icon>
             <div v-show="isOpen && menu.isBigger" class="menu-bigger-style">
                 <my-icon :type="menu.iconType" class="bigger-menu-icon-style"></my-icon>
-                <span>{{menu.title}}</span>
+                <span @click="toReplace(menu)">{{menu.title}}</span>
             </div>
         </div>
         <div class="menu-style">
@@ -57,6 +57,12 @@
                     this.$set(menu,"isBigger",false);
                 }
             },
+            /*
+            * 路由跳转
+            * */
+            toReplace:function (menu) {
+                this.$emit("replace",menu);
+            }
         },
         components: {
             AIcon: Icon

src/views/integrateOptimization/page/homePage/homePage.vue

@@ -2,7 +2,7 @@
     <div class="system-home-page-style">
         <PageTop/>
         <BannerCarousel @replace="toReplace"/>
-        <FixedNavigation/>
+        <FixedNavigation @replace="toReplace"/>
         <BottomInfo/>
     </div>
 </template>