jitao-client/js/component/account/index/leftMenu.jsx

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;