| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 | import React from 'react';import { Menu, Icon, Layout } from 'antd';import '@/account/leftTab.less';const SubMenu = Menu.SubMenu;const MenuItemGroup = Menu.ItemGroup;import { Link } from 'react-router';import ajax from 'jquery/src/ajax/xhr.js';import $ from 'jquery/src/ajax';import { adminMenu } from '../menu';import logo from 'img/acc-logo.png';const { Sider } = Layout;const LeftTab = React.createClass({	getInitialState() {		return {			openKeys: [ 'sub1' ],			current: 'index',			switch: false,			rootSubmenuKeys :['sub1', 'sub2','sub3','sub4']		};	},	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;
 |