From f093da99ecb963d19d62dc0f242f00b20bc8895c Mon Sep 17 00:00:00 2001
From: 疯狂的狮子li <15040126243@163.com>
Date: 星期三, 14 四月 2021 13:22:31 +0800
Subject: [PATCH] Merge branch 'master' of https://gitee.com/y_project/RuoYi-Vue into dev

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

diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue
new file mode 100644
index 0000000..3eebda4
--- /dev/null
+++ b/ruoyi-ui/src/components/TopNav/index.vue
@@ -0,0 +1,154 @@
+<template>
+  <el-menu
+    :default-active="activeMenu"
+    mode="horizontal"
+    @select="handleSelect"
+  >
+    <template v-for="(item, index) in topMenus">
+      <el-menu-item :index="item.path" :key="index" v-if="index < visibleNumber"
+        ><svg-icon :icon-class="item.meta.icon" />
+        {{ item.meta.title }}</el-menu-item
+      >
+    </template>
+
+    <!-- 椤堕儴鑿滃崟瓒呭嚭鏁伴噺鎶樺彔 -->
+    <el-submenu index="more" v-if="topMenus.length > visibleNumber">
+      <template slot="title">鏇村鑿滃崟</template>
+      <template v-for="(item, index) in topMenus">
+        <el-menu-item
+          :index="item.path"
+          :key="index"
+          v-if="index >= visibleNumber"
+          ><svg-icon :icon-class="item.meta.icon" />
+          {{ item.meta.title }}</el-menu-item
+        >
+      </template>
+    </el-submenu>
+  </el-menu>
+</template>
+
+<script>
+import { constantRoutes } from "@/router";
+
+// 涓嶉渶瑕佹縺娲荤殑璺敱
+const noactiveList = ["/user/profile", "/dict/type", "/gen/edit", "/job/log"];
+
+export default {
+  data() {
+    return {
+      // 椤堕儴鏍忓垵濮嬫暟
+      visibleNumber: 5,
+      // 鏄惁涓洪娆″姞杞�
+      isFrist: false,
+    };
+  },
+  computed: {
+    // 椤堕儴鏄剧ず鑿滃崟
+    topMenus() {
+      let topMenus = [];
+      this.routers.map((menu) => {
+        if (menu.hidden !== true) {
+          topMenus.push(menu);
+        }
+      });
+      return topMenus;
+    },
+    // 鎵�鏈夌殑璺敱淇℃伅
+    routers() {
+      return this.$store.state.permission.topbarRouters;
+    },
+    // 璁剧疆瀛愯矾鐢�
+    childrenMenus() {
+      var childrenMenus = [];
+      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;
+            router.children[item].parentPath = router.path;
+          }
+          childrenMenus.push(router.children[item]);
+        }
+      });
+      return constantRoutes.concat(childrenMenus);
+    },
+    // 榛樿婵�娲荤殑鑿滃崟
+    activeMenu() {
+      const path = this.$route.path;
+      let activePath = this.routers[0].path;
+      var noactive = noactiveList.some(function (item) {
+        return path.indexOf(item) !== -1;
+      });
+      if (noactive) {
+        return;
+      }
+      if (path.lastIndexOf("/") > 0) {
+        const tmpPath = path.substring(1, path.length);
+        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
+      } else if ("/index" == path || "" == path) {
+        if (!this.isFrist) {
+          this.isFrist = true;
+        } else {
+          activePath = "index";
+        }
+      }
+      this.activeRoutes(activePath);
+      return activePath;
+    },
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.setVisibleNumber)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setVisibleNumber)
+  },
+  mounted() {
+    this.setVisibleNumber();
+  },
+  methods: {
+    // 鏍规嵁瀹藉害璁＄畻璁剧疆鏄剧ず鏍忔暟
+    setVisibleNumber() {
+      const width = document.body.getBoundingClientRect().width / 3;
+      this.visibleNumber = parseInt(width / 85);
+    },
+    // 鑿滃崟閫夋嫨浜嬩欢
+    handleSelect(key, keyPath) {
+      if (key.indexOf("http://") !== -1 || key.indexOf("https://") !== -1) {
+        // http(s):// 璺緞鏂扮獥鍙ｆ墦寮�
+        window.open(key, "_blank");
+      } else {
+        this.activeRoutes(key);
+      }
+    },
+    // 褰撳墠婵�娲荤殑璺敱
+    activeRoutes(key) {
+      var routes = [];
+      if (this.childrenMenus && this.childrenMenus.length > 0) {
+        this.childrenMenus.map((item) => {
+          if (key == item.parentPath || (key == "index" && "" == item.path)) {
+            routes.push(item);
+          }
+        });
+      }
+      this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-menu--horizontal > .el-menu-item {
+  float: left;
+  height: 50px;
+  line-height: 50px;
+  margin: 0;
+  border-bottom: 3px solid transparent;
+  color: #999093;
+  padding: 0 5px;
+  margin: 0 10px;
+}
+
+.el-menu--horizontal > .el-menu-item.is-active {
+  border-bottom: 3px solid #409eff;
+  color: #303133;
+}
+</style>

--
Gitblit v1.9.3