From 2c9c597b6d652026606ff8c9fc6c8be50e62d801 Mon Sep 17 00:00:00 2001
From: gongdi <410827992@qq.com>
Date: Thu, 11 Nov 2021 16:35:09 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E4=BC=98=E5=8C=96=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E8=B7=B3=E8=BD=AC=E9=97=AE=E9=A2=98=E5=A4=84?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page/businessPages/topMenu.vue            | 52 ++++++++++++++-----
 .../page/homePage/fixedNavigation.vue         | 10 +++-
 .../page/homePage/homePage.vue                |  2 +-
 3 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/views/integrateOptimization/page/businessPages/topMenu.vue b/src/views/integrateOptimization/page/businessPages/topMenu.vue
index 5606ec6..4479f07 100644
--- a/src/views/integrateOptimization/page/businessPages/topMenu.vue
+++ b/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 {
diff --git a/src/views/integrateOptimization/page/homePage/fixedNavigation.vue b/src/views/integrateOptimization/page/homePage/fixedNavigation.vue
index bf92376..9ad5bbc 100644
--- a/src/views/integrateOptimization/page/homePage/fixedNavigation.vue
+++ b/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
diff --git a/src/views/integrateOptimization/page/homePage/homePage.vue b/src/views/integrateOptimization/page/homePage/homePage.vue
index 995da7f..c7f934f 100644
--- a/src/views/integrateOptimization/page/homePage/homePage.vue
+++ b/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>