BasicLayout.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import { Layout, message } from 'antd';
  4. import DocumentTitle from 'react-document-title';
  5. import { connect } from 'dva';
  6. import { Route, Redirect, Switch } from 'dva/router';
  7. import { ContainerQuery } from 'react-container-query';
  8. import classNames from 'classnames';
  9. import { enquireScreen } from 'enquire-js';
  10. import GlobalHeader from '../components/GlobalHeader';
  11. import SiderMenu from '../components/SiderMenu';
  12. import NotFound from '../routes/Exception/404';
  13. import { Hotax } from '../utils/config';
  14. import { getRoutes } from '../utils/utils';
  15. import Authorized from '../utils/Authorized';
  16. import { getMenuData } from '../common/menu';
  17. import logo from '../assets/logo.jpg';
  18. const { Content, Header } = Layout;
  19. const { AuthorizedRoute } = Authorized;
  20. /**
  21. * 根据菜单取得重定向地址.
  22. */
  23. const redirectData = [];
  24. const getRedirect = (item) => {
  25. if (item && item.children) {
  26. if (item.children[0] && item.children[0].path) {
  27. redirectData.push({
  28. from: `${item.path}`,
  29. to: `${item.children[0].path}`,
  30. });
  31. item.children.forEach((children) => {
  32. getRedirect(children);
  33. });
  34. }
  35. }
  36. };
  37. getMenuData().forEach(getRedirect);
  38. /**
  39. * 获取面包屑映射
  40. * @param {Object} menuData 菜单配置
  41. * @param {Object} routerData 路由配置
  42. */
  43. const getBreadcrumbNameMap = (menuData, routerData) => {
  44. const result = {};
  45. const childResult = {};
  46. for (const i of menuData) {
  47. if (!routerData[i.path]) {
  48. result[i.path] = i;
  49. }
  50. if (i.children) {
  51. Object.assign(childResult, getBreadcrumbNameMap(i.children, routerData));
  52. }
  53. }
  54. return Object.assign({}, routerData, result, childResult);
  55. };
  56. const query = {
  57. 'screen-xs': {
  58. maxWidth: 575,
  59. },
  60. 'screen-sm': {
  61. minWidth: 576,
  62. maxWidth: 767,
  63. },
  64. 'screen-md': {
  65. minWidth: 768,
  66. maxWidth: 991,
  67. },
  68. 'screen-lg': {
  69. minWidth: 992,
  70. maxWidth: 1199,
  71. },
  72. 'screen-xl': {
  73. minWidth: 1200,
  74. },
  75. };
  76. let isMobile;
  77. enquireScreen((b) => {
  78. isMobile = b;
  79. });
  80. class BasicLayout extends React.PureComponent {
  81. static childContextTypes = {
  82. location: PropTypes.object,
  83. breadcrumbNameMap: PropTypes.object,
  84. };
  85. state = {
  86. isMobile,
  87. };
  88. getChildContext() {
  89. const { location, routerData } = this.props;
  90. return {
  91. location,
  92. breadcrumbNameMap: getBreadcrumbNameMap(getMenuData(), routerData),
  93. };
  94. }
  95. componentDidMount() {
  96. enquireScreen((mobile) => {
  97. this.setState({
  98. isMobile: mobile,
  99. });
  100. });
  101. this.props.dispatch({
  102. type: 'user/fetchCurrent',
  103. });
  104. }
  105. getPageTitle() {
  106. const { routerData, location } = this.props;
  107. const { pathname } = location;
  108. let title = Hotax.PROJECT_NAME;
  109. if (routerData[pathname] && routerData[pathname].name) {
  110. title = `${routerData[pathname].name} - ${Hotax.PROJECT_NAME}`;
  111. }
  112. return title;
  113. }
  114. getBashRedirect = () => {
  115. // According to the url parameter to redirect
  116. // 这里是重定向的,重定向到 url 的 redirect 参数所示地址
  117. const urlParams = new URL(window.location.href);
  118. const redirect = urlParams.searchParams.get('redirect');
  119. // Remove the parameters in the url
  120. if (redirect) {
  121. urlParams.searchParams.delete('redirect');
  122. window.history.replaceState(null, 'redirect', urlParams.href);
  123. } else {
  124. return '/dashboard/sold';
  125. }
  126. return redirect;
  127. };
  128. handleMenuCollapse = (collapsed) => {
  129. this.props.dispatch({
  130. type: 'global/changeLayoutCollapsed',
  131. payload: collapsed,
  132. });
  133. };
  134. handleNoticeClear = (type) => {
  135. message.success(`清空了${type}`);
  136. this.props.dispatch({
  137. type: 'global/clearNotices',
  138. payload: type,
  139. });
  140. };
  141. handleMenuClick = ({ key }) => {
  142. if (key === 'logout') {
  143. this.props.dispatch({
  144. type: 'login/logout',
  145. });
  146. }
  147. };
  148. handleNoticeVisibleChange = (visible) => {
  149. if (visible) {
  150. this.props.dispatch({
  151. type: 'global/fetchNotices',
  152. });
  153. }
  154. };
  155. render() {
  156. const {
  157. currentUser, collapsed, fetchingNotices, notices, routerData, match, location,
  158. } = this.props;
  159. const bashRedirect = this.getBashRedirect();
  160. const layout = (
  161. <Layout>
  162. <Header style={{ padding: 0, height: 50, position: 'fixed', top: 0, left: 0, width: '100%' }}>
  163. <GlobalHeader
  164. logo={logo}
  165. currentUser={currentUser}
  166. fetchingNotices={fetchingNotices}
  167. notices={notices}
  168. collapsed={collapsed}
  169. isMobile={this.state.isMobile}
  170. onNoticeClear={this.handleNoticeClear}
  171. onCollapse={this.handleMenuCollapse}
  172. onMenuClick={this.handleMenuClick}
  173. onNoticeVisibleChange={this.handleNoticeVisibleChange}
  174. />
  175. </Header>
  176. <Layout style={{ position: 'fixed', marginTop: 50, overflow: 'hidden', top: 0, bottom: 0, width: '100%' }}>
  177. <SiderMenu
  178. // 不带Authorized参数的情况下如果没有权限,会强制跳到403界面
  179. // If you do not have the Authorized parameter
  180. // you will be forced to jump to the 403 interface without permission
  181. Authorized={Authorized}
  182. menuData={getMenuData()}
  183. collapsed={collapsed}
  184. location={location}
  185. isMobile={this.state.isMobile}
  186. onCollapse={this.handleMenuCollapse}
  187. />
  188. <Content style={{ marginBottom: 50 }}>
  189. <Switch>
  190. {
  191. redirectData.map(item =>
  192. <Redirect key={item.from} exact from={item.from} to={item.to} />
  193. )
  194. }
  195. {
  196. getRoutes(match.path, routerData).map(item =>
  197. (
  198. <AuthorizedRoute
  199. key={item.key}
  200. path={item.path}
  201. component={item.component}
  202. exact={item.exact}
  203. authority={item.authority}
  204. redirectPath="/exception/403"
  205. />
  206. )
  207. )
  208. }
  209. <Redirect exact from="/" to={bashRedirect} />
  210. <Route render={NotFound} />
  211. </Switch>
  212. </Content>
  213. </Layout>
  214. </Layout>
  215. );
  216. return (
  217. <DocumentTitle title={this.getPageTitle()}>
  218. <ContainerQuery query={query}>
  219. {params => <div className={classNames(params)}>{layout}</div>}
  220. </ContainerQuery>
  221. </DocumentTitle>
  222. );
  223. }
  224. }
  225. export default connect(({ user, global, loading }) => ({
  226. currentUser: user.currentUser,
  227. collapsed: global.collapsed,
  228. fetchingNotices: loading.effects['global/fetchNotices'],
  229. notices: global.notices,
  230. }))(BasicLayout);