|
@@ -1,26 +1,30 @@
|
|
|
<template>
|
|
|
- <div :class="{'has-logo':showLogo}">
|
|
|
+ <div :class="{ 'has-logo': showLogo }">
|
|
|
<!-- <logo v-if="showLogo"
|
|
|
:collapse="false" /> -->
|
|
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
|
|
<!-- -->
|
|
|
- <el-menu :default-active="activeMenu"
|
|
|
- :collapse='false'
|
|
|
- :background-color="variables.menuBg"
|
|
|
- :text-color="variables.menuText"
|
|
|
- :unique-opened="true"
|
|
|
- :active-text-color="variables.menuActiveText2"
|
|
|
- :collapse-transition="true"
|
|
|
- mode="vertical">
|
|
|
+ <el-menu
|
|
|
+ :default-active="activeMenu"
|
|
|
+ :collapse="false"
|
|
|
+ :background-color="variables.menuBg"
|
|
|
+ :text-color="variables.menuText"
|
|
|
+ :unique-opened="true"
|
|
|
+ :active-text-color="variables.menuActiveText2"
|
|
|
+ :collapse-transition="true"
|
|
|
+ mode="vertical"
|
|
|
+ >
|
|
|
<template v-for="route in permission_routes">
|
|
|
<template v-if="!route.hidden">
|
|
|
<!-- <sidebar-item v-for="route2 in route.children" :key="route.path + '/' + route2.path" :item="route2" :base-path="route.path" :resolve-path="route.path" :active-top-menu="getTopMenuActive" /> -->
|
|
|
<!-- <sidebar-menu-item v-for="route2 in route.children" :key="route.path + '/' + route2.path" :routes="route2" :base-path="route.path" :resolve-path="route.path" :active-top-menu="getTopMenuActive"/> -->
|
|
|
- <sidebar-item v-for="(route2) in route.children"
|
|
|
- :key="route2.id"
|
|
|
- :item="route2"
|
|
|
- :active-top-menu="getTopMenuActive"
|
|
|
- :base-path="route2.path" />
|
|
|
+ <sidebar-item
|
|
|
+ v-for="route2 in route.children"
|
|
|
+ :key="route2.id"
|
|
|
+ :item="route2"
|
|
|
+ :active-top-menu="getTopMenuActive"
|
|
|
+ :base-path="route2.path"
|
|
|
+ />
|
|
|
</template>
|
|
|
</template>
|
|
|
<!-- <sidebar-item v-for="(route,index) in permission_routes"
|
|
@@ -33,45 +37,45 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import Logo from './Logo'
|
|
|
-import SidebarMenuItem from './SidebarMenuItem'
|
|
|
-import SidebarItem from './SidebarItem'
|
|
|
-import variables from '@/styles/variables.scss'
|
|
|
-import { getBelongTopMenuPath, getActiveSidebarMenuPath } from '@/utils/permission';
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import Logo from "./Logo";
|
|
|
+import SidebarMenuItem from "./SidebarMenuItem";
|
|
|
+import SidebarItem from "./SidebarItem";
|
|
|
+import variables from "@/styles/variables.scss";
|
|
|
+import {
|
|
|
+ getBelongTopMenuPath,
|
|
|
+ getActiveSidebarMenuPath,
|
|
|
+} from "@/utils/permission";
|
|
|
export default {
|
|
|
components: { SidebarItem, Logo, SidebarMenuItem },
|
|
|
// mounted () {
|
|
|
// },
|
|
|
computed: {
|
|
|
- ...mapGetters([
|
|
|
- 'sidebar',
|
|
|
- 'permission_routes'
|
|
|
- ]),
|
|
|
+ ...mapGetters(["sidebar", "permission_routes"]),
|
|
|
// routes () {
|
|
|
// return this.$router.options.routes
|
|
|
// },
|
|
|
- activeMenu () {
|
|
|
- const route = this.$route
|
|
|
- const { meta, path } = route
|
|
|
+ activeMenu() {
|
|
|
+ const route = this.$route;
|
|
|
+ const { meta, path } = route;
|
|
|
// if set path, the sidebar will highlight the path you set
|
|
|
// 设置高亮的位置
|
|
|
if (meta.activeMenu) {
|
|
|
- return meta.activeMenu
|
|
|
+ return meta.activeMenu;
|
|
|
}
|
|
|
// console.log(meta, path)
|
|
|
- return path
|
|
|
+ return path;
|
|
|
},
|
|
|
- showLogo () {
|
|
|
- return this.$store.state.settings.sidebarLogo
|
|
|
+ showLogo() {
|
|
|
+ return this.$store.state.settings.sidebarLogo;
|
|
|
},
|
|
|
- variables () {
|
|
|
- return variables
|
|
|
+ variables() {
|
|
|
+ return variables;
|
|
|
},
|
|
|
- isCollapse () {
|
|
|
- return false
|
|
|
+ isCollapse() {
|
|
|
+ return false;
|
|
|
},
|
|
|
- getSidebarMenuActive: function() {
|
|
|
+ getSidebarMenuActive: function () {
|
|
|
const route = this.$route;
|
|
|
return getActiveSidebarMenuPath(route);
|
|
|
},
|
|
@@ -79,59 +83,63 @@ export default {
|
|
|
let route = this.$route;
|
|
|
// console.log(getBelongTopMenuPath(route))
|
|
|
return getBelongTopMenuPath(route);
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
// console.log(this.permission_routes)
|
|
|
- this.menuIsShow(this.$route)
|
|
|
+ this.menuIsShow(this.$route);
|
|
|
},
|
|
|
watch: {
|
|
|
$route() {
|
|
|
- this.menuIsShow(this.$route)
|
|
|
- }
|
|
|
+ this.menuIsShow(this.$route);
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
menuIsShow(route) {
|
|
|
- let activeTopMenu
|
|
|
+ let activeTopMenu;
|
|
|
const { meta } = route;
|
|
|
if (meta.belongTopMenu) {
|
|
|
- activeTopMenu = meta.belongTopMenu;
|
|
|
+ activeTopMenu = meta.belongTopMenu;
|
|
|
}
|
|
|
- let permissions = this.permission_routes || []
|
|
|
- let childList = []
|
|
|
- permissions.forEach(item => {
|
|
|
- if(item.path == activeTopMenu) {
|
|
|
- childList = item
|
|
|
+ let permissions = this.permission_routes || [];
|
|
|
+ let childList = [];
|
|
|
+ permissions.forEach((item) => {
|
|
|
+ if (item.path == activeTopMenu) {
|
|
|
+ childList = item;
|
|
|
}
|
|
|
});
|
|
|
- let index = this.menuOperation(childList.children)
|
|
|
- let status = index > 1 ? true : false
|
|
|
- let routeParentName = sessionStorage.getItem('routeParentName')
|
|
|
+ let index = this.menuOperation(childList.children);
|
|
|
+ let status = index > 1 ? true : false;
|
|
|
+ let routeParentName = sessionStorage.getItem("routeParentName");
|
|
|
let params = {
|
|
|
- status: status
|
|
|
+ status: status,
|
|
|
+ };
|
|
|
+ if (routeParentName != meta.belongTopMenu) {
|
|
|
+ params.isCollapse = true;
|
|
|
+ sessionStorage.setItem("routeParentName", meta.belongTopMenu);
|
|
|
}
|
|
|
- if(routeParentName != meta.belongTopMenu) {
|
|
|
- params.isCollapse = true
|
|
|
- sessionStorage.setItem('routeParentName', meta.belongTopMenu)
|
|
|
- }
|
|
|
- this.$emit('childStatus', params)
|
|
|
+ this.$emit("childStatus", params);
|
|
|
},
|
|
|
menuOperation(arr) {
|
|
|
+ // console.log(arr);
|
|
|
let index = 0;
|
|
|
- for(let i = 0; i < arr.length; i++) {
|
|
|
- if(arr[i].hidden) {
|
|
|
- continue
|
|
|
- }
|
|
|
- if(arr[i].children && arr[i].children.length > 0) {
|
|
|
- index += this.menuOperation(arr[i].children)
|
|
|
- } else {
|
|
|
- index++
|
|
|
+ if (arr?.length > 0) {
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ if (arr[i].hidden) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ if (arr[i].children && arr[i].children.length > 0) {
|
|
|
+ index += this.menuOperation(arr[i].children);
|
|
|
+ } else {
|
|
|
+ index++;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- return index
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
+ return index;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.el-menu-item {
|
|
@@ -140,25 +148,26 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/deep/.el-submenu__title, /deep/.el-menu-item {
|
|
|
+/deep/.el-submenu__title,
|
|
|
+/deep/.el-menu-item {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
/deep/.el-menu-item.is-active {
|
|
|
- font-weight: bold;
|
|
|
- background-color: #EEF4F4 !important;
|
|
|
- color: #14928a !important;
|
|
|
- position: relative;
|
|
|
- &::after{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- content: ' ';
|
|
|
- width: 6px;
|
|
|
- background-color: #14928a;
|
|
|
- display: block;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: #eef4f4 !important;
|
|
|
+ color: #14928a !important;
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ content: " ";
|
|
|
+ width: 6px;
|
|
|
+ background-color: #14928a;
|
|
|
+ display: block;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
/deep/.el-submenu .el-menu-item.is-active {
|
|
|
color: #14928a !important;
|
|
@@ -166,7 +175,8 @@ export default {
|
|
|
/deep/.el-menu .menu-wrapper .el-menu-item {
|
|
|
color: #666666;
|
|
|
}
|
|
|
-/deep/.el-menu-item, /deep/.el-submenu__title {
|
|
|
+/deep/.el-menu-item,
|
|
|
+/deep/.el-submenu__title {
|
|
|
height: 60px !important;
|
|
|
line-height: 60px !important;
|
|
|
}
|