73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
|
import React, { useMemo, useRef } from 'react';
|
|||
|
|
import { Link } from 'umi';
|
|||
|
|
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 {
|
|||
|
|
children,
|
|||
|
|
} = props;
|
|||
|
|
|
|||
|
|
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%' }}>
|
|||
|
|
{children}
|
|||
|
|
</Content>
|
|||
|
|
</Layout>
|
|||
|
|
</Authorized>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default TopLayout;
|