feat: col-menu

client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types'
 import { fetchInterfaceColList, fetchInterfaceCaseList } from '../../../../reducer/modules/interfaceCol'
 import { autobind } from 'core-decorators';
 import axios from 'axios';
-import { Menu, Input, Icon, Tag, Modal, Row, Col, message, Tooltip } from 'antd';
+import { Input, Icon, Tag, Modal, Row, Col, message, Tooltip, Tree } from 'antd';
 
-const SubMenu = Menu.SubMenu;
-const { TextArea } = Input;
+const TextArea = Input.TextArea;
+const TreeNode = Tree.TreeNode;
 
 @connect(
   state => {
@@ -77,29 +77,29 @@ export default class InterfaceColMenu extends Component {
             <Tag color="#108ee9" style={{ marginLeft: "15px" }} onClick={() => this.setState({addColModalVisible: true})} ><Icon type="plus" /></Tag>
           </Tooltip>
         </div>
-        <Menu
-          onClick={this.handleClick}
-          style={{ width: 240 }}
-          defaultSelectedKeys={['1']}
-          defaultOpenKeys={['sub0']}
-          mode="inline"
+        <Tree
+          defaultExpandedKeys={['0-0-0', '0-0-1']}
+          defaultSelectedKeys={['0-0-0', '0-0-1']}
+          onSelect={this.onSelect}
         >
           {
-            this.props.interfaceColList.map((col, index) => (
-              <SubMenu
-                key={`sub${index}`}
+            this.props.interfaceColList.map((col) => (
+              <TreeNode
+                key={col._id}
                 title={<span><Icon type="folder-open" /><span>{col.name}</span></span>}
-                onTitleClick={(key, e) => this.selectCol(key, e, col)}
               >
                 {
-                  col.caseList && col.caseList.map((interfaceCase, index) => (
-                    <Menu.Item key={index}>{interfaceCase.name}</Menu.Item>
+                  col.caseList && col.caseList.map((interfaceCase) => (
+                    <TreeNode
+                      key={interfaceCase._id}
+                      title={interfaceCase.casename}
+                    ></TreeNode>
                   ))
                 }
-              </SubMenu>
+              </TreeNode>
             ))
           }
-        </Menu>
+        </Tree>
         <Modal
           title="添加集合"
           visible={this.state.addColModalVisible}