Menus.vue
2.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<template>
<Menu class="sidebar-menu" theme="light" width="auto">
<template v-for="(menu, index) in menus">
<Submenu v-if="menu.subMenus" :name="index">
<template slot="title">
<Icon :type="menu.icon"></Icon>
{{menu.title}}
</template>
<template v-for="(subMenu, subIndex) in menu.subMenus">
<MenuItem :name="`${index}-${subIndex}`">
<a v-if="subMenu.isClassic" :href="subMenu.link">
<Icon :type="subMenu.icon"></Icon>
{{subMenu.title}}
</a>
<router-link v-else :to="subMenu.link">
{{subMenu.title}}
</router-link>
</MenuItem>
</template>
</Submenu>
<MenuItem v-else :name="index">
<a v-if="menu.isClassic" :href="menu.link">
<Icon :type="menu.icon"></Icon>
{{menu.title}}
</a>
<router-link v-else :to="menu.link">
<Icon :type="menu.icon"></Icon>
{{menu.title}}
</router-link>
</MenuItem>
</template>
</Menu>
</template>
<script>
import {
normalMenus,
masterMenus,
businessMenus
} from '../../../../config/menus' // 考虑与原有业务复用
export default {
props: ['user'],
computed: {
isMaster: function() {
return this.user.role === '1000'
},
isBusiness: function() {
return this.user.role === '3000'
},
menus: function() {
if (this.isBusiness) {
return businessMenus
}
if (this.isMaster) {
return [...normalMenus, ...masterMenus]
}
return normalMenus
}
}
}
</script>
<style scoped lang="scss">
a {
display: block;
color: #495060;
> i {
margin-right: 6px;
}
}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active {
color: #495060;
}
</style>