/*菜单组件，所有的方法都要bind this*/

import React,{Component} from 'react';

import {render} from 'react-dom';

import {Link,browserHistory} from 'react-router';

import Menu from 'antd/lib/menu';

import Icon from 'antd/lib/icon';

const SubMenu = Menu.SubMenu;

const MenuItemGroup = Menu.ItemGroup;

import {user_search_path,

        application_search_path,navigation_search,advertising_search} from 'config';

export default class Sidebar extends Component{

    constructor(props){

        super(props);

        this.state = {

            current: '1',

            openKeys: []

        }

    }

    handleClick(e) {

       /*这里要做判断，判断是点击哪个菜单，就跳转到相应的菜单内容，使用router进行跳转*/

        if(e.key == "1"){

            browserHistory.push(user_search_path);

        }else if(e.key == '2'){

            browserHistory.push(application_search_path);

        }else if(e.key == '3'){

            browserHistory.push(navigation_search);

        }else if(e.key == '4'){

            browserHistory.push(advertising_search);

        }

        this.setState({

            current: e.key,

            openKeys: e.keyPath.slice(1)

        });

    }

    onToggle(info) {

        console.log('onToggle', info);

        this.setState({

            openKeys: info.open ? info.keyPath : info.keyPath.slice(1)

        });

    }

    getKeyPath(key) {

        const map = {

            sub1: ['sub1'],

            sub2: ['sub2'],

            sub3: ['sub2', 'sub3'],

            sub4: ['sub4'],

        };

        return map[key] || [];

    }

    render(){

        return(

            <div>

                <Menu

                    mode="inline"

                    openKeys={this.state.openKeys}

                    selectedKeys={[this.state.current]}

                    style={{ width: 230 }}

                    onOpen = {this.onToggle.bind(this)}   /*打开菜单*/

                    onClose = {this.onToggle.bind(this)}  /*关闭菜单*/

                    onClick={this.handleClick.bind(this)} /*触发菜单*/

                    >

                    <SubMenu key="sub1" title={<span><Icon type="user" /><span>用户服务</span></span>}>

                        <Menu.Item key="1">设置权限</Menu.Item>

                    </SubMenu>

                    <SubMenu key="sub2" title={<span><Icon type="setting" /><span>配置服务</span></span>}>

                        <Menu.Item key="2">app版本查询</Menu.Item>

                        <SubMenu key="sub3" title="app配置版本查询">

                            <Menu.Item key="3">导航配置查询</Menu.Item>

                            <Menu.Item key="4">广告配置查询</Menu.Item>

                        </SubMenu>

                        <Menu.Item key="5">app changeLog</Menu.Item>

                    </SubMenu>

                    <SubMenu key="sub4" title={<span><Icon type="mail" /><span>短信服务</span></span>}>

                    </SubMenu>

                </Menu>

            </div>

        );

    }

}

import React,{Component} from 'react';

import {render} from 'react-dom';

import Icon from 'antd/lib/icon';

import jiChu from '../../../build/images/jichu.png';

import HeaderRight from '../login/HeaderRight.js';

import SearchUser from '../login/SearchUser.js';

import Sidebar from '../sidebar/Sidebar.js';

import style from '../../../build/css/login.css';

export default class Parent extends Component{

    constructor(props){

        super(props);

    }

    render(){

        const headerUserPanel = (<HeaderRight {...this.props} />);

        const search = (<SearchUser {...this.props} />);

        const sidebars = (<Sidebar {...this.props} />);   /*菜单组件*/

        return(

            <div className="main-view">

                <div className="main-sidebar">

                    <div className="sidebar-wrapper">

                        <div className="sidebar">

                            <div className="logo">

                                <img src={jiChu} className="logoPic" />

                            </div>

                            <div className="sidebar-nav">

                                {sidebars}

                            </div>

                            <div className="sidebar-footer">

                                <span><Icon type="double-left" /><span>收缩菜单</span></span>

                            </div>

                        </div>

                    </div>

                </div>

                <div className="main-wrapper">

                    <div className="main-nav-bar">

                        <div className="navbar">

                            {headerUserPanel}

                        </div>

                        <div className="main-body">

                            <div className="main-content">

                                {this.props.children}             /*菜单组件对应内容*/

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        );

    }

}

import React from 'react';

import {render} from 'react-dom';

import { Router , Redirect, Route , IndexRoute , browserHistory } from 'react-router';

import { Provider } from 'react-redux'

const store = configureStore();

render((

    <Provider store={store}>

        <Router history={browserHistory}>

            <Route path={user_service_path} component={Parent}>

            <Route path={user_sidebar_bath} component={Sidebar}></Route>

            <Route path={application_search_path} component={AdvertisementTablePannelContainer}></Route>

    </Provider>

), document.getElementById('root'));