kede-client/js/component/manageCenter/order/content.jsx

import React, { Component } from 'react';
import '../content.less';
import './content.less';
import LeftTab from '../leftTab';
import { getMenu } from '../publicMenu.js'


class Content extends Component {
  constructor() {
    super();
    this.state = {
      loading: false,
      component: <div></div>,
    };
  }
  componentWillMount() {
    var ids = window.location.href.indexOf('rid=');
    var idk = window.location.href.substr(ids + 4);
    var rid = idk.split('#');
    let menu = getMenu(rid);
    let curry;
    if (menu[0].subMenus.length > 0) {
      curry = menu[0].subMenus[0].url.split('#');
    } else {
      curry = menu[0].url.split('#');
    };
    if (window.location.hash) {
      this.getKey(window.location.hash.substr(1));
    } else {
      this.getKey(curry[1]);
    };
  }
  getKey(key) {
    switch (key) {
      //科技服务订单
      case "myService":
        require.ensure([], () => {
          const MyService = require("./myOrder/servicesOrder/myService")
            .default;
          this.setState({
            component: <MyService />,
          });
        });
        break;
      //催款列表
      case "pressList":
        require.ensure([], () => {
          const PressList = require("./orderNew/pressList").default;
          this.setState({
            component: <PressList />,
          });
        });
        break;
      //开单与签单
      case "billing":
        require.ensure([], () => {
          const Billing = require("./orderNew/billing").default;
          this.setState({
            component: <Billing />,
          });
        });
        break;
        //催款记录
      case "pressMoney":
        require.ensure([], () => {
          const PressMoney = require("./pressMoney").default;
          this.setState({
            component: <PressMoney />,
          });
        });
        break;
      //订单审核新
      case "examine":
        require.ensure([], () => {
          const Examine = require("./orderNew/examine").default;
          this.setState({
            component: <Examine />,
          });
        });
        break;
      //外包审核列表
      case "outsourcingList":
        require.ensure([], () => {
          const OutsourcingList = require("./orderNew/outsourcingList").default;
          this.setState({
            component: <OutsourcingList />,
          });
        });
        break;
      //外包项目审核列表
      case "outsourcingPro":
        require.ensure([], () => {
          const OutsourcingPro = require("./orderNew/OutsourcingPro").default;
          this.setState({
            component: <OutsourcingPro />,
          });
        });
        break;
      //外包审核列表
      case "checkOutsourcing":
        require.ensure([], () => {
          const CheckOutsourcing = require("./orderNew/checkOutsourcing")
            .default;
          this.setState({
            component: <CheckOutsourcing />,
          });
        });
        break;
      //驳回管理新
      case "reject":
        require.ensure([], () => {
          const Reject = require("./orderNew/reject").default;
          this.setState({
            component: <Reject />,
          });
        });
        break;
      //退单管理新
      case "chargeback":
        require.ensure([], () => {
          const Chargeback = require("./orderNew/chargeback").default;
          this.setState({
            component: <Chargeback />,
          });
        });
        break;
      //退单管理新
      case "approveds":
        require.ensure([], () => {
          const Approveds = require("./orderNew/approveds").default;
          this.setState({
            component: <Approveds />,
          });
        });
        break;
      //合同变更审核
      case "contractChangeYxy":
        require.ensure([], () => {
          const ContractChangeYxy = require("./orderNew/contractChangeYxy")
            .default;
          this.setState({
            component: <ContractChangeYxy />,
          });
        });
        break;
      //合同变更审核
      case "contractChangeYxgly":
        require.ensure([], () => {
          const ContractChangeYxgly = require("./orderNew/contractChangeYxgly")
            .default;
          this.setState({
            component: <ContractChangeYxgly />,
          });
        });
        break;
      //合同变更审核
      case "contractChangeZc":
        require.ensure([], () => {
          const ContractChangeZc = require("./orderNew/contractChangeZc")
            .default;
          this.setState({
            component: <ContractChangeZc />,
          });
        });
        break;
      //合同变更审核
      case "contractChangeDsz":
        require.ensure([], () => {
          const ContractChangeDsz = require("./orderNew/contractChangeDsz")
            .default;
          this.setState({
            component: <ContractChangeDsz />,
          });
        });
        break;
      //订单查询新
      case "inquiry":
        require.ensure([], () => {
          const Inquiry = require("./orderNew/inquiry").default;
          this.setState({
            component: <Inquiry />,
          });
        });
        break;
      //催款统计新
      case "press":
        require.ensure([], () => {
          const Press = require("./orderNew/press").default;
          this.setState({
            component: <Press />,
          });
        });
        break;
      case "arrearsList":
        require.ensure([], () => {
          const ArrearsList = require("./orderNew/arrearsList").default;
          this.setState({
            component: <ArrearsList />,
          });
        });
        break;
      case "orderStatistics":
        require.ensure([], () => {
          const OrderStatistics = require("./orderStatistics/orderStatistics")
            .default;
          this.setState({
            component: <OrderStatistics />,
          });
        });
        break;
      case "serviceManage":
        require.ensure([], () => {
          const ServiceManage = require("./departmentOrder/servicesOrder/serviceManage")
            .default;
          this.setState({
            component: <ServiceManage />,
          });
        });
        break;
      case "public":
        require.ensure([], () => {
          const PublicOrder = require("./orderManagement/publicOrder/publicOrder")
            .default;
          this.setState({
            component: <PublicOrder />,
          });
        });
        break;
      case "approved":
        require.ensure([], () => {
          const ApproveOrder = require("./orderManagement/approveOrder/approveOrder")
            .default;
          this.setState({
            component: <ApproveOrder />,
          });
        });
        break;
      case "mySettlement":
        require.ensure([], () => {
          const MySettlement = require("./settlementOrder/mySettlement/mySettlement")
            .default;
          this.setState({
            component: <MySettlement />,
          });
        });
        break;
      case "settlementManage":
        require.ensure([], () => {
          const SettlementManage = require("./settlementOrder/settlementManage/settlementManagement")
            .default;
          this.setState({
            component: <SettlementManage />,
          });
        });
        break;
      case "myBill":
        require.ensure([], () => {
          const MyBill = require("./flowSettlement/myBill/myBill.jsx").default;
          this.setState({
            component: <MyBill />,
          });
        });
        break;
      case "billManage":
        require.ensure([], () => {
          const MyBill = require("./flowSettlement/billManage/myBill.jsx")
            .default;
          this.setState({
            component: <MyBill />,
          });
        });
        break;
      case "billQuery":
        require.ensure([], () => {
          const MyBill = require("./flowSettlement/billQuery/myBill.jsx")
            .default;
          this.setState({
            component: <MyBill />,
          });
        });
        break;
      case "billManagement":
        require.ensure([], () => {
          const MyBill = require("./flowSettlement/billManagement/myBill.jsx")
            .default;
          this.setState({
            component: <MyBill />,
          });
        });
        break;
      //奖金
      case "yxBouns":
        require.ensure([], () => {
          const MyBill = require("./bonus/yxBonus.jsx").default;
          this.setState({
            component: <MyBill />,
          });
        });
        break;
      //订单新增空白
      default:
        require.ensure([], () => {
          const Module = require("../module").default;
          this.setState({
            component: <Module />,
          });
        });
    };
    window.location.hash = key;
  }
  render() {
    return (
      <div className="manage-content">
        <LeftTab handlekey={this.getKey.bind(this)} />
        <div className="content-right">
          {this.state.component}
        </div>
      </div>
    )
  }
}

export default Content;