leftMenu.jsx 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  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 { menu } from '@/account/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: 'normal',
  17. switch: false,
  18. rootSubmenuKeys :['sub1', 'sub2','sub3','sub4']
  19. };
  20. },
  21. loadData() {
  22. $.ajax({
  23. method: 'post',
  24. dataType: 'json',
  25. url: globalConfig.context + '/api/admin/customer/left',
  26. data: {}
  27. }).done(
  28. function(data) {
  29. if (!data.data.error.length) {
  30. this.setState({
  31. state: data.data.aa
  32. });
  33. } else {
  34. message.warning(data.error[0].message);
  35. }
  36. }.bind(this)
  37. );
  38. },
  39. menuClick(e) {
  40. this.setState({
  41. current: e.key,
  42. });
  43. window.location.hash = e.key;
  44. },
  45. iconFun() {
  46. let menu = document.querySelector('.ant-layout-sider');
  47. if (this.state.switch) {
  48. menu.style.width = '200px';
  49. menu.style.flex = '0 0 200px';
  50. } else {
  51. menu.style.width = '50px';
  52. menu.style.flex = '0 0 50px';
  53. }
  54. this.setState({
  55. switch: !this.state.switch
  56. });
  57. },
  58. onOpenChange(openKeys){
  59. const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
  60. if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
  61. this.setState({ openKeys });
  62. } else {
  63. this.setState({
  64. openKeys: latestOpenKey ? [latestOpenKey] : [],
  65. });
  66. }
  67. },
  68. componentWillMount() {
  69. this.loadData();
  70. if (window.location.hash) {
  71. let current = window.location.hash.substr(2),
  72. open=[];
  73. if (!current.length) {
  74. window.location.hash = 'normal';
  75. this.setState({
  76. openKeys:['sub1'],
  77. current:"normal"
  78. })
  79. }else{
  80. menu.map(item=>{
  81. if(item.children){
  82. item.children.map(atem=>{
  83. if(current==atem.url){
  84. open.push(item.url)
  85. return false;
  86. }
  87. })
  88. }
  89. })
  90. this.setState({
  91. openKeys:open,
  92. current
  93. });
  94. }
  95. }else{
  96. window.location.hash = 'normal';
  97. this.setState({
  98. openKeys:['sub1'],
  99. current:"normal"
  100. })
  101. }
  102. },
  103. render() {
  104. return (
  105. <div>
  106. <div className="acc-index">
  107. {!this.state.switch && <img src={logo} alt="" />}
  108. {!this.state.switch && (
  109. <span>
  110. <a href={globalConfig.context + '/user/account/index.html'}>会员中心管理</a>
  111. </span>
  112. )}
  113. <Icon type={this.state.switch ? 'forward' : 'backward'} className="icon" onClick={this.iconFun} />
  114. </div>
  115. <Menu
  116. onClick={this.menuClick}
  117. defaultOpenKeys={this.state.openKeys}
  118. selectedKeys={[ this.state.current ]}
  119. openKeys={this.state.openKeys}
  120. onOpenChange={this.onOpenChange}
  121. mode={this.state.switch ? 'vertical' : 'inline'}
  122. theme="light"
  123. className="account-left"
  124. >
  125. {menu.map((subMenu) => {
  126. if (subMenu.children && subMenu.children.length) {
  127. return (
  128. <SubMenu
  129. key={subMenu.url}
  130. title={
  131. <span>
  132. <Icon type={subMenu.icon} />
  133. {!this.state.switch && <span>{subMenu.name}</span>}
  134. </span>
  135. }
  136. >
  137. {subMenu.children.map((menu) => <Menu.Item key={menu.url}>{menu.name}</Menu.Item>)}
  138. </SubMenu>
  139. );
  140. }
  141. return (
  142. <Menu.Item key={subMenu.url}>
  143. <Link to={`/${subMenu.url}`}>
  144. <Icon type={subMenu.icon} />
  145. <span className="nav-text">{subMenu.name}</span>
  146. </Link>
  147. </Menu.Item>
  148. );
  149. })}
  150. </Menu>
  151. </div>
  152. );
  153. }
  154. });
  155. export default LeftTab;