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 :['sub1', 'sub2','sub3','sub4','sub5'] }; }, 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:['sub1'], current:'index' }) }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:['sub1'], current:'index' }) } }, 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="light" 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}> <Link to={`/${subMenu.url}`}> <Icon type={subMenu.icon} /> <span className="nav-text">{subMenu.name}</span> </Link> </Menu.Item> ); })} </Menu> </div> ); } }); export default LeftTab;