根据路由配置Slider
数据源的key对应路由的path，key必须唯一，即使含有children的key不作为跳转，否则会造成页面交互bug
这里涉及到头部Silder配置和侧边Silder配置，并且侧边Silder存在3级路由
封装Silder组件
import { Layout, Menu } from 'antd';
import { useSelector, useDispatch, history } from 'umi';
import react, { useEffect, useState } from 'react';
import styles from './index.less';
// 存在3级路由的判断条件，根据url地址截取，这里只展示了侧边栏的数据源
const scenList = [ { label: '基础数据', key: '/selectAddress/aviodArea', children: [ { label: '道路数据', key: '/selectAddress/roadData' }, { label: '高程数据', key: '/selectAddress/elevation' }, { label: '地质条件', key: '/selectAddress/terrain' }, { label: '规避区域', key: '/selectAddress/aviodArea' }, ],
},
{
label: '阵地选址',
key: '/',
children: [
{
label: '新建方案',
key: '/selectAddress/describe',
},
{ label: '选址约束', key: '/selectAddress/addManager' },
{ label: '选址区域', key: '/selectAddress/planArea' },
{ label: '查看方案', key: '/' },
],
},
{
label: '路径规划',
key: '/pathPlan',
children: [
{
label: '新建方案',
key: '/pathPlan',
},
{ label: '路径约束', key: '/pathPlan/restrain' },
{ label: '查看方案', key: '/pathPlan/viewPlan' },
],
},
{
label: '无源定位',
key: '/location',
children: [
{ label: '导航定位', key: '/location' },
{ label: '特征转换', key: '/location/convert' },
{ label: '特征标注', key: '/location/mark' },
{ label: '特征匹配', key: '/location/matching' },
{ label: '数据查询', key: '/location/dataSearch' },
],
},
{
label: '参考图',
key: '/picture',
children: [
{
label: '新建方案',
key: '/picture/explain',
children: [
{ label: '图像解译', key: '/picture/explain' },
{ label: '适配区选取', key: '/picture/choose' },
{ label: '适配区评价', key: '/picture/evaluate' },
{ label: '装订量', key: '/picture/count' },
],
},
{
label: '方案管理',
key: '/picture/explainResult',
children: [
{ label: '图像解译结果', key: '/picture/explainResult' },
{ label: '适配区选取结果', key: '/picture/chooseResult' },
{ label: '适配区评价结果', key: '/picture/evaluateResult' },
{ label: '装订量查询', key: '/picture/countSearch' },
],
},
{
label: '查看方案',
key: '/picture/projectManager',
}
],
},
];
const CommonSlider = () => {
const { Sider } = Layout;
const [collapsed, setCollapsed] = useState(false);
const dispatch = useDispatch();
const activeHeaderKey = useSelector((state) => state.common.activeHeaderKey);
const activeSliderKey = useSelector((state) => state.common.activeSliderKey);
useEffect(() => {
// 全局保存当前头部silder和侧边栏silder默认选中的key
dispatch({
type: 'common/saveHeaderKey',
payload: { activeHeaderKey: history.location.pathname },
});
dispatch({
type: 'common/saveSliderKey',
payload: { activeSliderKey: history.location.pathname },
});
}, []);
// Menu的change事件，跳转路由
const changeMenuItem = (item) => {
dispatch({
type: 'common/saveSliderKey',
payload: { activeSliderKey: item.key },
});
console.log(item, 'item');
history.push(`${item.key}`);
};
return (
<Sider>
<Menu
mode="inline"
style={{ height: '100%', borderRight: 0 }}
onClick={changeMenuItem}
selectedKeys={[activeSliderKey]}
item={scenList}
>
{scenList.map((item, index) => {
if (
item.key.split('/')[1] === 'selectAddress' ||
item.key.split('/')[1] === 'location' ||
item.key.split('/')[1] === 'pathPlan' ||
item.key.split('/')[1] === ''
) {
return (
<Menu.SubMenu title={item.label} key={item.key}>
{item.children.map((item, index) => {
return <Menu.Item key={item.key}>{item.label}</Menu.Item>;
})}
</Menu.SubMenu>
);
} else if (item.key.split('/')[1] === 'picture') {
return (
<Menu.SubMenu title={item.label} key={item.key}>
{item.children.map((item, index) => {
if (item.children) {
console.log(item.children, 'item.children');
return (
<Menu.SubMenu
key={item.key}
title={item.label}
>
{item.children.map((item, index) => {
return (
<Menu.Item key={item.key}>{item.label}</Menu.Item>
);
})}
</Menu.SubMenu>
);
} else {
return <Menu.Item key={item.key}>{item.label}</Menu.Item>;
}
})}
</Menu.SubMenu>
);
} else {
return <Menu.Item key={item.key}>{item.label}</Menu.Item>;
}
})}
</Menu>
</Sider>
);
};
export default CommonSlider;
封装公共头部
import react, { useState, useEffect } from 'react';
import { Layout, Menu } from 'antd';
import { useDispatch, history, useSelector } from 'umi';
import styles from './index.less';
const CommonHeader = () => {
const { Header } = Layout;
const dispatch = useDispatch();
const [activeKey, setActiveKey] = useState('');
useEffect(() => {
const url = history.location.pathname;
switch (url.split('/')[1]) {
case 'pathPlan':
setActiveKey('/pathPlan');
break;
default:
setActiveKey('/selectAddress/projectManager');
}
}, []);
const changeHeaderMenu = (item) => {
setActiveKey(item.key);
dispatch({
type: 'common/saveHeaderKey',
payload: { activeHeaderKey: item.key },
});
dispatch({
type: 'common/saveSliderKey',
payload: { activeSliderKey: item.key },
});
history.push(`${item.key}`);
};
return (
<Header className={styles.header}>
<div className={styles.headerLeft}>
<div className={styles.logoText}>XXX系统</div>
// 类似头部silder
{/* <Menu
mode="horizontal"
onClick={changeHeaderMenu}
selectedKeys={[activeKey]}
>
<Menu.Item key="/">阵地选址</Menu.Item>
<Menu.Item key="/pathPlan">阵地规划</Menu.Item>
</Menu> */}
</div>
<div className={styles.headerRight}>
<div className={styles.logOut}></div>
</div>
</Header>
)
}
export default CommonHeader
封装layout组件
import { Layout, ConfigProvider } from 'antd';
import { useSelector, useDispatch, history } from 'umi';
import CommonHeader from '@/components/CommonHeader';
import CommonSlider from '@/components/CommonSlider';
import CommonMap from '@/components/CommonMap';
import styles from './index.less';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const CommonLayout = ({ children }) => {
const url = history.location.pathname.split('/')[1];
const url2 = history.location.pathname.split('/')[2];
console.log(url2,'url')
const { Content } = Layout;
return (
<ConfigProvider locale={zh_CN}>
<Layout className={styles.layout}>
<CommonHeader />
<Layout>
<CommonSlider />
<Layout
className={styles.content}
style={{ paddingTop: '60px', overflow: 'auto' }}
>
<Content className="site-layout-background" style={{ margin: 0 }}>
{
url !='picture' && url !='' && url2 !='viewPlan' && <CommonMap></CommonMap>
}
{children}
</Content>
</Layout>
</Layout>
</Layout>
</ConfigProvider>
);
};
export default CommonLayout;
