|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div v-show="!collapse"
|
|
|
|
|
class="flex-1">
|
|
|
|
|
<div class="logo">
|
|
|
|
|
<img width="30"
|
|
|
|
|
src="@/assets/images/logo.png"
|
|
|
|
|
alt="">
|
|
|
|
|
<span>网站管理后台</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-menu :default-active="active"
|
|
|
|
|
:default-openeds="['user']"
|
|
|
|
|
background-color="#001529"
|
|
|
|
|
text-color="#fff"
|
|
|
|
|
active-text-color="#fff"
|
|
|
|
|
:collapse="collapse"
|
|
|
|
|
:collapse-transition="false"
|
|
|
|
|
@select="menuSelect">
|
|
|
|
|
<template v-for="item in menus">
|
|
|
|
|
<template v-if="item.subs">
|
|
|
|
|
<el-submenu :index="item.index"
|
|
|
|
|
:key="item.index">
|
|
|
|
|
<template slot="title">
|
|
|
|
|
<img class="icon"
|
|
|
|
|
:src="require('@/assets/images/' + item.icon + '.png')"
|
|
|
|
|
alt="">
|
|
|
|
|
<span slot="title">{{ item.title }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-for="subItem in item.subs">
|
|
|
|
|
<el-submenu v-if="subItem.subs"
|
|
|
|
|
:index="subItem.index"
|
|
|
|
|
:key="subItem.index">
|
|
|
|
|
<template slot="title">{{ subItem.title }}</template>
|
|
|
|
|
<el-menu-item v-for="(threeItem,i) in subItem.subs"
|
|
|
|
|
:key="i"
|
|
|
|
|
:index="threeItem.index">{{ threeItem.title }}</el-menu-item>
|
|
|
|
|
</el-submenu>
|
|
|
|
|
<el-menu-item v-else
|
|
|
|
|
:index="subItem.index"
|
|
|
|
|
:key="subItem.index">{{ subItem.title }}</el-menu-item>
|
|
|
|
|
</template>
|
|
|
|
|
</el-submenu>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<el-menu-item :index="item.index"
|
|
|
|
|
:key="item.index">
|
|
|
|
|
<img class="icon"
|
|
|
|
|
:src="require('@/assets/images/' + item.icon + '.png')"
|
|
|
|
|
alt="">
|
|
|
|
|
<span slot="title">{{ item.title }}</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</el-menu>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="collapse"
|
|
|
|
|
class="light">
|
|
|
|
|
<div class="col-wrap">
|
|
|
|
|
<img class="logo-icon"
|
|
|
|
|
src="@/assets/images/logo.png"
|
|
|
|
|
alt="">
|
|
|
|
|
<ul class="col-nav">
|
|
|
|
|
<li v-for="(item, i) in colNav"
|
|
|
|
|
:key="i"
|
|
|
|
|
@click="menuSelect(item.index)">
|
|
|
|
|
<img width="16"
|
|
|
|
|
:src="require('@/assets/images/' + item.icon + '.png')"
|
|
|
|
|
alt="">
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-menu">
|
|
|
|
|
<div class="name">{{ site.siteName }}</div>
|
|
|
|
|
<el-menu v-if="colRefresh"
|
|
|
|
|
:default-active="siteActive"
|
|
|
|
|
background-color="#fff"
|
|
|
|
|
text-color="#333"
|
|
|
|
|
active-text-color="#fff"
|
|
|
|
|
:collapse-transition="false"
|
|
|
|
|
router>
|
|
|
|
|
<template v-for="item in sites">
|
|
|
|
|
<template v-if="item.subs">
|
|
|
|
|
<el-submenu :index="item.index"
|
|
|
|
|
:key="item.index">
|
|
|
|
|
<template slot="title">
|
|
|
|
|
<img width="14"
|
|
|
|
|
class="icon"
|
|
|
|
|
:src="require('@/assets/images/' + item.icon + '.png')"
|
|
|
|
|
alt="">
|
|
|
|
|
<span slot="title">{{ item.title }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-for="subItem in item.subs">
|
|
|
|
|
<el-submenu v-if="subItem.subs"
|
|
|
|
|
:index="subItem.index"
|
|
|
|
|
:key="subItem.index">
|
|
|
|
|
<template slot="title">{{ subItem.title }}</template>
|
|
|
|
|
<el-menu-item v-for="(threeItem,i) in subItem.subs"
|
|
|
|
|
:key="i"
|
|
|
|
|
:index="threeItem.index">{{ threeItem.title }}</el-menu-item>
|
|
|
|
|
</el-submenu>
|
|
|
|
|
<el-menu-item v-else
|
|
|
|
|
:index="subItem.index"
|
|
|
|
|
:key="subItem.index">{{ subItem.title }}</el-menu-item>
|
|
|
|
|
</template>
|
|
|
|
|
</el-submenu>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<el-menu-item :index="item.index"
|
|
|
|
|
:key="item.index">
|
|
|
|
|
<img class="icon"
|
|
|
|
|
:src="require('@/assets/images/' + item.icon + '.png')"
|
|
|
|
|
alt="">
|
|
|
|
|
<span slot="title">{{ item.title }}</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</el-menu>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { mapState, mapActions } from 'vuex'
|
|
|
|
|
import Setting from '@/setting'
|
|
|
|
|
export default {
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
site: this.$store.state.content.site,
|
|
|
|
|
collapse: false,
|
|
|
|
|
active: this.$route.path,
|
|
|
|
|
siteActive: '/column',
|
|
|
|
|
menus: [],
|
|
|
|
|
defaultMenus: [
|
|
|
|
|
{
|
|
|
|
|
icon: 'site',
|
|
|
|
|
index: '/site/list',
|
|
|
|
|
title: '站点管理'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: 'user',
|
|
|
|
|
index: 'user',
|
|
|
|
|
title: '用户管理',
|
|
|
|
|
subs: [
|
|
|
|
|
{
|
|
|
|
|
index: '/user/list',
|
|
|
|
|
title: '组织与账号管理'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
index: '/role/list',
|
|
|
|
|
title: '角色管理'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
index: '/userGroup/list',
|
|
|
|
|
title: '用户组管理'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: 'annex',
|
|
|
|
|
index: '/annex/list',
|
|
|
|
|
title: '附件管理'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
colNav: [
|
|
|
|
|
{
|
|
|
|
|
index: '/site/list',
|
|
|
|
|
icon: 'site-active'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
index: 'user',
|
|
|
|
|
icon: 'user'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
index: '/annex/list',
|
|
|
|
|
icon: 'annex'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
sites: [
|
|
|
|
|
{
|
|
|
|
|
icon: 'content',
|
|
|
|
|
index: 'content',
|
|
|
|
|
title: '内容管理',
|
|
|
|
|
subs: [
|
|
|
|
|
{
|
|
|
|
|
index: '/column',
|
|
|
|
|
title: '栏目管理'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
index: '/article',
|
|
|
|
|
title: '文章管理'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
index: '/seo',
|
|
|
|
|
title: 'SEO管理'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
colRefresh: true
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapState('auth', [
|
|
|
|
|
'btns'
|
|
|
|
|
])
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
"$route" (to, from) {
|
|
|
|
|
this.active = `/${this.$route.path.split('/')[1]}/list`
|
|
|
|
|
const { path } = this.$route
|
|
|
|
|
const ori = this.collapse
|
|
|
|
|
this.collapse = !!this.sites[0].subs.find(e => path.includes(e.index))
|
|
|
|
|
// 刷新菜单
|
|
|
|
|
if ((!ori && this.sites[0].subs.find(e => from.path.includes(e.index))) || path === '/site/list') {
|
|
|
|
|
this.siteActive = '/column'
|
|
|
|
|
this.colRefresh = false
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.colRefresh = true
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.site = this.$store.state.content.site
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created () {
|
|
|
|
|
// 获取当前路由，如果是在站点导航里面的页面，则展开站点导航并选中该路径
|
|
|
|
|
const { path } = this.$route
|
|
|
|
|
this.collapse = !!this.sites[0].subs.find(e => path.includes(e.index))
|
|
|
|
|
if (this.collapse) this.siteActive = '/' + path.split('/')[1]
|
|
|
|
|
this.initMenu()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
...mapActions('user', [
|
|
|
|
|
'logout'
|
|
|
|
|
]),
|
|
|
|
|
// 菜单选择
|
|
|
|
|
menuSelect (index) {
|
|
|
|
|
this.collapse = false
|
|
|
|
|
// 用户管理只需展开导航，其他的则跳转
|
|
|
|
|
if (index.includes('/')) {
|
|
|
|
|
this.$router.push(index)
|
|
|
|
|
} else {
|
|
|
|
|
this.active = '/user/list'
|
|
|
|
|
this.$router.push('/user/list')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 初始化菜单
|
|
|
|
|
initMenu () {
|
|
|
|
|
// 如果开启了动态路由，则取store里的路由匹配
|
|
|
|
|
if (Setting.dynamicRoute) {
|
|
|
|
|
const { btns } = this
|
|
|
|
|
const menus = []
|
|
|
|
|
this.defaultMenus.map(e => {
|
|
|
|
|
if (btns.find(n => n.includes(e.index) || n === e.title)) {
|
|
|
|
|
// 匹配子菜单
|
|
|
|
|
if (e.subs && e.subs.length) {
|
|
|
|
|
const children = []
|
|
|
|
|
e.subs.map((j, i) => {
|
|
|
|
|
btns.find(n => n.includes(j.index)) && children.push(j)
|
|
|
|
|
})
|
|
|
|
|
e.subs = children
|
|
|
|
|
}
|
|
|
|
|
menus.push(e)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.menus = menus
|
|
|
|
|
} else {
|
|
|
|
|
this.menus = this.defaultMenus
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.nav {
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: #001529;
|
|
|
|
|
box-shadow: 2px 0px 6px 0px rgba(92, 111, 130, 0.35);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
.logo {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding-left: 28px;
|
|
|
|
|
margin: 15px 0 26px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-menu {
|
|
|
|
|
border-right: 0 !important;
|
|
|
|
|
.icon {
|
|
|
|
|
margin: 0 11px 0 5px;
|
|
|
|
|
}
|
|
|
|
|
.el-menu-item {
|
|
|
|
|
&.is-active {
|
|
|
|
|
background-color: #2962ff !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-menu .el-menu-item {
|
|
|
|
|
padding-left: 50px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.light {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.col-wrap {
|
|
|
|
|
width: 64px;
|
|
|
|
|
background-color: #001529;
|
|
|
|
|
}
|
|
|
|
|
.logo-icon {
|
|
|
|
|
width: 41px;
|
|
|
|
|
margin: 16px 0 30px 7px;
|
|
|
|
|
}
|
|
|
|
|
.col-nav {
|
|
|
|
|
text-align: center;
|
|
|
|
|
li {
|
|
|
|
|
padding: 25px 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.name {
|
|
|
|
|
margin: 17px 0 27px 15px;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #333;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
}
|
|
|
|
|
.col-menu {
|
|
|
|
|
width: 192px;
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-submenu__title {
|
|
|
|
|
padding-left: 14px !important;
|
|
|
|
|
}
|
|
|
|
|
.icon {
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar::-webkit-scrollbar {
|
|
|
|
|
width: 0;
|
|
|
|
|
}
|
|
|
|
|
.sidebar-el-menu:not(.el-menu--collapse) {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.sidebar > ul {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
