Menus.jsx
3.47 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React from 'react'
import { Link } from 'react-router-dom'
import { Layout, Menu, Icon } from 'antd'
import {
normalMenus,
masterMenus,
businessMenus
} from '../../../../config/menus' // 考虑与原有业务复用
const { Header, Sider } = Layout
function Title(props) {
return <div>
<Icon type={props.icon}></Icon>
{props.title}
</div>
}
function Menus(props) {
const user = props.user
function isMaster() {
return user.role === '1000'
}
function isBusiness() {
return user.role === '3000'
}
const menus = (function() {
if (isBusiness()) {
return businessMenus
}
if (isMaster()) {
return [...normalMenus, ...masterMenus]
}
return normalMenus
}())
const ListItems = menus.map((menu, index) => {
if (menu.subMenus && menu.subMenus.length) {
return <Menu.SubMenu title={Title(menu)} key={index + ''}>
{menu.subMenus.map((subMenu, subIndex) => {
return <Menu.Item key={`${index}-${subIndex}`}>
{subMenu.isClassic ? <a href={subMenu.link}>
<Icon type={subMenu.icon}></Icon>
{subMenu.title}
</a> : <Link to={subMenu.link}>
<Icon type={subMenu.icon}></Icon>
{subMenu.title}
</Link>}
</Menu.Item>
})}
</Menu.SubMenu>
}
return <Menu.Item key={index + ''}>
{menu.isClassic ? <a href={menu.link}>
<Icon type={menu.icon}></Icon>
{menu.title}
</a> : <Link to={menu.link}>
<Icon type={menu.icon}></Icon>
{menu.title}
</Link>}
</Menu.Item>
// return <Item menu={menu} key={index + ''} />
})
return <div className="menus">
<Menu className="sidebar-menu" theme="light" mode="inline" width="auto">
{ListItems}
{/* <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>
</div>
}
export default Menus