From 3f05ed6ffa5428f44d8ee89233a21561c7e3be8f Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期四, 17 六月 2021 20:17:42 +0800
Subject: [PATCH] 封装iframe组件

---
 ruoyi-ui/src/components/TopNav/index.vue |   79 +++++++++++++++++++++++++++++----------
 1 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue
index fb15c59..d89930a 100644
--- a/ruoyi-ui/src/components/TopNav/index.vue
+++ b/ruoyi-ui/src/components/TopNav/index.vue
@@ -5,7 +5,7 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :index="item.path" :key="index" v-if="index < visibleNumber"
+      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
         ><svg-icon :icon-class="item.meta.icon" />
         {{ item.meta.title }}</el-menu-item
       >
@@ -37,15 +37,28 @@
       visibleNumber: 5,
       // 是否为首次加载
       isFrist: false,
+      // 当前激活菜单的 index
+      currentIndex: undefined
     };
   },
   computed: {
+    theme() {
+      return this.$store.state.settings.theme;
+    },
     // 顶部显示菜单
     topMenus() {
-      return this.routers.map((menu) => ({
-        ...menu,
-        children: undefined,
-      }));
+      let topMenus = [];
+      this.routers.map((menu) => {
+        if (menu.hidden !== true) {
+          // 兼容顶部栏一级菜单内部跳转
+          if (menu.path === "/") {
+              topMenus.push(menu.children[0]);
+          } else {
+              topMenus.push(menu);
+          }
+        }
+      });
+      return topMenus;
     },
     // 所有的路由信息
     routers() {
@@ -57,7 +70,13 @@
       this.routers.map((router) => {
         for (var item in router.children) {
           if (router.children[item].parentPath === undefined) {
-            router.children[item].path = router.path + "/" + router.children[item].path;
+            if(router.path === "/") {
+              router.children[item].path = "/redirect/" + router.children[item].path;
+            } else {
+			  if(!this.ishttp(router.children[item].path)) {
+                router.children[item].path = router.path + "/" + router.children[item].path;
+			  }
+            }
             router.children[item].parentPath = router.path;
           }
           childrenMenus.push(router.children[item]);
@@ -79,9 +98,19 @@
           activePath = "index";
         }
       }
-      this.activeRoutes(activePath);
+      var routes = this.activeRoutes(activePath);
+      if (routes.length === 0) {
+        activePath = this.currentIndex || this.routers[0].path
+        this.activeRoutes(activePath);
+      }
       return activePath;
     },
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.setVisibleNumber)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setVisibleNumber)
   },
   mounted() {
     this.setVisibleNumber();
@@ -89,22 +118,20 @@
   methods: {
     // 根据宽度计算设置显示栏数
     setVisibleNumber() {
-      const width = document.body.getBoundingClientRect().width - 200;
-      const elWidth = this.$el.getBoundingClientRect().width;
-      const menuItemNodes = this.$el.children;
-      const menuWidth = Array.from(menuItemNodes).map(
-        (i) => i.getBoundingClientRect().width
-      );
-      this.visibleNumber = (
-        parseInt(width - elWidth) / parseInt(menuWidth)
-      ).toFixed(0);
+      const width = document.body.getBoundingClientRect().width / 3;
+      this.visibleNumber = parseInt(width / 85);
     },
     // 菜单选择事件
     handleSelect(key, keyPath) {
-      if (key.indexOf("http://") !== -1 || key.indexOf("https://") !== -1) {
+      this.currentIndex = key;
+      if (this.ishttp(key)) {
         // http(s):// 路径新窗口打开
         window.open(key, "_blank");
+      } else if (key.indexOf("/redirect") !== -1) {
+        // /redirect 路径内部打开
+        this.$router.push({ path: key.replace("/redirect", "") });
       } else {
+        // 显示左侧联动菜单
         this.activeRoutes(key);
       }
     },
@@ -118,13 +145,19 @@
           }
         });
       }
-      this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+      if(routes.length > 0) {
+        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+      }
+      return routes;
     },
+	ishttp(url) {
+      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
+    }
   },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .el-menu--horizontal > .el-menu-item {
   float: left;
   height: 50px;
@@ -137,7 +170,13 @@
 }
 
 .el-menu--horizontal > .el-menu-item.is-active {
-  border-bottom: 3px solid #409eff;
+  border-bottom: 3px solid #{'var(--theme)'};
   color: #303133;
 }
+
+/* submenu item */
+.el-menu--horizontal > .el-submenu .el-submenu__title {
+	height: 50px !important;
+	line-height: 50px !important;
+}
 </style>

--
Gitblit v1.9.2