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
import React, { useState } from 'react';
import check from '@/components/Authorized/CheckPermissions';
import { matchRoutes, renderRoutes } from 'react-router-config';
import { Link } from 'react-router-dom';
import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
import logo from '../assets/images/logo/panda-logo.svg';
import RightContent from '../components/GlobalHeader/RightContent';
import { BASENAME } from '@/utils/constants';
// const noMatch = (
// <Result
// status={403}
// title="403"
// subTitle="Sorry, you are not authorized to access this page."
// extra={<Button type="primary" />}
// />
// );
// eslint-disable-next-line no-unused-vars
const defaultFooterDom = (
<DefaultFooter
copyright={`${new Date().getFullYear()} 熊猫智慧水务技术委员会出品`}
links={false}
/>
);
const BasicLayout = props => {
/* eslint-disable no-unused-vars */
const [pathname, setPathname] = useState(`/${BASENAME}`);
const filterMenu = menuRoutes =>
menuRoutes
.map(route => {
const routeCopy = { ...route };
if (routeCopy.routes) routeCopy.routes = filterMenu(routeCopy.routes);
return routeCopy.hideMenu ||
(routeCopy.authority && !check(routeCopy.authority, true, false))
? null
: routeCopy;
})
.filter(Boolean);
const handleMenuCollapse = () => {}; // get children authority
// 获取url地址参数
const getQueryVariable = name => {
// 获取url上的参数(使用decodeURIComponent对url参数进行解码)
let search = decodeURIComponent(window.location.search).replace('?', '');
const tempArr = search !== '' ? search.split('&') : [];
// 将参数名转小写,参数值保留原大小写
tempArr.forEach(item => {
if (item) {
const itemArr = item.split('=');
search = search.replace(itemArr[0], itemArr[0].toLowerCase());
}
});
// 正则匹配指定的参数
const reg = new RegExp(`(^|&)${name.toLowerCase()}=([^&]*)(&|$)`);
const result = search.match(reg);
return result != null ? result[2] : '';
};
matchRoutes(props.route.routes, props.location.pathname);
return (
<>
{sessionStorage.getItem('_omsticket') == 'd438aaf9578f405299ae740c4eb75aae' ? (
<>{renderRoutes(props.route.routes)}</>
) : (
<ProLayout
logo={() => <img src={logo} style={{ width: '32px', height: '32px' }} alt="" />}
style={{ height: '100vh' }}
onCollapse={handleMenuCollapse}
onMenuHeaderClick={() => {}}
// footerRender={() => defaultFooterDom}
rightContentRender={() => <RightContent />}
title="熊猫运维平台"
// fixedHeader
route={
{
// routes: config.routes,
}
}
location={{
pathname,
}}
menuDataRender={() => filterMenu(props.route.routes)}
menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || !menuItemProps.path) {
return defaultDom;
}
// console.log(menuItemProps);
return <Link to={menuItemProps.path}>{defaultDom}</Link>;
}}
itemRender={(route, params, routes, paths) => {
const first = false; // routes.indexOf(route) === 0;
return first ? (
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
) : (
<span>{route.breadcrumbName}</span>
);
}}
{...props}
>
{renderRoutes(props.route.routes)}
</ProLayout>
)}
</>
);
};
export default BasicLayout;