sorrycc
8 years ago
committed by
陈帅
陈帅
1 changed files with 0 additions and 309 deletions
@ -1,309 +0,0 @@ |
|||||
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 pathToRegexp from 'path-to-regexp'; |
|
||||
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, |
|
||||
maxWidth: 1599, |
|
||||
}, |
|
||||
'screen-xxl': { |
|
||||
minWidth: 1600, |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
let isMobile; |
|
||||
enquireScreen(b => { |
|
||||
isMobile = b; |
|
||||
}); |
|
||||
|
|
||||
@connect(({ user, global = {}, loading }) => ({ |
|
||||
currentUser: user.currentUser, |
|
||||
collapsed: global.collapsed, |
|
||||
fetchingNotices: loading.effects['global/fetchNotices'], |
|
||||
notices: global.notices, |
|
||||
})) |
|
||||
export default class BasicLayout extends React.PureComponent { |
|
||||
static childContextTypes = { |
|
||||
location: PropTypes.object, |
|
||||
breadcrumbNameMap: PropTypes.object, |
|
||||
}; |
|
||||
|
|
||||
state = { |
|
||||
isMobile, |
|
||||
}; |
|
||||
|
|
||||
getChildContext() { |
|
||||
const { location, routerData } = this.props; |
|
||||
return { |
|
||||
location, |
|
||||
breadcrumbNameMap: getBreadcrumbNameMap(getMenuData(), routerData), |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
componentDidMount() { |
|
||||
this.enquireHandler = enquireScreen(mobile => { |
|
||||
this.setState({ |
|
||||
isMobile: mobile, |
|
||||
}); |
|
||||
}); |
|
||||
const { dispatch } = this.props; |
|
||||
dispatch({ |
|
||||
type: 'user/fetchCurrent', |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
componentWillUnmount() { |
|
||||
unenquireScreen(this.enquireHandler); |
|
||||
} |
|
||||
|
|
||||
getPageTitle() { |
|
||||
const { routerData, location } = this.props; |
|
||||
const { pathname } = location; |
|
||||
let title = 'Ant Design Pro'; |
|
||||
let currRouterData = null; |
|
||||
// match params path
|
|
||||
Object.keys(routerData).forEach(key => { |
|
||||
if (pathToRegexp(key).test(pathname)) { |
|
||||
currRouterData = routerData[key]; |
|
||||
} |
|
||||
}); |
|
||||
if (currRouterData && currRouterData.name) { |
|
||||
title = `${currRouterData.name} - Ant Design Pro`; |
|
||||
} |
|
||||
return title; |
|
||||
} |
|
||||
|
|
||||
getBaseRedirect = () => { |
|
||||
// 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 => { |
|
||||
const { dispatch } = this.props; |
|
||||
dispatch({ |
|
||||
type: 'global/changeLayoutCollapsed', |
|
||||
payload: collapsed, |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
handleNoticeClear = type => { |
|
||||
message.success(`清空了${type}`); |
|
||||
const { dispatch } = this.props; |
|
||||
dispatch({ |
|
||||
type: 'global/clearNotices', |
|
||||
payload: type, |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
handleMenuClick = ({ key }) => { |
|
||||
const { dispatch } = this.props; |
|
||||
if (key === 'triggerError') { |
|
||||
dispatch(routerRedux.push('/exception/trigger')); |
|
||||
return; |
|
||||
} |
|
||||
if (key === 'logout') { |
|
||||
dispatch({ |
|
||||
type: 'login/logout', |
|
||||
}); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
handleNoticeVisibleChange = visible => { |
|
||||
const { dispatch } = this.props; |
|
||||
if (visible) { |
|
||||
dispatch({ |
|
||||
type: 'global/fetchNotices', |
|
||||
}); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
render() { |
|
||||
const { |
|
||||
currentUser, |
|
||||
collapsed, |
|
||||
fetchingNotices, |
|
||||
notices, |
|
||||
routerData, |
|
||||
match, |
|
||||
location, |
|
||||
} = this.props; |
|
||||
const { isMobile: mb } = this.state; |
|
||||
const baseRedirect = this.getBaseRedirect(); |
|
||||
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()} |
|
||||
collapsed={collapsed} |
|
||||
location={location} |
|
||||
isMobile={mb} |
|
||||
onCollapse={this.handleMenuCollapse} |
|
||||
/> |
|
||||
<Layout> |
|
||||
<Header style={{ padding: 0 }}> |
|
||||
<GlobalHeader |
|
||||
logo={logo} |
|
||||
currentUser={currentUser} |
|
||||
fetchingNotices={fetchingNotices} |
|
||||
notices={notices} |
|
||||
collapsed={collapsed} |
|
||||
isMobile={mb} |
|
||||
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={baseRedirect} /> |
|
||||
<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> |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue