kede-officialWeb-currency-client/js/admin/index/leftMenu.jsx

import React from "react";
import { Menu, Icon, Layout } from "antd";
import "@/account/leftTab.less";
const SubMenu = Menu.SubMenu;
import { Link } from "react-router";
import { adminMenu } from "../menu";
import logo from "img/acc-logo.png";

const LeftTab = React.createClass({
  getInitialState() {
    return {
      openKeys: ["sub1"],
      current: "index",
      switch: false,
      rootSubmenuKeys: [
        "advertisementList",
        "proservlist",
        "buyList",
        "firmList",
        "talentsList",
        "activity"
      ]
    };
  },
  menuClick(e) {
    this.setState({
      current: e.key
    });
    window.location.hash = e.key;
  },
  iconFun() {
    let menuW = document.querySelector(".ant-layout-sider");
    if (this.state.switch) {
      menuW.style.width = "200px";
      menuW.style.flex = "0 0 200px";
    } else {
      menuW.style.width = "50px";
      menuW.style.flex = "0 0 50px";
    }
    this.setState({
      switch: !this.state.switch
    });
  },
  onOpenChange(openKeys) {
    const latestOpenKey = openKeys.find(
        key => this.state.openKeys.indexOf(key) === -1
    );
    if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : []
      });
    }
  },
  componentWillMount() {
    if (window.location.hash) {
      let current = window.location.hash.substr(2),
          open = [];
      if (!current.length) {
        window.location.hash = "index";
        this.setState({
          openKeys: ["advertisementList"],
          current: "advertisementList"
        });
      } else {
        adminMenu.map(item => {
          if (item.children) {
            item.children.map(atem => {
              if (current == atem.url) {
                open.push(item.url);
                return false;
              }
            });
          }
        });
        this.setState({
          openKeys: open,
          current
        });
      }
    } else {
      window.location.hash = "index";
      this.setState({
        openKeys: ["advertisementList"],
        current: "advertisementList"
      });
    }
  },
  render() {
    return (
        <div>
          <div className="acc-index">
            {!this.state.switch && <img src={logo} alt="" />}
            {!this.state.switch && (
                <span>
              <a href={globalConfig.context + "/admin/index.html"}>
                管理员中心
              </a>
            </span>
            )}
            {/* <Icon type={this.state.switch ? 'forward' : 'backward'} className="icon" onClick={this.iconFun} /> */}
          </div>
          <Menu
              onClick={this.menuClick}
              defaultOpenKeys={this.state.openKeys}
              selectedKeys={[this.state.current]}
              openKeys={this.state.openKeys}
              onOpenChange={this.onOpenChange}
              mode={this.state.switch ? "vertical" : "inline"}
              theme="dark"
              className="account-left"
          >
            {adminMenu.map(subMenu => {
              if (subMenu.children && subMenu.children.length) {
                return (
                    <SubMenu
                        key={subMenu.url}
                        title={
                          <span>
                      <Icon type={subMenu.icon} />
                            {!this.state.switch && <span>{subMenu.name}</span>}
                    </span>
                        }
                    >
                      {subMenu.children.map(menu => (
                          <Menu.Item key={menu.url}>{menu.name}</Menu.Item>
                      ))}
                    </SubMenu>
                );
              }
              return (
                  <Menu.Item key={subMenu.url}>
                    <Icon type={subMenu.icon} />
                    <span className="nav-text">{subMenu.name}</span>
                  </Menu.Item>
              );
            })}
          </Menu>
        </div>
    );
  }
});

export default LeftTab;