From 43d76e599091dc6b79b51f89c79514b50e33ea35 Mon Sep 17 00:00:00 2001 From: fuzui <73400@163.com> Date: 星期四, 16 十二月 2021 02:18:48 +0800 Subject: [PATCH] fix: cron组件中周回显bug --- ruoyi-ui/src/components/TopNav/index.vue | 97 ++++++++++++++++++++++++++++++++++-------------- 1 files changed, 69 insertions(+), 28 deletions(-) diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue index 3eebda4..1b7c4d9 100644 --- a/ruoyi-ui/src/components/TopNav/index.vue +++ b/ruoyi-ui/src/components/TopNav/index.vue @@ -5,14 +5,14 @@ @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 > </template> <!-- 顶部菜单超出数量折叠 --> - <el-submenu index="more" v-if="topMenus.length > visibleNumber"> + <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber"> <template slot="title">更多菜单</template> <template v-for="(item, index) in topMenus"> <el-menu-item @@ -30,9 +30,6 @@ <script> import { constantRoutes } from "@/router"; -// 不需要激活的路由 -const noactiveList = ["/user/profile", "/dict/type", "/gen/edit", "/job/log"]; - export default { data() { return { @@ -40,15 +37,25 @@ visibleNumber: 5, // 是否为首次加载 isFrist: false, + // 当前激活菜单的 index + currentIndex: undefined }; }, computed: { + theme() { + return this.$store.state.settings.theme; + }, // 顶部显示菜单 topMenus() { let topMenus = []; this.routers.map((menu) => { if (menu.hidden !== true) { - topMenus.push(menu); + // 兼容顶部栏一级菜单内部跳转 + if (menu.path === "/") { + topMenus.push(menu.children[0]); + } else { + topMenus.push(menu); + } } }); return topMenus; @@ -63,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]); @@ -74,13 +87,7 @@ // 默认激活的菜单 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; - } + let activePath = this.defaultRouter(); if (path.lastIndexOf("/") > 0) { const tmpPath = path.substring(1, path.length); activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); @@ -91,7 +98,11 @@ activePath = "index"; } } - this.activeRoutes(activePath); + var routes = this.activeRoutes(activePath); + if (routes.length === 0) { + activePath = this.currentIndex || this.defaultRouter() + this.activeRoutes(activePath); + } return activePath; }, }, @@ -110,12 +121,28 @@ const width = document.body.getBoundingClientRect().width / 3; this.visibleNumber = parseInt(width / 85); }, + // 默认激活的路由 + defaultRouter() { + let router; + Object.keys(this.routers).some((key) => { + if (!this.routers[key].hidden) { + router = this.routers[key].path; + return true; + } + }); + return router; + }, // 菜单选择事件 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); } }, @@ -129,26 +156,40 @@ } }); } - 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> -.el-menu--horizontal > .el-menu-item { +<style lang="scss"> +.topmenu-container.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; + height: 50px !important; + line-height: 50px !important; + color: #999093 !important; + padding: 0 5px !important; + margin: 0 10px !important; } -.el-menu--horizontal > .el-menu-item.is-active { - border-bottom: 3px solid #409eff; +.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title { + border-bottom: 2px solid #{'var(--theme)'} !important; color: #303133; } + +/* submenu item */ +.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title { + float: left; + height: 50px !important; + line-height: 50px !important; + color: #999093 !important; + padding: 0 5px !important; + margin: 0 10px !important; +} </style> -- Gitblit v1.9.2