Files
tougao_web/src/components/common/Sidebar.vue
xulu 4d8c396790 2
2021-08-18 17:47:33 +08:00

305 lines
9.9 KiB
Vue

<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.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 bus from '../common/bus';
export default {
data() {
return {
collapse: false,
userrole:localStorage.getItem('U_status'),
items:[],
author_items: [
{
icon: 'el-icon-lx-home',
index: 'dashboard',
title: this.$t('sidebar.main')
},
{
icon: 'el-icon-lx-cascades',
index: '1',
title: this.$t('sidebar.author'),
subs:[
{
index:'articleList',
title:this.$t('sidebar.author1')
},
{
index:'articleAdd',
title:this.$t('sidebar.author2')
}
]
}
// {
// icon: 'el-icon-user',
// index: '2',
// title: this.$t('sidebar.reviewerArticle'),
// subs:[
// {
// index:'authorApplyReviewer',
// title:this.$t('sidebar.authorApplyReviewer')
// }
// ]
// }
],
editor_items:[
{
icon: 'el-icon-lx-home',
index: 'dashboard',
title: this.$t('sidebar.main')
},
{
icon: 'el-icon-lx-copy',
index: '2',
title: this.$t('sidebar.editor'),
subs:[
{
index:'articleListEditor',
title:this.$t('sidebar.editor1')
}
]
},
{
icon:'el-icon-paperclip',
index:'4',
title:this.$t('sidebar.editmber'),
subs:[
{
index:'editmbereditor',
title:this.$t('sidebar.editmber1')
}
// ,
// {
// index:'editmberperiod',
// title:this.$t('sidebar.editmber2')
// }
]
},
{
icon:'el-icon-s-custom',
index:'3',
title:this.$t('sidebar.reviewer'),
subs:[
{
index:'reviewerApplyList',
title:this.$t('sidebar.reviewer1')
},
{
index:'reviewerList',
title:this.$t('sidebar.reviewer2')
},
{
index:'reviewerImport',
title:this.$t('sidebar.reviewer3')
}
]
}
],
admin_items:[
{
icon: 'el-icon-lx-home',
index: 'dashboard',
title: this.$t('sidebar.main')
},
{
icon: 'el-icon-user',
index: '2',
title: this.$t('sidebar.editormanage'),
subs:[
{
index:'editorList',
title:this.$t('sidebar.editormanage1')
},
{
index:'editorAdd',
title:this.$t('sidebar.editormanage2')
}
]
},
{
icon:'el-icon-notebook-1',
index:'3',
title:this.$t('sidebar.journal'),
subs:[
{
index:'journalList',
title:this.$t('sidebar.journal1')
},
{
index:'journalAdd',
title:this.$t('sidebar.journal2')
}
]
},
{
icon:'el-icon-search',
index:'4',
title:this.$t('sidebar.monitor'),
subs:[
{
index:'monitorManuscript',
title:this.$t('sidebar.monitor1')
},
]
},
{
icon:'el-icon-connection',
index:'5',
title:this.$t('sidebar.chief'),
subs:[
{
index:'chiefeditor',
title:this.$t('sidebar.chief1')
},
{
index:'chiefperiod',
title:this.$t('sidebar.chief2')
}
]
}
// {
// icon:'el-icon-user-solid',
// index:'4',
// title:this.$t('sidebar.reviewer'),
// subs:[
// {
// index:'adminImportReviewer',
// title:this.$t('sidebar.reviewerimport')
// },
// {
// index:'adminImportreviewerError',
// title:this.$t('sidebar.reviewerimporterror')
// }
// ]
// }
],
reviewer_items:[
{
icon: 'el-icon-lx-home',
index: 'dashboard',
title: this.$t('sidebar.main')
},
{
icon: 'el-icon-lx-cascades',
index: '1',
title: this.$t('sidebar.author'),
subs:[
{
index:'articleList',
title:this.$t('sidebar.author1')
},
{
index:'articleAdd',
title:this.$t('sidebar.author2')
}
]
},
{
icon: 'el-icon-user',
index: '2',
title: this.$t('sidebar.reviewerArticle'),
subs:[
{
index:'reviewerArticleList',
title:this.$t('sidebar.reviewerArticle1')
}
]
}
]
};
},
computed: {
onRoutes() {
return this.$route.path.replace('/', '');
}
},
created() {
if(this.userrole==2){ //其余的身份(显示作者)
this.items = this.author_items;
}else if(this.userrole ==1){ //编辑
this.items = this.editor_items;
}else if(this.userrole==0){ //超级管理员
this.items = this.admin_items;
}
// else if(this.userrole=='reviewer'){
// this.items = this.reviewer_items;
// }
// 通过 Event Bus 进行组件间通信,来折叠侧边栏
bus.$on('collapse', msg => {
this.collapse = msg;
bus.$emit('collapse-content', msg);
});
}
};
</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>