<template>
|
<el-container>
|
<div class="app-wrapper">
|
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
<div :class="{ hasTagsView: needTagsView }" class="main-container">
|
<el-header height="70px">
|
<div :class="{ 'fixed-header': fixedHeader }">
|
<navbar />
|
</div>
|
</el-header>
|
<el-container>
|
<el-aside class="my-aside" :style="{ backgroundColor: !openAside ? '#fff' : '#EBEEF5' }">
|
<!-- <el-aside class="my-aside" :style="{backgroundColor: (!openAside||sidebarRouters.length&&rootRoute&&rootRoute.meta)?'#F6F8FC':'#EBEEF5'}">-->
|
<el-scrollbar style="position: relative" wrap-class="scrollbar-wrapper">
|
<template v-for="(route, index) in sidebarRouters">
|
<div
|
v-if="!route.hidden"
|
:key="route.id"
|
class="root-route"
|
:class="{ act: actId === route.id }"
|
@click="routeClick(route)"
|
>
|
<!-- <i class="route-icon" :class="'el-icon-' + route.icon" />-->
|
<!-- <img v-if="actId === route.id" :src="iconsList[actId].urlA" alt=""/>-->
|
<!-- <img v-else :src="iconsList[route.id].url" alt=""/>-->
|
<div class="root-route-title">{{ route.name }}</div>
|
</div>
|
</template>
|
</el-scrollbar>
|
</el-aside>
|
<div class="my-aside-box">
|
<div
|
v-if="subRoute && subRoute.length > 0 && rootRoute"
|
:class="openAside ? 'aside-box' : 'aside-box-close'"
|
>
|
<el-aside width="170px;" style="height: 100%; border-right: 1px solid #eeeeee">
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
<div class="menu-title">{{ rootRoute.name }}</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 subRoute" :key="route.id" :item="route" :base-path="route.path"/>
|
</el-menu>
|
</el-scrollbar>
|
</el-aside>
|
</div>
|
<div
|
class="toggle-box"
|
v-if="subRoute && subRoute.length"
|
:class="openAside ? '' : 'toggle-box-right'"
|
@click="switchOpen"
|
>
|
<i style="font-size: 16px" class="el-icon-arrow-left"/>
|
</div>
|
</div>
|
<el-main>
|
<tags-view v-if="needTagsView" :openAside="openAside" :visible="true"/>
|
<app-main/>
|
</el-main>
|
</el-container>
|
</div>
|
</div>
|
</el-container>
|
</template>
|
|
<script>
|
import {AppMain, Navbar, Settings, Sidebar, TagsView} from './components';
|
import ResizeMixin from './mixin/ResizeHandler';
|
import {mapGetters, mapState} from 'vuex';
|
import SidebarItem from './components/Sidebar/SidebarItem';
|
import variables from '@/styles/variables.scss';
|
import {isEmpty, isNotEmpty} from '@/utils/validate';
|
|
export default {
|
name: 'Layout',
|
data() {
|
return {
|
openAside: true,// 二级菜单是否展开
|
actId: '',
|
activeMenuIdx: '',
|
subRoute: [],
|
rootRoute: {meta: {title: ''}},
|
iconsList: {
|
12000: {
|
url: require('./imgs/kfgzt.png'),
|
urlA: require('./imgs/kfgztA.png'),
|
},
|
13000: {
|
url: require('./imgs/sjgl.png'),
|
urlA: require('./imgs/sjglA.png'),
|
},
|
6000: {
|
url: require('./imgs/jcxx.png'),
|
urlA: require('./imgs/jcxxA.png'),
|
},
|
7000: {
|
url: require('./imgs/jcxx.png'),
|
urlA: require('./imgs/jcxxA.png'),
|
},
|
10000: {
|
url: require('./imgs/xtgl.png'),
|
urlA: require('./imgs/xtglA.png'),
|
},
|
20230801151431: {
|
url: require('./imgs/mydgl.png'),
|
urlA: require('./imgs/mydglA.png'),
|
},
|
11000: {
|
url: require('./imgs/xmgl.png'),
|
urlA: require('./imgs/xmglA.png'),
|
},
|
20230726152522: {
|
url: require('./imgs/zskgl.png'),
|
urlA: require('./imgs/zskglA.png'),
|
},
|
8000: {
|
url: require('./imgs/xtgl.png'),
|
urlA: require('./imgs/xtglA.png'),
|
},
|
},
|
};
|
},
|
components: {
|
AppMain,
|
Navbar,
|
Settings,
|
Sidebar,
|
TagsView,
|
SidebarItem
|
},
|
mixins: [ResizeMixin],
|
watch: {
|
$route(to, from) {
|
const route = this.$route;
|
let root = this.getCurrentRoute(route.path, this.sidebarRouters);
|
if (root && root.length > 0) {
|
this.rootRoute = root[0];
|
}
|
this.actId = this.rootRoute.id;
|
|
if (this.activeMenu.length > 1) {
|
this.subActId = this.activeMenu[1].id;
|
this.subRoute = this.rootRoute.childList;
|
} else {
|
this.subActId = '';
|
this.subRoute = [];
|
}
|
}
|
},
|
computed: {
|
...mapGetters(['permission_routes', 'sidebarRouters', 'sidebar']),
|
...mapState({
|
sidebar: (state) => state.app.sidebar,
|
device: (state) => state.app.device,
|
showSettings: (state) => state.settings.showSettings,
|
needTagsView: (state) => state.settings.tagsView,
|
fixedHeader: (state) => state.settings.fixedHeader,
|
}),
|
classObj() {
|
return {
|
openSidebar: this.sidebar.opened,
|
withoutAnimation: this.sidebar.withoutAnimation,
|
mobile: this.device === 'mobile',
|
};
|
},
|
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;
|
},
|
},
|
mounted() {
|
const route = this.$route;
|
let root = this.getCurrentRoute(route.path, this.sidebarRouters);
|
if (root && root.length > 0) {
|
this.rootRoute = root[0];
|
this.actId = this.rootRoute.id;
|
}
|
if (this.activeMenu.length > 1) {
|
this.subActId = this.activeMenu[1].id;
|
this.subRoute = this.rootRoute.childList;
|
}
|
if(!localStorage.getItem('openAside')){
|
localStorage.setItem('openAside','open')
|
|
}
|
if(localStorage.getItem('openAside')=='open'){
|
this.openAside=true
|
}
|
if(localStorage.getItem('openAside')=='close'){
|
this.openAside=false
|
}
|
},
|
methods: {
|
switchOpen(){
|
this.openAside=!this.openAside
|
localStorage.setItem('openAside',this.openAside?'open':'close')
|
},
|
handleSelect(key, keyPath) {
|
this.activeMenuIdx = key;
|
},
|
routeClick(route) {
|
// console.log(route)
|
this.rootRoute = route;
|
this.subRoute = route.childList;
|
this.actId = route.id;
|
const rootRoute = this.getFirstRoute(route);
|
|
if (route.childList.length == 0) {
|
this.$router.push(rootRoute.component);
|
}
|
this.openAside = true;
|
},
|
getFirstRoute(route) {
|
if (isNotEmpty(route.childList)) {
|
const len = route.childList.length;
|
for (let i = 0; i < len; i++) {
|
const item = route.childList[i];
|
if (isNotEmpty(item)) {
|
const route = this.getFirstRoute(item);
|
if (isEmpty(route.childList)) {
|
return route;
|
}
|
}
|
}
|
} else {
|
return route;
|
}
|
},
|
getCurrentRoute(path, nodes, ids) {
|
if (ids === undefined) {
|
ids = [];
|
}
|
// console.log(path,nodes,'okookk')
|
const len = nodes.length;
|
for (let i = 0; i < len; i++) {
|
const item = nodes[i];
|
const idArr = ids.concat();
|
idArr.push(item);
|
// console.log(item.url , path)
|
if (item.component === path) {
|
return idArr;
|
}
|
if (item.childList && item.childList.length > 0) {
|
const findResult = this.getCurrentRoute(path, item.childList, idArr);
|
if (findResult) {
|
return findResult;
|
}
|
}
|
}
|
},
|
handleClickOutside() {
|
this.$store.dispatch('app/closeSideBar', {withoutAnimation: false});
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import '~@/styles/mixin.scss';
|
@import '~@/styles/variables.scss';
|
|
.el-main {
|
padding: 0;
|
}
|
|
> > > .el-scrollbar__ba {
|
display: none;
|
}
|
|
> > > .el-scrollbar__thumb {
|
display: none;
|
}
|
|
> > > .el-menu-item {
|
height: 35px;
|
line-height: 35px;
|
}
|
|
.open-image {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: fixed;
|
background-color: rgba(0, 0, 0, 0.6);
|
height: 100%;
|
width: 100%;
|
top: 0;
|
left: 0;
|
z-index: 999999;
|
}
|
|
.app-wrapper {
|
@include clearfix;
|
position: relative;
|
height: 100%;
|
width: 100%;
|
|
&.mobile.openSidebar {
|
position: fixed;
|
top: 0;
|
}
|
}
|
|
.drawer-bg {
|
background: #000;
|
opacity: 0.3;
|
width: 100%;
|
top: 0;
|
height: 100%;
|
position: absolute;
|
z-index: 999;
|
}
|
|
.fixed-header {
|
position: fixed;
|
top: 0;
|
right: 0;
|
z-index: 9;
|
width: calc(100% - #{$base-sidebar-width});
|
transition: width 0.28s;
|
}
|
|
.mobile .fixed-header {
|
width: 100%;
|
}
|
|
.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: 14px;
|
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;
|
}
|
}
|
|
> > > .el-aside {
|
padding: 0 10px;
|
width: 170px;
|
}
|
|
.aside-box {
|
width: 170px;
|
transition: all 0.3s;
|
height: calc(100vh - 80px);
|
background-color: #fff;
|
position: relative;
|
}
|
|
.aside-box-close {
|
transition: all 0.3s;
|
width: 0;
|
overflow: hidden;
|
}
|
|
.toggle-box {
|
cursor: pointer;
|
width: 23px;
|
height: 97px;
|
border-radius: 0 31px 31px 0;
|
border: 1px solid #eeeeee;
|
box-sizing: border-box;
|
background: #0D997C;
|
position: absolute;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #999;
|
font-size: 24px;
|
top: 50%;
|
right: -22px;
|
z-index: 2;
|
transition: all 0.3s;
|
transition-delay: 0.2s;
|
transform: rotate(0);
|
transform: translateY(-50%);
|
i {
|
color: #fff;
|
}
|
}
|
|
.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 {
|
padding: 0;
|
width: 121px !important;
|
transition: all 0.3s;
|
height: calc(100vh - 80px);
|
overflow-y: auto;
|
|
&::-webkit-scrollbar {
|
display: none;
|
width: 0 !important;
|
-ms-overflow-style: none;
|
}
|
}
|
|
.bg {
|
width: 121px;
|
position: absolute;
|
bottom: 0;
|
z-index: -1;
|
}
|
|
.el-menu {
|
border: none;
|
}
|
|
.menu-title {
|
background-color: #F6F8FC;
|
padding: 0px 10px;
|
margin: 10px 0;
|
font-size: 16px;
|
color: #1D2129;
|
border-radius: 4px;
|
}
|
|
.my-aside-box {
|
position: relative;
|
|
&::-webkit-scrollbar {
|
display: none;
|
width: 0 !important;
|
-ms-overflow-style: none;
|
}
|
}
|
|
.my-aside-box::-webkit-scrollbar {
|
display: none;
|
}
|
</style>
|
