leftMenu.jsx 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. import React from 'react';
  2. import { Menu, Icon, Layout } from 'antd';
  3. import '@/account/leftTab.less';
  4. const SubMenu = Menu.SubMenu;
  5. const MenuItemGroup = Menu.ItemGroup;
  6. import { Link } from 'react-router';
  7. import ajax from 'jquery/src/ajax/xhr.js';
  8. import $ from 'jquery/src/ajax';
  9. import { adminMenu } from '../menu';
  10. import logo from 'img/acc-logo.png';
  11. const { Sider } = Layout;
  12. const LeftTab = React.createClass({
  13. getInitialState() {
  14. return {
  15. openKeys: [ 'sub1' ],
  16. current: 'library',
  17. switch: false,
  18. rootSubmenuKeys :['sub1', 'sub2','sub3','sub4']
  19. };
  20. },
  21. menuClick(e) {
  22. this.setState({
  23. current: e.key,
  24. });
  25. window.location.hash = e.key;
  26. },
  27. iconFun() {
  28. let menuW = document.querySelector('.ant-layout-sider');
  29. if (this.state.switch) {
  30. menuW.style.width = '200px';
  31. menuW.style.flex = '0 0 200px';
  32. } else {
  33. menuW.style.width = '50px';
  34. menuW.style.flex = '0 0 50px';
  35. }
  36. this.setState({
  37. switch: !this.state.switch
  38. });
  39. },
  40. onOpenChange(openKeys){
  41. const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
  42. if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
  43. this.setState({ openKeys });
  44. } else {
  45. this.setState({
  46. openKeys: latestOpenKey ? [latestOpenKey] : [],
  47. });
  48. }
  49. },
  50. componentWillMount() {
  51. if (window.location.hash) {
  52. let current = window.location.hash.substr(2),
  53. open=[];
  54. if (!current.length) {
  55. window.location.hash = 'library';
  56. this.setState({
  57. openKeys:['sub1'],
  58. current:'library'
  59. })
  60. }else{
  61. adminMenu.map(item=>{
  62. if(item.children){
  63. item.children.map(atem=>{
  64. if(current==atem.url){
  65. open.push(item.url)
  66. return false;
  67. }
  68. })
  69. }
  70. })
  71. this.setState({
  72. openKeys:open,
  73. current
  74. });
  75. }
  76. }else{
  77. window.location.hash = 'library';
  78. this.setState({
  79. openKeys:['sub1'],
  80. current:'library'
  81. })
  82. }
  83. },
  84. render() {
  85. return (
  86. <div>
  87. <div className="acc-index">
  88. {!this.state.switch && <img src={logo} alt="" />}
  89. {!this.state.switch && (
  90. <span>
  91. <a href={globalConfig.context + '/user/account/index.html'}>个人中心管理</a>
  92. </span>
  93. )}
  94. <Icon type={this.state.switch ? 'forward' : 'backward'} className="icon" onClick={this.iconFun} />
  95. </div>
  96. <Menu
  97. onClick={this.menuClick}
  98. defaultOpenKeys={this.state.openKeys}
  99. selectedKeys={[ this.state.current ]}
  100. openKeys={this.state.openKeys}
  101. onOpenChange={this.onOpenChange}
  102. mode={this.state.switch ? 'vertical' : 'inline'}
  103. theme="light"
  104. className="account-left"
  105. >
  106. {adminMenu.map((subMenu) => {
  107. if (subMenu.children && subMenu.children.length) {
  108. return (
  109. <SubMenu
  110. key={subMenu.url}
  111. title={
  112. <span>
  113. <Icon type={subMenu.icon} />
  114. {!this.state.switch && <span>{subMenu.name}</span>}
  115. </span>
  116. }
  117. >
  118. {subMenu.children.map((menu) => <Menu.Item key={menu.url}>{menu.name}</Menu.Item>)}
  119. </SubMenu>
  120. );
  121. }
  122. return (
  123. <Menu.Item key={subMenu.url}>
  124. <Link to={`/${subMenu.url}`}>
  125. <Icon type={subMenu.icon} />
  126. <span className="nav-text">{subMenu.name}</span>
  127. </Link>
  128. </Menu.Item>
  129. );
  130. })}
  131. </Menu>
  132. </div>
  133. );
  134. }
  135. });
  136. export default LeftTab;