kede-client/js/component/manageCenter/financialManage/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 "paiDan": //派单管理
        require.ensure([], () => {
          let Module = require("./distribute/paiDan").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "approvedOutsourcing": //外包列表
        require.ensure([], () => {
          let Module = require("./distribute/approvedOutsourcing").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "outsourcingPaiDan": //外包派单
        require.ensure([], () => {
          let Module = require("./distribute/outsourcingPaiDan").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "outOutsourcingList": //外省外包列表
        require.ensure([], () => {
          let Module = require("./distribute/outOutsourcingList").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "outInvoiceQuery": //省外开票查询
        require.ensure([], () => {
          let Module = require("./distribute/outInvoiceQuery").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "invoiceApplyList": //省内开票管理
        require.ensure([], () => {
          let Module = require("./distribute/invoiceApplyList").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "invoiceApplyListQuery": //省内开票查询
        require.ensure([], () => {
          let Module = require("./distribute/invoiceApplyListQuery").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "invoiceApplyListWai": //省外开票管理
        require.ensure([], () => {
          let Module = require("./distribute/invoiceApplyListWai").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "inSpecial": //省内特批
        require.ensure([], () => {
          let Module = require("./distribute/inSpecial").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "outSpecial": //省外特批
        require.ensure([], () => {
          let Module = require("./distribute/outSpecial").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "shouKuang": //收款管理
        require.ensure([], () => {
          let Module = require("./distribute/shouKuang").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "contractChangeCwzy": //订单变更审核列表
        require.ensure([], () => {
          let Module = require("./distribute/contractChangeCwzy").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "contractChangeCwzj": //订单变更审核列表
        require.ensure([], () => {
          let Module = require("./distribute/contractChangeCwzj").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "contractChangeCwjl": //订单变更审核列表
        require.ensure([], () => {
          let Module = require("./distribute/contractChangeCwjl").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "tuiDan": //退单管理
        require.ensure([], () => {
          let Module = require("./distribute/tuiDan").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "myWater": //我的订单流水
        require.ensure([], () => {
          let Module = require("./flowWater/myWater").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "departWater": //部门订单流水
        require.ensure([], () => {
          let Module = require("./flowWater/departWater").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "yxBonus": //营销员奖金
        require.ensure([], () => {
          let Module = require("./bonus/yxBonus").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "yxBonusAll": //营销员奖金查看
        require.ensure([], () => {
          let Module = require("./bonus/yxBonusAll").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "jsBonus": //技术员奖金
        require.ensure([], () => {
          let Module = require("./bonus/jsBonus").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "jsBonusAll": //技术员奖金查看
        require.ensure([], () => {
          let Module = require("./bonus/jsBonusAll").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "jsBonus": //技术员奖金
        require.ensure([], () => {
          let Module = require("./bonus/jsBonus").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "huiKuan": //回款
        require.ensure([], () => {
          let Module = require("./distribute/huiKuan").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "huiKuanLook": //回款查看
        require.ensure([], () => {
          let Module = require("./distribute/huiKuanLook").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "shouKuanAll": //全部收款列表
        require.ensure([], () => {
          let Module = require("./distribute/shouKuanAll").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      case "approvedOutsourcingAll": //全部外包收款列表
        require.ensure([], () => {
          let Module = require("./distribute/approvedOutsourcingAll").default;
          this.setState({
            component: <Module />,
          });
        });
        break;
      //催款统计新
      case "press":
        require.ensure([], () => {
          const Press = require("../order/orderNew/press").default;
          this.setState({
            component: <Press />,
          });
        });
        break;
      case "arrearsList":
        require.ensure([], () => {
          const ArrearsList = require("../order/orderNew/arrearsList").default;
          this.setState({
            component: <ArrearsList />,
          });
        });
        break;
      //成本付款申请列表(财务专员查看)
      case "costAuditList":
        require.ensure([], () => {
          const CostAuditList = require("../order/orderNew/costAuditList").default;
          this.setState({
            component: <CostAuditList />,
          });
        });
        break;
      //成本付款申请列表(财务经理与总监查看)
      case "glCostAuditList":
        require.ensure([], () => {
          const GlCostAuditList = require("../order/orderNew/glCostAuditList").default;
          this.setState({
            component: <GlCostAuditList />,
          });
        });
        break;
      default:
        require.ensure([], () => {
          let 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;