leftMenu.jsx 4.4 KB

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