From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 16 七月 2025 22:39:23 +0800
Subject: [PATCH] 添加时间筛选
---
src/views/layout/components/Menu/index.vue | 449 +++++++++++++++++++++++++++++--------------------------
1 files changed, 236 insertions(+), 213 deletions(-)
diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue
index 90d3997..5302c98 100644
--- a/src/views/layout/components/Menu/index.vue
+++ b/src/views/layout/components/Menu/index.vue
@@ -1,69 +1,88 @@
<template>
- <div>
- <!-- 渚ц竟瀵艰埅鏍� -->
- <el-aside width="200px">
- <h2 class="siderbar-title" @click="toHome()">閬傛槍鎵ф硶骞冲彴</h2>
- <el-scrollbar>
- <!-- 璺敱 -->
- <el-menu router
- class="el-menu-vertical"
- :default-active="$route.path.name"
- @select="handleSelect">
- <el-submenu
- :index="String(menu.id)"
- v-for="menu in menuList"
- :key="menu.id"
- class="firstMenu"
- >
- <template slot="title">
- <span slot="prefix" class="icon-padding fisrtSpan">
- <svg-icon class="icon-title" :icon-class="menu.icon"></svg-icon>
- </span>
- <span class="fisrtSpan">{{ menu.title }}</span>
- </template>
- <template v-if="menu.menuVoArrayList.length > 0">
- <template v-for="secondMenu in menu.menuVoArrayList">
- <el-submenu
- :key="secondMenu.id"
- v-if="secondMenu.menuVoArrayList.length > 0"
- :index="secondMenu.url ? secondMenu.url : secondMenu.id.toString()"
- class="secondMenu"
- :class="secondMenu.menuVoArrayList.length > 0?'is-Active':'none-Active'"
+ <div>
+ <!-- 渚ц竟瀵艰埅鏍� -->
+ <el-aside width="200px">
+ <h2 class="siderbar-title" @click="toHome()">閬傛槍鎵ф硶骞冲彴</h2>
+ <el-scrollbar>
+ <!-- 璺敱 -->
+ <el-menu
+ router
+ class="el-menu-vertical"
+ :default-active="$route.path.name"
+ @select="handleSelect"
>
- <template slot="title">
- <span class="secondSpan">{{ secondMenu.title }}</span>
- </template>
- <el-menu-item
- v-for="thirdMenu in secondMenu.menuVoArrayList"
- :key="thirdMenu.id"
- :index="`${thirdMenu.id}`"
- :route="{ name: thirdMenu.url }"
- v-if="thirdMenu.id!='63'&&thirdMenu.id!='65'"
+ <el-submenu
+ :index="String(menu.id)"
+ v-for="menu in menuList"
+ :key="menu.id"
+ class="firstMenu"
>
- <template>
- {{thirdMenu.title }}
- </template></el-menu-item
- >
- </el-submenu>
- <el-menu-item
- v-else
- :index="`${secondMenu.id}`"
- :route="{ name: secondMenu.url }"
- >{{ secondMenu.title }}</el-menu-item>
- </template>
- </template>
- <el-menu-item
- v-else
- :key="menu.id"
- :index="`${menu.id}`"
- :route="{ name: menu.url }"
- >{{ menu.title }}</el-menu-item
- >
- </el-submenu>
- </el-menu>
- </el-scrollbar>
- </el-aside>
- </div>
+ <template slot="title">
+ <span slot="prefix" class="icon-padding fisrtSpan">
+ <svg-icon
+ class="icon-title"
+ v-bind:class="menu.icon"
+ :icon-class="menu.icon"
+ ></svg-icon>
+ </span>
+ <span class="fisrtSpan">{{ menu.title }}</span>
+ </template>
+ <template v-if="menu.menuVoArrayList.length > 0">
+ <template
+ v-for="secondMenu in menu.menuVoArrayList"
+ >
+ <el-submenu
+ :key="secondMenu.id"
+ v-if="secondMenu.menuVoArrayList.length > 0"
+ :index="
+ secondMenu.url
+ ? secondMenu.url
+ : secondMenu.id.toString()
+ "
+ class="secondMenu"
+ :class="
+ secondMenu.menuVoArrayList.length > 0
+ ? 'is-Active'
+ : 'none-Active'
+ "
+ >
+ <template slot="title">
+ <span class="secondSpan">{{
+ secondMenu.title
+ }}</span>
+ </template>
+ <el-menu-item
+ v-for="thirdMenu in secondMenu.menuVoArrayList"
+ :key="thirdMenu.id"
+ :index="`${thirdMenu.id}`"
+ :route="{ name: thirdMenu.url }"
+ v-if="thirdMenu.id != '65'"
+ >
+ <template>
+ {{ thirdMenu.title }}
+ </template></el-menu-item
+ >
+ </el-submenu>
+ <el-menu-item
+ v-else
+ :index="`${secondMenu.id}`"
+ :route="{ name: secondMenu.url }"
+ >{{ secondMenu.title }}</el-menu-item
+ >
+ </template>
+ </template>
+ <el-menu-item
+ v-else
+ :key="menu.id"
+ :index="`${menu.id}`"
+ :route="{ name: menu.url }"
+ >{{ menu.title }}</el-menu-item
+ >
+ </el-submenu>
+ </el-menu>
+ </el-scrollbar>
+ </el-aside>
+ </div>
</template>
<script>
@@ -71,168 +90,172 @@
import router from "@/router";
export default {
- data() {
- return {
- menuList: [],
- isActive:''
- };
- },
- created() {
- this.loadMenu();
- },
- watch: {
- $route(){
- this.handleSelect(this.$route.fullPath)
- console.log(this.$route)
- }
- },
- methods: {
- handleSelect(path){
- this.isActive = path
+ data() {
+ return {
+ menuList: [],
+ isActive: ''
+ };
},
- loadMenu() {
- const userName = sessionStorage.getItem('name');
- users.getMenu({ name: userName })
- .then(res => {
- // console.log(res)
- // debugger
- this.menuList = res.menus;
- sessionStorage.setItem('user', JSON.stringify(res));
- })
- .catch(err => this.$message.error(err))
+ created() {
+ this.loadMenu();
},
- toHome(){
- router.push("/home")
- }
- },
+ watch: {
+ $route() {
+ this.handleSelect(this.$route.fullPath)
+ },
+ '$route.path'(toPath, fromPath) {
+ this.handleSelect(toPath)
+ this.$router.push({ path: toPath })
+ },
+ },
+
+ methods: {
+ handleSelect(path) {
+ this.isActive = path
+ },
+ loadMenu() {
+ const userName = sessionStorage.getItem('name');
+ users.getMenu({ name: userName })
+ .then(res => {
+ this.menuList = res.menus;
+ sessionStorage.setItem('user', JSON.stringify(res));
+ })
+ .catch(err => this.$message.error(err))
+ },
+ toHome() {
+ router.push("/home")
+ }
+ },
};
</script>
<style lang="scss" scpoed>
.icon-padding {
- padding-right: 10px;
- .icon-title{
- width: 36px;
- height: 36px;
- }
+ padding-right: 10px;
+ .icon-title {
+ width: 36px;
+ height: 36px;
+ }
+}
+.smoke {
+ padding: 5px;
}
.el-aside {
- background: #313350;
- color: #e9eef3;
- text-align: center;
- box-sizing: border-box;
- position: relative;
- // 鍥哄畾鏍囬
- .siderbar-title {
- position: fixed;
+ background: #313350;
+ color: #e9eef3;
text-align: center;
- margin: 0;
- font-size: 26px;
- width: 200px;
- line-height: 66px;
- top: 0;
- left: 0;
- z-index: 999;
- cursor: pointer;
- }
- .el-scrollbar {
- height: calc(100vh - 66px);
- margin-top: 66px;
box-sizing: border-box;
- .el-menu {
- background: linear-gradient(#313350, #0f2b56);
- border: 0;
- font-size: 16px;
- .is-opened{
- .fisrtSpan{
- color: #22d3eb;
- }
- }
- .firstMenu {
- background: #313350;
- text-align: left;
- //border-bottom:1px solid #ccc ;
- &:hover > .el-submenu__title {
- background-color: #092c4a;
- }
- &:hover .fisrtSpan {
- color: #22d3eb;
- }
- span,
- span {
- color: #e9eef3;
- font-size: 16px;
- }
- .el-menu{
- .is-active {
- background-color: #409EFF;
- color: #fff;
- }
- .is-Active{
- background-color: #092c4a;
- color: #fff;
- }
- }
- .el-menu-item {
- color: #e9eef3;
- background-color: #313350;
- font-size: 16px;
- // border-bottom: 0.5px solid #7c7979;
- }
- .el-menu-item:hover {
- background-color: #409EFF;
- color: #22d3eb;
- }
- .is-opened{
- .secondSpan{
- color: #22d3eb;
- }
- }
- .secondMenu{
- //border-bottom:1px solid #ccc ;
- .is-active {
- background-color: #409EFF;
- color: #22d3eb;
- }
- }
- }
- .secondMenu {
-
- &:hover > .el-submenu__title {
- background-color: #092c4a;
- }
- .secondSpan{
- }
- &:hover .secondSpan {
- color: #22d3eb;
- }
- .is-opened{
- .el-submenu__title{
- background-color: #fff;
- }
- }
- .is-active {
- background-color: #409EFF;
- color: #fff;
- }
- }
- .thirdMenu {
- &:hover > .el-submenu__title {
- background-color: #092c4a;
- }
-
- &:hover .thirdSpan {
- color: #22d3eb;
- }
- }
-
- .is-active {
- background-color: #092c4a;
- }
+ position: relative;
+ // 鍥哄畾鏍囬
+ .siderbar-title {
+ position: fixed;
+ text-align: center;
+ margin: 0;
+ font-size: 26px;
+ width: 200px;
+ line-height: 66px;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ cursor: pointer;
}
- .el-scrollbar__wrap {
- overflow-x: hidden;
+ .el-scrollbar {
+ height: calc(100vh - 66px);
+ margin-top: 66px;
+ box-sizing: border-box;
+ .el-menu {
+ background: linear-gradient(#313350, #0f2b56);
+ border: 0;
+ font-size: 16px;
+ .is-opened {
+ .fisrtSpan {
+ color: #22d3eb;
+ }
+ }
+ .firstMenu {
+ background: #313350;
+ text-align: left;
+ //border-bottom:1px solid #ccc ;
+ &:hover > .el-submenu__title {
+ background-color: #092c4a;
+ }
+ &:hover .fisrtSpan {
+ color: #22d3eb;
+ }
+ span,
+ span {
+ color: #e9eef3;
+ font-size: 16px;
+ }
+ .el-menu {
+ .is-active {
+ background-color: #409eff;
+ color: #fff;
+ }
+ .is-Active {
+ background-color: #092c4a;
+ color: #fff;
+ }
+ }
+ .el-menu-item {
+ color: #e9eef3;
+ background-color: #313350;
+ font-size: 16px;
+ // border-bottom: 0.5px solid #7c7979;
+ }
+ .el-menu-item:hover {
+ background-color: #409eff;
+ color: #22d3eb;
+ }
+ .is-opened {
+ .secondSpan {
+ color: #22d3eb;
+ }
+ }
+ .secondMenu {
+ //border-bottom:1px solid #ccc ;
+ .is-active {
+ background-color: #409eff;
+ color: #22d3eb;
+ }
+ }
+ }
+ .secondMenu {
+ &:hover > .el-submenu__title {
+ background-color: #092c4a;
+ }
+ .secondSpan {
+ }
+ &:hover .secondSpan {
+ color: #22d3eb;
+ }
+ .is-opened {
+ .el-submenu__title {
+ background-color: #fff;
+ }
+ }
+ .is-active {
+ background-color: #409eff;
+ color: #fff;
+ }
+ }
+ .thirdMenu {
+ &:hover > .el-submenu__title {
+ background-color: #092c4a;
+ }
+
+ &:hover .thirdSpan {
+ color: #22d3eb;
+ }
+ }
+
+ .is-active {
+ background-color: #092c4a;
+ }
+ }
+ .el-scrollbar__wrap {
+ overflow-x: hidden;
+ }
}
- }
}
</style>
--
Gitblit v1.8.0