123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308 |
- import React, { Fragment } from 'react';
- import PropTypes from 'prop-types';
- import { Layout, Icon, message } from 'antd';
- import DocumentTitle from 'react-document-title';
- import { connect } from 'dva';
- import { Route, Redirect, Switch, routerRedux } from 'dva/router';
- import { ContainerQuery } from 'react-container-query';
- import classNames from 'classnames';
- import { enquireScreen, unenquireScreen } from 'enquire-js';
- import GlobalHeader from '../components/GlobalHeader';
- import GlobalFooter from '../components/GlobalFooter';
- import SiderMenu from '../components/SiderMenu';
- import NotFound from '../routes/Exception/404';
- import { getRoutes } from '../utils/utils';
- import Authorized from '../utils/Authorized';
- // import { getMenuData } from '../common/menu';
- import logo from '../assets/logo.svg';
-
- const { Content, Header, Footer } = Layout;
- const { AuthorizedRoute, check } = Authorized;
-
- /**
- * 根据菜单取得重定向地址.
- */
- const redirectData = [];
- // const getRedirect = item => {
- // if (item && item.children) {
- // if (item.children[0] && item.children[0].path) {
- // redirectData.push({
- // from: `${item.path}`,
- // to: `${item.children[0].path}`,
- // });
- // item.children.forEach(children => {
- // getRedirect(children);
- // });
- // }
- // }
- // };
- // getMenuData().forEach(getRedirect);
-
- /**
- * 获取面包屑映射
- * @param {Object} menuData 菜单配置
- * @param {Object} routerData 路由配置
- */
- const getBreadcrumbNameMap = (menuData, routerData) => {
- const result = {};
- const childResult = {};
- for (const i of menuData) {
- if (!routerData[i.path]) {
- result[i.path] = i;
- }
- if (i.children) {
- Object.assign(childResult, getBreadcrumbNameMap(i.children, routerData));
- }
- }
- return Object.assign({}, routerData, result, childResult);
- };
-
- const query = {
- 'screen-xs': {
- maxWidth: 575,
- },
- 'screen-sm': {
- minWidth: 576,
- maxWidth: 767,
- },
- 'screen-md': {
- minWidth: 768,
- maxWidth: 991,
- },
- 'screen-lg': {
- minWidth: 992,
- maxWidth: 1199,
- },
- 'screen-xl': {
- minWidth: 1200,
- },
- };
-
- let isMobile;
- enquireScreen(b => {
- isMobile = b;
- });
-
- // @App
- class BasicLayout extends React.PureComponent {
- static childContextTypes = {
- location: PropTypes.object,
- breadcrumbNameMap: PropTypes.object,
- };
- state = {
- isMobile,
- };
- getChildContext() {
- // const { location, routerData } = this.props;
- const { location, routerData, menuData } = this.props;
- return {
- location,
- // breadcrumbNameMap: getBreadcrumbNameMap(getMenuData(), routerData),
- breadcrumbNameMap: getBreadcrumbNameMap(menuData, routerData),
- };
- }
- componentDidMount() {
- this.enquireHandler = enquireScreen(mobile => {
- this.setState({
- isMobile: mobile,
- });
- });
- this.props.dispatch({
- type: 'user/fetchCurrent',
- });
- this.props.dispatch({
- type: 'user/fetchMenus',
- });
- }
- componentWillUnmount(){
- unenquireScreen(this.enquireHandler);
- }
- getPageTitle() {
- const { routerData, location } = this.props;
- const { pathname } = location;
- let title = 'Ant Design Pro';
- if (routerData[pathname] && routerData[pathname].name) {
- title = `${routerData[pathname].name} - Ant Design Pro`;
- }
- return title;
- }
- getRedirect = item => {
- const me = this
- if (item && item.children) {
- if (item.children[0] && item.children[0].path) {
- redirectData.push({
- from: `${item.path}`,
- to: `${item.children[0].path}`,
- });
- item.children.forEach(children => {
- me.getRedirect(children);
- });
- }
- }
- }
- getBashRedirect = () => {
- // According to the url parameter to redirect
- // 这里是重定向的,重定向到 url 的 redirect 参数所示地址
- const urlParams = new URL(window.location.href);
-
- const redirect = urlParams.searchParams.get('redirect');
- // Remove the parameters in the url
- if (redirect) {
- urlParams.searchParams.delete('redirect');
- window.history.replaceState(null, 'redirect', urlParams.href);
- } else {
- const { routerData } = this.props;
- // get the first authorized route path in routerData
- const authorizedPath = Object.keys(routerData).find(
- item => check(routerData[item].authority, item) && item !== '/'
- );
- return authorizedPath;
- }
- return redirect;
- };
- handleMenuCollapse = collapsed => {
- this.props.dispatch({
- type: 'global/changeLayoutCollapsed',
- payload: collapsed,
- });
- };
- handleNoticeClear = type => {
- message.success(`清空了${type}`);
- this.props.dispatch({
- type: 'global/clearNotices',
- payload: type,
- });
- };
- handleMenuClick = ({ key }) => {
- if (key === 'triggerError') {
- this.props.dispatch(routerRedux.push('/exception/trigger'));
- return;
- }
- if (key === 'logout') {
- this.props.dispatch({
- type: 'login/logout',
- });
- }
- };
- handleNoticeVisibleChange = visible => {
- if (visible) {
- this.props.dispatch({
- type: 'global/fetchNotices',
- });
- }
- };
- render() {
- const {
- menuData,
- currentUser,
- collapsed,
- fetchingNotices,
- notices,
- routerData,
- match,
- location,
- } = this.props;
- const bashRedirect = this.getBashRedirect();
- menuData.forEach(this.getRedirect);
- console.log(menuData);
-
- const layout = (
- <Layout>
- <SiderMenu
- logo={logo}
- // 不带Authorized参数的情况下如果没有权限,会强制跳到403界面
- // If you do not have the Authorized parameter
- // you will be forced to jump to the 403 interface without permission
- Authorized={Authorized}
- // menuData={getMenuData()}
- menuData={menuData}
- collapsed={collapsed}
- location={location}
- isMobile={this.state.isMobile}
- onCollapse={this.handleMenuCollapse}
- />
- <Layout>
- <Header style={{ padding: 0 }}>
- <GlobalHeader
- logo={logo}
- currentUser={currentUser}
- fetchingNotices={fetchingNotices}
- notices={notices}
- collapsed={collapsed}
- isMobile={this.state.isMobile}
- onNoticeClear={this.handleNoticeClear}
- onCollapse={this.handleMenuCollapse}
- onMenuClick={this.handleMenuClick}
- onNoticeVisibleChange={this.handleNoticeVisibleChange}
- />
- </Header>
- <Content style={{ margin: '24px 24px 0', height: '100%' }}>
- <Switch>
- {redirectData.map(item => (
- <Redirect key={item.from} exact from={item.from} to={item.to} />
- ))}
- {getRoutes(match.path, routerData).map(item => (
- <AuthorizedRoute
- key={item.key}
- path={item.path}
- component={item.component}
- exact={item.exact}
- authority={item.authority}
- redirectPath="/exception/403"
- />
- ))}
- <Redirect exact from="/" to={bashRedirect} />
- <Route render={NotFound} />
- </Switch>
- </Content>
- <Footer style={{ padding: 0 }}>
- <GlobalFooter
- links={[
- {
- key: 'Pro 首页',
- title: 'Pro 首页',
- href: 'http://pro.ant.design',
- blankTarget: true,
- },
- {
- key: 'github',
- title: <Icon type="github" />,
- href: 'https://github.com/ant-design/ant-design-pro',
- blankTarget: true,
- },
- {
- key: 'Ant Design',
- title: 'Ant Design',
- href: 'http://ant.design',
- blankTarget: true,
- },
- ]}
- copyright={
- <Fragment>
- Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
- </Fragment>
- }
- />
- </Footer>
- </Layout>
- </Layout>
- );
-
- return (
- <DocumentTitle title={this.getPageTitle()}>
- <ContainerQuery query={query}>
- {params => <div className={classNames(params)}>{layout}</div>}
- </ContainerQuery>
- </DocumentTitle>
- );
- }
- }
-
- export default connect(({ user, global, loading }) => ({
- menuData: user.menuData,
- currentUser: user.currentUser,
- collapsed: global.collapsed,
- fetchingNotices: loading.effects['global/fetchNotices'],
- notices: global.notices,
- }))(BasicLayout);
|