feat: col-menu

client/containers/Project/Interface/Interface.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Row, Col, Tabs } from 'antd';
-import { Route } from 'react-router-dom';
+import { Route, Redirect } from 'react-router-dom';
 
 import './interface.scss'
 
@@ -43,20 +43,14 @@ class Interface extends Component {
     console.log(this.props)
   }
 
-  // componentWillReceiveProps(nextProps) {
-  //
-  // }
-
   onChange = (action) => {
-    // this.setState({
-    //   curkey: key
-    // })
     let params = this.props.match.params;
+
     this.props.history.push('/project/'+params.id + '/interface/' + action)
   }
 
   render() {
-    const action = this.props.match.params.action;
+    const { action, id } = this.props.match.params;
     return <div className="web-content g-row" style={{ marginBottom: "15px" }}>
       <Row gutter={16} >
         <Col span={6}>

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

@@ -1,10 +1,58 @@
 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 InterfaceColContent 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 = +actionId || +currColId || result.payload.data.data[0]._id;
+    currCaseId = 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, currCaseId})
+  }
+
   render() {
     return <h1>hello colContent</h1>
   }

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

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router'
 import PropTypes from 'prop-types'
-import { fetchInterfaceColList, fetchInterfaceCaseList } from '../../../../reducer/modules/interfaceCol'
+import { fetchInterfaceColList, fetchInterfaceCaseList, setColData } from '../../../../reducer/modules/interfaceCol'
 import { autobind } from 'core-decorators';
 import axios from 'axios';
 import { Input, Icon, Tag, Modal, Row, Col, message, Tooltip, Tree } from 'antd';
@@ -15,12 +15,16 @@ import './InterfaceColMenu.scss'
 @connect(
   state => {
     return {
-      interfaceColList: state.interfaceCol.interfaceColList
+      interfaceColList: state.interfaceCol.interfaceColList,
+      currColId: state.interfaceCol.currColId,
+      currCaseId: state.interfaceCol.currCaseId,
+      isShowCol: state.interfaceCol.isShowCol
     }
   },
   {
     fetchInterfaceColList,
-    fetchInterfaceCaseList
+    fetchInterfaceCaseList,
+    setColData
   }
 )
 @withRouter
@@ -31,7 +35,11 @@ export default class InterfaceColMenu extends Component {
     interfaceColList: PropTypes.array,
     fetchInterfaceColList: PropTypes.func,
     fetchInterfaceCaseList: PropTypes.func,
-    history: PropTypes.object
+    setColData: PropTypes.func,
+    history: PropTypes.object,
+    currColId: PropTypes.number,
+    currCaseId: PropTypes.number,
+    isShowCol: PropTypes.bool
   }
 
   state = {
@@ -44,13 +52,13 @@ export default class InterfaceColMenu extends Component {
     super(props)
   }
 
-  async componentWillMount() {
-    const result = await this.props.fetchInterfaceColList(this.props.match.params.id)
-    let params = this.props.match.params;
-    if(!params.actionId){
-      this.props.history.push('/project/'+params.id + '/interface/col/' + result.payload.data.data[0]._id)
-    }
-  }
+  // async componentWillMount() {
+  //   const result = await this.props.fetchInterfaceColList(this.props.match.params.id)
+  //   let params = this.props.match.params;
+  //   if(!params.actionId){
+  //     this.props.history.push('/project/'+params.id + '/interface/col/' + result.payload.data.data[0]._id)
+  //   }
+  // }
 
   // async componentWillReceiveProps(nextProps) {
   //   const result = await nextProps.fetchInterfaceColList(nextProps.match.params.id)
@@ -77,13 +85,24 @@ export default class InterfaceColMenu extends Component {
   }
 
   @autobind
-  async selectCol(key, e, col) {
-    if (!col.interfaceCaseList) {
-      await this.props.fetchInterfaceCaseList(col._id)
+  async onSelect(key) {
+    const type = key.split('_')[0];
+    const id = key.split('_')[1];
+    if (type === 'col') {
+      this.props.setColData({
+        isShowCol: true,
+        currColId: id
+      })
+    } else {
+      this.props.setColData({
+        isShowCol: false,
+        currCaseId: id
+      })
     }
   }
 
   render() {
+    const { currColId, currCaseId, isShowCol } = this.props;
     return (
       <div>
         <div className="interface-filter">
@@ -94,21 +113,21 @@ export default class InterfaceColMenu extends Component {
         </div>
         <Tree
           className="col-list-tree"
-          defaultExpandedKeys={['0-0-0', '0-0-1']}
-          defaultSelectedKeys={['0-0-0', '0-0-1']}
+          defaultExpandedKeys={[''+currColId, ''+currCaseId]}
+          defaultSelectedKeys={[isShowCol ? ''+currColId : ''+currCaseId]}
           onSelect={this.onSelect}
         >
           {
             this.props.interfaceColList.map((col) => (
               <TreeNode
-                key={col._id}
+                key={'col_' + col._id}
                 title={<span><Icon type="folder-open" /><span>{col.name}</span></span>}
               >
                 {
                   col.caseList && col.caseList.map((interfaceCase) => (
                     <TreeNode
                       style={{width: '100%'}}
-                      key={interfaceCase._id}
+                      key={'case_' + interfaceCase._id}
                       title={interfaceCase.casename}
                     ></TreeNode>
                   ))

client/reducer/modules/interfaceCol.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 // Actions
 const FETCH_INTERFACE_COL_LIST = 'yapi/interfaceCol/FETCH_INTERFACE_COL_LIST';
 const FETCH_INTERFACE_CASE_LIST = 'yapi/interfaceCol/FETCH_INTERFACE_CASE_LIST';
+const SET_COL_DATA = 'yapi/interfaceCol/SET_COL_DATA';
 
 // Reducer
 const initialState = {
@@ -13,13 +14,13 @@ const initialState = {
     desc: '',
     add_time: 0,
     up_time: 0,
-    interfaceCaseList: [
+    caseList: [
       {}
     ]
   }],
   isShowCol: true,
-  currInterfaceColId: 0,
-  currInterfaceCaseId: 0
+  currColId: 0,
+  currCaseId: 0
 }
 
 export default (state = initialState, action) => {
@@ -30,15 +31,21 @@ export default (state = initialState, action) => {
         interfaceColList: action.payload.data.data
       }
     case FETCH_INTERFACE_CASE_LIST: {
-      const interfaceCaseList = state.interfaceColList.map(col => {
-        if (col._id === state.currInterfaceColId) {
-          return col.interfaceCaseList = action.payload.data.data;
+      const caseList = state.interfaceColList.map(col => {
+        if (col._id === state.currColId) {
+          return col.caseList = action.payload.data.data;
         }
         return col;
       })
       return {
         ...state,
-        interfaceCaseList
+        caseList
+      }
+    }
+    case SET_COL_DATA: {
+      return {
+        ...state,
+        ...action.payload.data
       }
     }
     default:
@@ -61,3 +68,10 @@ export function fetchInterfaceCaseList(colId){
     payload: axios.get('/api/col/case_list?col_id=' + colId)
   }
 }
+
+export function setColData(data){
+  return {
+    type: SET_COL_DATA,
+    payload: data
+  }
+}