You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
10 KiB
355 lines
10 KiB
<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> |