<template>
|
<div
|
:class="{ 'has-logo': showLogo }"
|
:style="{
|
backgroundColor: settings.sideTheme === 'theme-light' ? variables.menuLightBackground : variables.menuBackground,
|
}"
|
>
|
<!-- <logo v-if="showLogo" :collapse="isCollapse" />-->
|
<el-aside class="my-aside" :style="{backgroundColor: (!openAside||routes.length&&rootRoute&&rootRoute.meta)?'#f6f8fc':'#fff'}">
|
<el-scrollbar style="position: relative" wrap-class="scrollbar-wrapper">
|
<template v-for="route in routes">
|
<div
|
v-if="!route.hidden"
|
:key="route.id"
|
class="root-route"
|
:class="{act:actId===route.id}"
|
@click="routeClick(route)"
|
>
|
<i class="route-icon" :class="route.meta && route.meta.icon" />
|
<div class="root-route-title">{{ route.meta ? route.meta.title : '' }}</div>
|
</div>
|
</template>
|
</el-scrollbar>
|
</el-aside>
|
<div v-if="routes.length&&rootRoute&&rootRoute.meta" style="position: relative">
|
<div :class="openAside?'aside-box':'aside-box-close'">
|
<el-aside width="172px;" style="border-right: 1px solid #EEEEEE">
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
<div class="menu-title">{{ rootRoute.meta.title }}</div>
|
<el-menu
|
:default-active="activeMenu"
|
:collapse="false"
|
:background-color="variables.menuBg"
|
:text-color="variables.menuText"
|
:unique-opened="true"
|
:active-text-color="variables.menuActiveText"
|
:collapse-transition="false"
|
mode="vertical"
|
@select="handleSelect"
|
>
|
<sidebar-item v-for="route in sidebarRouters" :key="route.id" :item="route" :base-path="route.path" />
|
</el-menu>
|
</el-scrollbar>
|
</el-aside>
|
</div>
|
<div class="toggle-box" :class="openAside?'':'toggle-box-right'" @click="openAside=!openAside"><i class="el-icon-arrow-left" /></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {mapGetters, mapState} from 'vuex';
|
import Logo from './Logo';
|
import SidebarItem from './SidebarItem';
|
import variables from '@/styles/variables.scss';
|
import {isEmpty, isNotEmpty} from '@/utils/validate'
|
|
export default {
|
components: { SidebarItem, Logo },
|
data(){
|
return{
|
openAside: true,
|
actId: '',
|
activeMenuIdx: '',
|
// showSidebar: userSidebarTop,
|
// needTagsView: tagsView,
|
subRoute: [],
|
rootRoute: { meta: { title: '' }}
|
}
|
},
|
methods:{
|
routeClick(route) {
|
this.rootRoute = route
|
this.subRoute = route.children
|
this.actId = route.id
|
const rootRoute = this.getFirstRoute(route)
|
this.$router.push(rootRoute.path)
|
},
|
handleSelect(key, keyPath) {
|
this.activeMenuIdx = key
|
},
|
getFirstRoute(route) {
|
if (isNotEmpty(route.children)) {
|
const len = route.children.length
|
for (let i = 0; i < len; i++) {
|
const item = route.children[i]
|
if (isNotEmpty(item)) {
|
const route = this.getFirstRoute(item)
|
if (isEmpty(route.children)) {
|
return route
|
}
|
}
|
}
|
} else {
|
return route
|
}
|
},
|
},
|
computed: {
|
...mapState(['settings']),
|
...mapGetters(['permission_routes', 'sidebarRouters', 'sidebar']),
|
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 path;
|
},
|
showLogo() {
|
return this.$store.state.settings.sidebarLogo;
|
},
|
variables() {
|
return variables;
|
},
|
isCollapse() {
|
return !this.sidebar.opened;
|
},
|
routes() {
|
// console.log(this.$router.options.routes)
|
return this.$router.options.routes
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.el-submenu__icon-arrow {
|
color: #fff !important;
|
}
|
.header {
|
width: 100%;
|
-webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
position: fixed;
|
z-index: 3;
|
top: 60px;
|
}
|
|
.header .navbar {
|
max-width: 1200px;
|
margin-left: auto;
|
margin-right: auto;
|
-webkit-box-shadow: 0 0 0;
|
box-shadow: 0 0 0;
|
}
|
|
.root-route {
|
align-self: center;
|
width: 92px;
|
height: 58px;
|
border-radius: 10px;
|
cursor: pointer;
|
font-size: 12px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin: 20px auto;
|
color: #666;
|
line-height: 1;
|
transition: 0.3s;
|
|
.route-icon {
|
width: 30px;
|
height: 30px;
|
font-size: 30px;
|
line-height: 1;
|
color: #C4C4C4;
|
}
|
|
.root-route-title {
|
margin-top: 2px;
|
}
|
}
|
|
.root-route:hover {
|
background-color: #0d997c;
|
color: #fff;
|
|
.route-icon {
|
width: 30px;
|
height: 30px;
|
font-size: 30px;
|
line-height: 1;
|
color: #fff;
|
}
|
}
|
|
.root-route.act {
|
background-color: #0d997c;
|
color: #fff;
|
|
.route-icon {
|
width: 30px;
|
height: 30px;
|
font-size: 30px;
|
line-height: 1;
|
color: #fff;
|
}
|
}
|
.aside-box{
|
width: 171px;
|
transition: all 0.3s;
|
}
|
.aside-box-close{
|
transition: all 0.3s;
|
width: 0;
|
}
|
.toggle-box {
|
width: 31px;
|
height: 62px;
|
border-radius: 0 31px 31px 0;
|
border: 1px solid #eeeeee;
|
box-sizing: border-box;
|
background: #ffffff;
|
position: absolute;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #999;
|
font-size: 24px;
|
top: 67px;
|
right: -31px;
|
z-index: 99;
|
transition: all 0.3s;
|
transition-delay: 0.2s;
|
transform: rotate(0);
|
}
|
.toggle-box-right i{
|
transform: rotate(180deg);
|
transition-delay: 0.2s;
|
}
|
.breadcrumb{
|
height: 56px;
|
line-height: 56px;
|
padding: 0 24px;
|
font-size: 18px;
|
font-weight: bold;
|
background-color: #fff;
|
}
|
.my-aside {
|
width: 128px !important;
|
transition: all 0.3s;
|
}
|
|
.bg {
|
width: 121px;
|
position: absolute;
|
bottom: 0;
|
z-index: -1;
|
}
|
|
.el-menu {
|
border: none;
|
}
|
|
.menu-title {
|
background-color: #ECF2FF;
|
padding: 0px 10px;
|
margin: 10px;
|
font-size: 15px;
|
color: #0d997c;
|
border-radius: 4px;
|
}
|
</style>
|
