71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
import React, { useMemo, useRef } from 'react';
|
||
import { Link, Outlet, useLocation } from '@umijs/max';
|
||
import { Result, Button, Layout, Avatar } from 'antd';
|
||
import Authorized from '@/utils/Authorized';
|
||
import { getMatchMenu } from '@umijs/route-utils';
|
||
import logo from '@/assets/logo.svg'
|
||
import { CarryOutOutlined, UserSwitchOutlined } from '@ant-design/icons';
|
||
import moment from 'moment';
|
||
import { getSessionUserData } from '@/utils/session';
|
||
|
||
const noMatch = (
|
||
<Result
|
||
status={403}
|
||
title="403"
|
||
subTitle="Sorry, you are not authorized to access this page."
|
||
extra={
|
||
<Button type="primary">
|
||
<Link to="/user/login">Go Login</Link>
|
||
</Button>
|
||
}
|
||
/>
|
||
);
|
||
|
||
const TopLayout: React.FC<{}> = (props) => {
|
||
const location = useLocation()
|
||
|
||
const { Header, Content } = Layout;
|
||
|
||
const menuDataRef = useRef<any[]>([]);
|
||
|
||
let data = getSessionUserData();
|
||
|
||
const authorized = useMemo(
|
||
() =>
|
||
getMatchMenu(location.pathname || '/', menuDataRef.current).pop() || {
|
||
authority: undefined,
|
||
},
|
||
[location.pathname],
|
||
);
|
||
|
||
|
||
return (
|
||
<Authorized authority={authorized!.authority} noMatch={noMatch}>
|
||
<Layout>
|
||
<Header style={{ position: 'fixed', zIndex: 1, width: '100%', background: '#b30000', height: '56px' }}>
|
||
<div className="top-menu">
|
||
<div className="left-logo" style={{ color: '#fff', top: '-4px' }}>
|
||
<img src={logo} alt="" />中远海运集团采购信息系统 ｜ 招标采购中心
|
||
</div>
|
||
<ul className="right-btns">
|
||
<li><CarryOutOutlined />{moment().format("YYYY-MM-DD")}</li>
|
||
{data?.organizationName == null ? null : (<li><UserSwitchOutlined />{data?.organizationName}</li>)}
|
||
<li>
|
||
<Avatar size="small" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" style={{ width: '30px' }} />
|
||
<a className="antd-dropdown-link" style={{ color: "#fff" }}>
|
||
{data?.fullName}
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</Header>
|
||
<Content style={{ padding: '0 24px', marginTop: 64, width: '100%' }}>
|
||
<Outlet />
|
||
</Content>
|
||
</Layout>
|
||
</Authorized>
|
||
);
|
||
};
|
||
|
||
export default TopLayout;
|