页面调整

liyj

2020-06-01 2d0e600900696bb309d09efd47fd7d4980eeb172

 src/index.js

@@ -1,9 +1,7 @@
/* eslint-disable */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import Menu from './pages/menu/menu';
import Header from './components/common/HeadView';

import * as serviceWorker from './serviceWorker';
import { Router, Route, Switch, Redirect } from 'react-router-dom';
@@ -16,48 +14,138 @@
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// 引进页面（pages）
import Index from './pages/Index';
import Login from './pages/login/login';
import JurisdictionPersonMgt from './pages/collect/jurisdictionPersonMgt'; //信息采集--辖区人口管理
// 公用结构组件
import Menu from './module/menu/menu';
import Header from './components/common/HeadView';
import Login from './module/login/login';

// oa路由映射
import OaRouteDom from './routeDom/oaRouteDom';
import UserRouteDom from './routeDom/userRouteDom';
import { oaMenus, userMenus } from './menu';

export const Context = React.createContext();

const { Content } = Layout;
const history = createHashHistory();

ReactDOM.render(
  <ConfigProvider locale={zh_CN}>
    <Router history={history}>
      <Layout className="h-100">
        <Switch>
          <Route path="/login" component={null} />
          <Route component={Menu} />
        </Switch>
        <Layout>
          <Switch>
            <Route path="/login" component={null} />
            <Route component={Header} />
          </Switch>
          <Content>
            <Switch>
              {/* 信息采集 */}
              <Route
                path="/collect/jurisdictionPersonMgt"
                component={JurisdictionPersonMgt}
              />
class RouteDom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      context: {
        role: '',
        roleMenuList: [],
        setContext: this.setContext,
      },
    };
  }

              <Route path="/login" component={Login} />
  componentDidMount() {
    let pathname = history.location.pathname;
    console.log(history, pathname);
    let menusListByRole = window.localStorage.getItem('menusListByRole')
      ? JSON.parse(window.localStorage.getItem('menusListByRole'))
      : [];

              <Route path="/" component={Index} />
              {/* 路由的页面重定向 */}
              <Redirect to="/" component={Index} />
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </Router>
  </ConfigProvider>,
  document.getElementById('root')
);
    // let menuMap = { oa: { menus: oaMenus }, user: { menus: userMenus } };

    let role = Object.keys(menusListByRole)
      .reduce((p, n) => {
        if (
          menusListByRole[n].menus
            .reduce((p, n) => {
              if (n.children) {
                return p.concat(n.children);
              } else {
                return p.concat(n);
              }
            }, [])
            .find(({ path }) => path == pathname)
        ) {
          return p.concat(n);
        } else {
          return p;
        }
      }, [])
      .join('');
    console.log('role', role);

    this.setState({
      context: {
        ...this.state.context,
        role,
      },
    });

    if (!role && menusListByRole.length == 0) {
      history.push('/login');
    }
    if (!role && window.localStorage.getItem('role')) {
      this.setState({
        context: {
          ...this.state.context,
          role: window.localStorage.getItem('role'),
        },
      });
    }
  }

  setContext = (data) => {
    console.log('data', data);
    this.setState({
      context: {
        ...this.state.context,
        ...data,
      }, //更新context
    });
    window.localStorage.setItem('role', data.role || '');
  };

  render() {
    let { context } = this.state;
    return (
      <ConfigProvider locale={zh_CN}>
        <Context.Provider value={context}>
          <Router history={history}>
            <Layout className="h-100">
              {/* 顶部-侧边布局-通栏 */}
              {/* 顶部 */}
              <Switch>
                <Route path="/login" component={null} />
                <Route
                  component={() => (
                    <Header setContext={this.setContext} props={this.props} />
                  )}
                />
              </Switch>
              <Layout>
                <Switch>
                  <Route path="/login" component={null} />
                  <Route component={Menu} />
                </Switch>
                <Layout>
                  <Content>
                    <Switch>
                      <Route
                        path="/login"
                        component={() => <Login setContext={this.setContext} />}
                      />
                      {context.role == 'oa' && <OaRouteDom />}
                      {context.role == 'user' && <UserRouteDom />}
                    </Switch>
                  </Content>
                </Layout>
              </Layout>
            </Layout>
          </Router>
        </Context.Provider>
      </ConfigProvider>
    );
  }
}

ReactDOM.render(<RouteDom></RouteDom>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.