feat: col menu

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

@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types'
+import { withRouter } from 'react-router'
+import { fetchInterfaceColList, fetchInterfaceCaseList, setColData } from '../../../../reducer/modules/interfaceCol'
+
+@connect(
+  state => {
+    return {
+      interfaceColList: state.interfaceCol.interfaceColList,
+      currColId: state.interfaceCol.currColId,
+      currCaseId: state.interfaceCol.currCaseId,
+      isShowCol: state.interfaceCol.isShowCol
+    }
+  },
+  {
+    fetchInterfaceColList,
+    fetchInterfaceCaseList,
+    setColData
+  }
+)
+@withRouter
+export default class InterfaceCaseContent extends Component {
+
+  static propTypes = {
+    match: PropTypes.object,
+    interfaceColList: PropTypes.array,
+    fetchInterfaceColList: PropTypes.func,
+    fetchInterfaceCaseList: PropTypes.func,
+    setColData: PropTypes.func,
+    history: PropTypes.object,
+    currColId: PropTypes.number,
+    currCaseId: PropTypes.number,
+    isShowCol: PropTypes.bool
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  async componentWillMount() {
+    const result = await this.props.fetchInterfaceColList(this.props.match.params.id)
+    let { currColId, currCaseId, isShowCol } = this.props;
+    const params = this.props.match.params;
+    const { actionId } = params;
+    currColId = +currColId || result.payload.data.data[0]._id;
+    currCaseId = +actionId || +currCaseId || result.payload.data.data[0].caseList[0]._id;
+    if (isShowCol) {
+      this.props.history.push('/project/' + params.id + '/interface/col/' + currColId)
+    } else {
+      this.props.history.push('/project/' + params.id + '/interface/case/' + currCaseId)
+    }
+    this.props.setColData({currColId: +currColId, currCaseId: +currCaseId})
+  }
+
+  render() {
+    return <h1>hello caseContent</h1>
+  }
+}

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

@@ -50,7 +50,7 @@ export default class InterfaceColContent extends Component {
     } else {
       this.props.history.push('/project/' + params.id + '/interface/case/' + currCaseId)
     }
-    this.props.setColData({currColId, currCaseId})
+    this.props.setColData({currColId: +currColId, currCaseId: +currCaseId})
   }
 
   render() {

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

@@ -45,7 +45,8 @@ export default class InterfaceColMenu extends Component {
   state = {
     addColModalVisible: false,
     addColName: '',
-    addColDesc: ''
+    addColDesc: '',
+    expandedKeys: []
   }
 
   constructor(props) {
@@ -84,25 +85,25 @@ export default class InterfaceColMenu extends Component {
     }
   }
 
-  @autobind
-  async onSelect(key) {
-    const type = key.split('_')[0];
-    const id = key.split('_')[1];
+  onSelect = (keys) => {
+    const type = keys[0].split('_')[0];
+    const id = keys[0].split('_')[1];
     if (type === 'col') {
       this.props.setColData({
         isShowCol: true,
-        currColId: id
+        currColId: +id
       })
     } else {
       this.props.setColData({
         isShowCol: false,
-        currCaseId: id
+        currCaseId: +id
       })
     }
   }
 
   render() {
     const { currColId, currCaseId, isShowCol } = this.props;
+
     return (
       <div>
         <div className="interface-filter">
@@ -113,9 +114,11 @@ export default class InterfaceColMenu extends Component {
         </div>
         <Tree
           className="col-list-tree"
-          defaultExpandedKeys={[''+currColId, ''+currCaseId]}
-          defaultSelectedKeys={[isShowCol ? ''+currColId : ''+currCaseId]}
+          expandedKeys={this.state.expandedKeys}
+          selectedKeys={[isShowCol ? 'col_'+currColId : 'case_'+currCaseId]}
           onSelect={this.onSelect}
+          autoExpandParent
+          onExpand={keys => this.setState({expandedKeys: keys})}
         >
           {
             this.props.interfaceColList.map((col) => (

client/reducer/modules/interfaceCol.js

@@ -45,7 +45,7 @@ export default (state = initialState, action) => {
     case SET_COL_DATA: {
       return {
         ...state,
-        ...action.payload.data
+        ...action.payload
       }
     }
     default: