From f93a3e896a7d81f744b72e8069b8226bfdec8ade Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期六, 18 三月 2023 11:41:37 +0800
Subject: [PATCH] 部门管理导入导出
---
src/views/layout/components/Menu/index.vue | 160 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 98 insertions(+), 62 deletions(-)
diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue
index 3599b9d..b92563b 100644
--- a/src/views/layout/components/Menu/index.vue
+++ b/src/views/layout/components/Menu/index.vue
@@ -2,54 +2,56 @@
<div>
<!-- 渚ц竟瀵艰埅鏍� -->
<el-aside width="200px">
- <h2 class="siderbar-title">閬傛槍鎵ф硶骞冲彴</h2>
+ <h2 class="siderbar-title" @click="toHome()">閬傛槍鎵ф硶骞冲彴</h2>
<el-scrollbar>
<!-- 璺敱 -->
- <el-menu router class="el-menu-vertical" :default-active="$route.path">
+ <el-menu router
+ class="el-menu-vertical"
+ :default-active="$route.path.name"
+ @select="handleSelect">
<el-submenu
- :index="menu.url ? menu.url : menu.id.toString()"
+ :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 :icon-class="menu.icon"></svg-icon>
+ <svg-icon class="icon-title" :icon-class="menu.icon"></svg-icon>
</span>
<span class="fisrtSpan">{{ menu.title }}</span>
</template>
- <template v-if="menu.children.length > 0">
- <template v-for="secondMenu in menu.children">
+ <template v-if="menu.menuVoArrayList.length > 0">
+ <template v-for="secondMenu in menu.menuVoArrayList">
<el-submenu
:key="secondMenu.id"
- v-if="secondMenu.children.length > 0"
- :index="
- secondMenu.url ? secondMenu.url : secondMenu.id.toString()
- "
+ 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.children"
+ v-for="thirdMenu in secondMenu.menuVoArrayList"
:key="thirdMenu.id"
:index="`${thirdMenu.id}`"
:route="{ name: thirdMenu.url }"
- >{{ thirdMenu.title }}</el-menu-item
+ v-if="thirdMenu.id!='65'"
+ >
+ <template>
+ {{thirdMenu.title }}
+ </template></el-menu-item
>
</el-submenu>
-
<el-menu-item
v-else
- :key="secondMenu.id"
:index="`${secondMenu.id}`"
:route="{ name: secondMenu.url }"
- >{{ secondMenu.title }}</el-menu-item
- >
+ >{{ secondMenu.title }}</el-menu-item>
</template>
</template>
-
<el-menu-item
v-else
:key="menu.id"
@@ -65,39 +67,43 @@
</template>
<script>
+import users from "@/api/users";
+import router from "@/router";
+
export default {
data() {
return {
menuList: [],
+ isActive:''
};
},
created() {
- // this.getMenuList();
this.loadMenu();
},
+ watch: {
+ $route(){
+ this.handleSelect(this.$route.fullPath)
+ console.log(this.$route)
+ }
+ },
methods: {
+ handleSelect(path){
+ this.isActive = path
+ },
loadMenu() {
- const info = JSON.parse(sessionStorage.getItem("user"));
- var timer;
- if (info && info.menus) {
- clearTimeout(timer);
- this.menuList = info.menus;
- } else {
- timer = setInterval(() => {
- this.loadMenu();
- }, 1000);
- }
+ 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))
},
- // 鑾峰彇鑿滃崟鍒楄〃
- getMenuList() {
- let arr;
- this.$axios({
- method: "get",
- url: "sccg/system/portal/menu/search_myself",
- }).then((res) => {
- console.log(res);
- });
- },
+ toHome(){
+ router.push("/home")
+ }
},
};
</script>
@@ -105,15 +111,17 @@
<style lang="scss" scpoed>
.icon-padding {
padding-right: 10px;
+ .icon-title{
+ width: 36px;
+ height: 36px;
+ }
}
-
.el-aside {
- background: #07162e;
+ background: #313350;
color: #e9eef3;
text-align: center;
box-sizing: border-box;
position: relative;
-
// 鍥哄畾鏍囬
.siderbar-title {
position: fixed;
@@ -125,60 +133,89 @@
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(#07162e, #0f2b56);
+ background: linear-gradient(#313350, #0f2b56);
border: 0;
-
+ font-size: 16px;
+ .is-opened{
+ .fisrtSpan{
+ color: #22d3eb;
+ }
+ }
.firstMenu {
- background: #07162e;
+ 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: #07162e;
+ background-color: #313350;
+ font-size: 16px;
+ // border-bottom: 0.5px solid #7c7979;
}
-
.el-menu-item:hover {
- background-color: #092c4a;
+ background-color: #409EFF;
color: #22d3eb;
}
-
- .is-active {
- background-color: #07162e;
- 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;
@@ -193,10 +230,9 @@
background-color: #092c4a;
}
}
-
.el-scrollbar__wrap {
overflow-x: hidden;
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0