view.js
2.15 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
import React, { useState, useEffect } from 'react'
import { NavLink } from 'react-router-dom'
import { Layout, Menu } from 'antd'
import { getAllRouter } from '@/libs/utilts'
import { APP } from '../../config'
const { Header, Content, Sider } = Layout
const { SubMenu } = Menu
const theme = "light"
const Item = ({url, children, ...props}) => {
return (
<Menu.Item {...props} >
<NavLink to={{ pathname: url }}>{children}</NavLink>
</Menu.Item>
)
}
const Page = ({ children, userRoute = [], location }) => {
const [collapsed, setCollapsed] = useState(false)
const [index, setIdex] = useState([])
const onCollapse = () => setCollapsed(!collapsed)
useEffect(() => {
const allRouter = getAllRouter(userRoute)
const route = allRouter.find(e => e.url === location.pathname)
if (route)
setIdex([route.url])
else
setIdex(['/'])
}, [location, userRoute])
return (
<Layout style={{ minHeight: '100vh' }} className="site-layout" >
<Sider theme={theme} collapsible collapsed={collapsed} onCollapse={onCollapse}>
<Header className="site-layout-background" style={{ padding: 0 }} />
<Menu theme={theme} mode="inline" selectedKeys={index} >
{userRoute.map(e => {
return (
<SubMenu key={e.name} icon={<img className="icon" alt="图标" src={APP.STATIS_URL + e.icon} />} title={e.name}>
{e.childMenus.map(child => <Item key={child.url} url={child.url} >{child.name}</Item>)}
</SubMenu>
)
})}
</Menu>
</Sider>
<Layout>
<Header className="site-layout-background" style={{ padding: 0 }} />
<Content style={{ margin: '16px', display: 'flex' }}>
<div style={{ flex: 1, backgroundColor: '#fff' }}>
{children}
</div>
</Content>
</Layout>
</Layout>
)
}
export default Page