parent
f508148177
commit
8f99871ad7
6 changed files with 322 additions and 126 deletions
@ -0,0 +1,146 @@ |
|||||||
|
<template> |
||||||
|
<div class="menus"> |
||||||
|
<el-menu class="nav" :default-active="onRoutes" background-color="#062c87" text-color="#fff" |
||||||
|
active-text-color="#333" unique-opened mode="horizontal" router @select="handleSelect"> |
||||||
|
<template v-for="item in menus"> |
||||||
|
<template v-if="item.subs"> |
||||||
|
<el-submenu :index="item.index" :key="item.index"> |
||||||
|
<template slot="title"> |
||||||
|
<!-- <i :class="item.icon"></i> --> |
||||||
|
<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"> |
||||||
|
<!-- <i :class="item.icon"></i> --> |
||||||
|
<span slot="title">{{ item.title }}</span> |
||||||
|
</el-menu-item> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</el-menu> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Setting from '@/setting' |
||||||
|
import addRoutes from '@/libs/route/addRoutes' |
||||||
|
export default { |
||||||
|
data () { |
||||||
|
return { |
||||||
|
menuList: [ |
||||||
|
{ |
||||||
|
icon: 'el-icon-school', |
||||||
|
index: '/workbench', |
||||||
|
title: '工作台' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-user', |
||||||
|
index: '/customer', |
||||||
|
title: '客户管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-shopping-bag-2', |
||||||
|
index: '/user', |
||||||
|
title: '用户管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-document-checked', |
||||||
|
index: '/order', |
||||||
|
title: '订单管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-office-building', |
||||||
|
index: '/system', |
||||||
|
title: '系统配置' |
||||||
|
}, |
||||||
|
], |
||||||
|
menus: [], |
||||||
|
onRoutes: this.$route.path |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
"$route.path": function (val) { |
||||||
|
this.menuList.map(e => { |
||||||
|
if (val.replace('/', '') === e.index) { |
||||||
|
this.handleSelect(val.replace('/', '')) |
||||||
|
this.$forceUpdate(); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
// sessionStorage.getItem('sideBar') && this.handleSelect(sessionStorage.getItem('sideBar')) |
||||||
|
sessionStorage.getItem('token') && this.getPer() // 登录了才获取权限 |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleSelect (index) { |
||||||
|
this.onRoutes = index |
||||||
|
this.$store.commit('setInfoTab', '1') |
||||||
|
this.$store.commit('setColumnId', '') |
||||||
|
this.$store.commit('setCompetitionCache', null) |
||||||
|
sessionStorage.setItem('sideBar', index) |
||||||
|
}, |
||||||
|
initMenu () { |
||||||
|
if (Setting.dynamicRoute) { |
||||||
|
const routes = this.$store.state.routes |
||||||
|
const menus = [] |
||||||
|
this.menuList.map(e => { |
||||||
|
routes.find(n => n.path === e.index) && menus.push(e) |
||||||
|
}) |
||||||
|
this.menus = menus |
||||||
|
} else { |
||||||
|
this.menus = this.menuList |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取权限列表 |
||||||
|
getPer () { |
||||||
|
this.$get(`${this.api.getUserRolesPermissionMenu}?platformId=${Setting.platformId}`).then(res => { |
||||||
|
const routes = res.permissionMenu[0].children |
||||||
|
addRoutes(routes) |
||||||
|
this.initMenu() |
||||||
|
this.$store.commit('setDataPer', res.dataPermissionList) |
||||||
|
}).catch(err => { |
||||||
|
if (err.status === 500) { |
||||||
|
localStorage.removeItem('ms_username'); |
||||||
|
sessionStorage.clear() |
||||||
|
location.reload() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.menus { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
background-color: #062c87; |
||||||
|
|
||||||
|
/deep/.nav { |
||||||
|
border-bottom: 0; |
||||||
|
|
||||||
|
&>.el-menu-item { |
||||||
|
height: 56px; |
||||||
|
padding: 0 30px; |
||||||
|
line-height: 56px; |
||||||
|
} |
||||||
|
|
||||||
|
&>.el-menu-item.is-active { |
||||||
|
background-color: #fff !important; |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue