| 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;
 
 
  |