view.js
5.1 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React, { useState, useEffect, useRef } from 'react'
import { NavLink, useLocation, useHistory } from 'react-router-dom'
import { Layout, Menu, Avatar, Dropdown, Popover } from 'antd'
import { getAllRouter } from '@/libs/utilts'
import { APP } from '../../config'
import { UserOutlined, ExportOutlined, RetweetOutlined, BankFilled, RightOutlined } from '@ant-design/icons'
import { deleteSessionid } from '@/api/user'
import BetterScroll from 'better-scroll'
import version from '../../version'
const { Header, Content, Sider } = Layout
const { SubMenu } = Menu
const theme = "light"
let scroll = null
const Page = ({ children, userRoute = [], user, SYSTEM_CLEAR_LOGIN, baseConfig, business, company }) => {
const [index, setIdex] = useState([])
const [openKeys, setOpenKeys] = useState([])
const [serviceList, setServiceList] = useState([])
const location = useLocation()
const history = useHistory()
const menu = useRef(null)
useEffect(() => {
const allRouter = getAllRouter(userRoute)
const route = allRouter.find(e => e.url === location.pathname)
if (route) {
setIdex([route.url])
const open = userRoute.find(e => e.childMenus.find(c => c.url === route.url))
setOpenKeys([open.name])
}
}, [location, userRoute])
useEffect(() => {
if (baseConfig.other) setServiceList(baseConfig.other.serviceList.split(',').map(item => item.split('|')))
}, [baseConfig.other])
useEffect(() => {
if (scroll === null)
scroll = new BetterScroll(menu.current, { mouseWheel: true })
}, [])
const loginOut = () => {
deleteSessionid()
SYSTEM_CLEAR_LOGIN()
}
const downMenu = (
<Menu>
<Menu.Item >
<span style={{ fontWeight: '700', paddingRight: 50 }}>{user.phone}</span>
</Menu.Item>
<Menu.Divider />
<Menu.Item onClick={() => history.push('/setters')} >
<span style={{ fontWeight: '700', paddingRight: 50 }}>个人设置</span>
</Menu.Item>
<Menu.Divider />
{serviceList.map(e => {
return (
<Menu.Item key={e[0]} icon={<RetweetOutlined />}>
<a href={e[1]} target="_blank" rel="noopener noreferrer" >{e[0]}</a>
</Menu.Item>
)
})}
<Menu.Item icon={<ExportOutlined />} onClick={loginOut}>退出登录</Menu.Item>
</Menu>
)
return (
<Layout style={{ minHeight: '100vh' }} className="site-layout" >
<Sider theme={theme} >
<Header className="site-layout-background site-layout-header" style={{ padding: 0 }} >
<Popover trigger="click" content={version} placement="right">
<img src={baseConfig.logo} width="102" height="36" alt="信巴迪logo" />
</Popover>
</Header>
<div className="meun-box" ref={menu}>
<div >
<Menu theme={theme} mode="inline" selectedKeys={index} openKeys={openKeys} onOpenChange={e => setOpenKeys(e)} >
{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 => (
<Menu.Item key={child.url} url={child.url} >
<NavLink to={{ pathname: child.url }}>{child.name}</NavLink>
</Menu.Item>)
)}
</SubMenu>
)
})}
</Menu>
</div>
</div>
</Sider>
<Layout>
<Header className="site-layout-background site-layout-tab-header">
<div className="platform">
<BankFilled style={{ fontSize: 25 }} />
<span > {company.fullName}</span>
<RightOutlined />
<span> {business.mchName}</span>
</div>
<Dropdown overlay={downMenu} >
<div className="user-menu-box">
{/* <img alt="消息" style={{ marginRight: 5 }} src={require('../../assets/images/message.png')} /> */}
<Avatar icon={<UserOutlined />} size={28}></Avatar>
<span className="user-title">{user.name}</span>
</div>
</Dropdown>
</Header>
<Content>
<div className="content" >
<div>
{children}
</div>
</div>
</Content>
</Layout>
</Layout>
)
}
export default Page