| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 | import React from 'react';import { Menu, Icon, message } from 'antd';import '@/account/leftTab.less';const SubMenu = Menu.SubMenu;import { Link } from 'react-router';import $ from 'jquery/src/ajax';import { menu } from '@/account/menu';import logo from 'img/acc-logo.png';const LeftTab = React.createClass({	getInitialState() {		return {			newMenu:[],			openKeys: [ 'sub1' ],			current: 'normal',			switch: false,			rootSubmenuKeys: [ 'sub1', 'sub2', 'sub3', 'sub4','sub5','sub6','sub7' ]		};	},	loadData() {		$.ajax({			method: 'get',			dataType: 'json',			url: globalConfig.context + '/api/user/homePage',			data: {}		}).done(			function(data) {				if (!data.error.length) {					this.setState({						type: data.data.type					});					this.jurisdiction(data.data)				} else {					message.warning(data.error[0].message);				}			}.bind(this)		);	},	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 ] : []			});		}	},	hashFun(){		if (window.location.hash) {			let current = window.location.hash.substr(2),				open = [];			if (!current.length) {				window.location.hash = 'normal';				this.setState({					openKeys: [ 'sub1' ],					current: 'normal'				});			} else {				menu.map((item) => {					if (item.children) {						item.children.map((atem) => {							if (current == atem.url) {								open.push(item.url);							}						});					}				});				this.setState({					openKeys: open,					current				});			}		} else {			window.location.hash = 'normal';			this.setState({				openKeys: [ 'sub1' ],				current: 'normal'			});		}	},	//菜单权限处理	jurisdiction(data){		let newMenu =menu;		if(data.type){   //企业用户			newMenu[1].children.splice(2,1);		}else{			 //个人用户			newMenu[1].children.splice(1,1);		};		this.setState({newMenu});	},	componentWillMount() {		this.loadData();		this.hashFun();	},	render() {		return (			<div>				<div className="acc-index">					{!this.state.switch && <img src={logo} alt="" />}					{!this.state.switch && (						<span>							<a href={globalConfig.context + '/user/account/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"				>					{this.state.newMenu.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,index) => <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;
 |