leftMenu.jsx 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import React from 'react';
  2. import { Menu, Icon, message } from 'antd';
  3. import '@/account/leftTab.less';
  4. const SubMenu = Menu.SubMenu;
  5. import { Link } from 'react-router';
  6. import $ from 'jquery/src/ajax';
  7. import { menu, menu1 } from '@/account/menu';
  8. import logo from 'img/acc-logo.png';
  9. const LeftTab = React.createClass({
  10. getInitialState() {
  11. return {
  12. newMenu: [],
  13. openKeys: ['sub1'],
  14. current: 'normal',
  15. switch: false,
  16. rootSubmenuKeys: ['sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7']
  17. };
  18. },
  19. loadData() {
  20. $.ajax({
  21. method: 'get',
  22. dataType: 'json',
  23. url: globalConfig.context + '/api/user/homePage',
  24. data: {}
  25. }).done(
  26. function (data) {
  27. if (!data.error.length) {
  28. this.setState({
  29. type: data.data.type
  30. });
  31. this.jurisdiction(data.data)
  32. } else {
  33. message.warning(data.error[0].message);
  34. }
  35. }.bind(this)
  36. );
  37. },
  38. menuClick(e) {
  39. this.setState({
  40. current: e.key
  41. });
  42. window.location.hash = e.key;
  43. },
  44. iconFun() {
  45. let menuW = document.querySelector('.ant-layout-sider');
  46. if (this.state.switch) {
  47. menuW.style.width = '200px';
  48. menuW.style.flex = '0 0 200px';
  49. } else {
  50. menuW.style.width = '50px';
  51. menuW.style.flex = '0 0 50px';
  52. }
  53. this.setState({
  54. switch: !this.state.switch
  55. });
  56. },
  57. onOpenChange(openKeys) {
  58. const latestOpenKey = openKeys.find((key) => this.state.openKeys.indexOf(key) === -1);
  59. if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
  60. this.setState({ openKeys });
  61. } else {
  62. this.setState({
  63. openKeys: latestOpenKey ? [latestOpenKey] : []
  64. });
  65. }
  66. },
  67. hashFun() {
  68. if (window.location.hash) {
  69. let current = window.location.hash.substr(2),
  70. open = [];
  71. if (!current.length) {
  72. window.location.hash = 'normal';
  73. this.setState({
  74. openKeys: ['sub1'],
  75. current: 'normal'
  76. });
  77. } else {
  78. menu.map((item) => {
  79. if (item.children) {
  80. item.children.map((atem) => {
  81. if (current == atem.url) {
  82. open.push(item.url);
  83. }
  84. });
  85. }
  86. });
  87. this.setState({
  88. openKeys: open,
  89. current
  90. });
  91. }
  92. } else {
  93. window.location.hash = 'normal';
  94. this.setState({
  95. openKeys: ['sub1'],
  96. current: 'normal'
  97. });
  98. }
  99. },
  100. //菜单权限处理
  101. jurisdiction(data) {
  102. // lvl === 9 的时候使用menu1 (目的,用于只查看我的科技评估临时判断)
  103. if (userData.lvl === 9) {
  104. this.setState({ newMenu: menu1 });
  105. } else {
  106. let newMenu = menu;
  107. if (data.type) { //企业用户
  108. newMenu[1].children.splice(2, 1);
  109. } else { //个人用户
  110. newMenu[1].children.splice(1, 1);
  111. };
  112. this.setState({ newMenu });
  113. }
  114. },
  115. componentWillMount() {
  116. this.loadData();
  117. this.hashFun();
  118. },
  119. render() {
  120. return (
  121. <div>
  122. <div className="acc-index">
  123. {!this.state.switch && <img src={logo} alt="" />}
  124. {!this.state.switch && (
  125. <span>
  126. <a href={globalConfig.context + '/user/account/index.html'}>会员中心管理</a>
  127. </span>
  128. )}
  129. <Icon type={this.state.switch ? 'forward' : 'backward'} className="icon" onClick={this.iconFun} />
  130. </div>
  131. <Menu
  132. onClick={this.menuClick}
  133. defaultOpenKeys={this.state.openKeys}
  134. selectedKeys={[this.state.current]}
  135. openKeys={this.state.openKeys}
  136. onOpenChange={this.onOpenChange}
  137. mode={this.state.switch ? 'vertical' : 'inline'}
  138. theme="light"
  139. className="account-left"
  140. >
  141. {this.state.newMenu.map((subMenu) => {
  142. if (subMenu.children && subMenu.children.length) {
  143. return (
  144. <SubMenu
  145. key={subMenu.url}
  146. title={
  147. <span>
  148. <Icon type={subMenu.icon} />
  149. {!this.state.switch && <span>{subMenu.name}</span>}
  150. </span>
  151. }
  152. >
  153. {subMenu.children.map((menu, index) => <Menu.Item key={menu.url}>{menu.name}</Menu.Item>)}
  154. </SubMenu>
  155. );
  156. }
  157. return (
  158. <Menu.Item key={subMenu.url}>
  159. <Link to={`/${subMenu.url}`}>
  160. <Icon type={subMenu.icon} />
  161. <span className="nav-text">{subMenu.name}</span>
  162. </Link>
  163. </Menu.Item>
  164. );
  165. })}
  166. </Menu>
  167. </div>
  168. );
  169. }
  170. });
  171. export default LeftTab;