<template>
|
<div class="sidebar">
|
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
|
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
|
<template v-for="item in items">
|
<template v-if="item.children">
|
<el-submenu :index="item.indexUrl" :key="item.indexUrl">
|
<template slot="title">
|
<i :class="item.icon"></i><span slot="title">{{ item.name }}</span>
|
</template>
|
<template v-for="subItem in item.children">
|
<!--<el-submenu v-if="subItem.children" :index="subItem.indexUrl" :key="subItem.indexUrl">-->
|
<!--<template slot="title">-->
|
<!--<i :class="subItem.icon"></i><span slot="title">{{ subItem.name }}</span>-->
|
<!--</template>-->
|
<!--<el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.indexUrl">-->
|
<!--<template slot="title">-->
|
<!--<i :class="threeItem.icon"></i><span slot="title">{{ threeItem.name }}</span>-->
|
<!--</template>-->
|
<!--</el-menu-item>-->
|
<!--</el-submenu>-->
|
<el-menu-item :index="subItem.indexUrl" :key="subItem.indexUrl">
|
<template slot="title">
|
<i :class="subItem.icon"></i><span slot="title">{{ subItem.name }}</span>
|
</template>
|
</el-menu-item>
|
</template>
|
</el-submenu>
|
</template>
|
<template v-else>
|
<el-menu-item :index="item.indexUrl" :key="item.indexUrl">
|
<template slot="title">
|
<i :class="item.icon"></i><span slot="title">{{ item.name }}</span>
|
</template>
|
</el-menu-item>
|
</template>
|
</template>
|
</el-menu>
|
</div>
|
</template>
|
|
<script>
|
import bus from '../common/bus';
|
export default {
|
data() {
|
return {
|
collapse: false,
|
items: [
|
{
|
id:1,
|
icon: 'el-icon-document',
|
name: '人员管理',
|
indexUrl: 'user'
|
},
|
{
|
id:2,
|
icon: 'el-icon-document',
|
name: '停车场管理',
|
indexUrl: 'park'
|
},
|
{
|
id:3,
|
icon: 'el-icon-document',
|
name: '违章类型管理',
|
indexUrl: 'violationType'
|
},
|
// {
|
// id:4,
|
// icon: 'el-icon-document',
|
// name: '订单管理',
|
// indexUrl: 'outPark'
|
// },
|
// {
|
// id:5,
|
// icon: 'el-icon-document',
|
// name: '罚单管理',
|
// indexUrl: 'ticket'
|
// },
|
{
|
id:6,
|
icon: 'el-icon-document',
|
name: '白名单',
|
indexUrl: 'whiteList'
|
},
|
{
|
id:7,
|
icon: 'el-icon-document',
|
name: '街道管理',
|
indexUrl: 'street'
|
},
|
// {
|
// id:3,
|
// icon: 'el-icon-folder-opened',
|
// indexUrl: '2',
|
// name: '统计报表',
|
// children:[
|
// {
|
// icon: 'el-icon-document',
|
// name: '普通员工月度评价',
|
// parentId: 3,
|
// indexUrl: "puTongYuanGongStatistic"
|
// },
|
// {
|
// icon: 'el-icon-document',
|
// name: '职能部门评价结果',
|
// parentId: 3,
|
// indexUrl: "leaderStatistic"
|
// }
|
// ]
|
// }
|
]
|
}
|
},
|
computed:{
|
onRoutes(){
|
return this.$route.path.replace('/','');
|
}
|
},
|
created(){
|
// 通过 Event Bus 进行组件间通信，来折叠侧边栏
|
bus.$on('collapse', msg => {
|
this.collapse = msg;
|
})
|
},
|
mounted(){
|
// var url = this.$systemconfig.basePath + '/menuList';
|
// this.$byutil.postData(this,url,{},res=>{
|
// this.items = res.obj.menuList;
|
// })
|
}
|
}
|
</script>
|
|
<style scoped>
|
.sidebar{
|
display: block;
|
position: absolute;
|
left: 0;
|
top: 70px;
|
bottom:0;
|
overflow-y: scroll;
|
}
|
.sidebar::-webkit-scrollbar{
|
width: 0;
|
}
|
.sidebar-el-menu:not(.el-menu--collapse){
|
width: 250px;
|
}
|
.sidebar > ul {
|
height:100%;
|
}
|
</style>
|
