feat: componetWillMount

client/containers/Project/Interface/Interface.js

@@ -10,6 +10,7 @@ import InterfaceContent from './InterfaceList/InterfaceContent.js'
 
 import InterfaceColMenu from './InterfaceCol/InterfaceColMenu.js'
 import InterfaceColContent from './InterfaceCol/InterfaceColContent.js'
+import InterfaceCaseContent from './InterfaceCol/InterfaceCaseContent.js'
 
 const InterfaceRoute = (props) => {
   let C;
@@ -17,6 +18,8 @@ const InterfaceRoute = (props) => {
     C = InterfaceContent;
   } else if (props.match.params.action === 'col') {
     C = InterfaceColContent;
+  } else if (props.match.params.action === 'case') {
+    C = InterfaceCaseContent;
   }
   return <C />
 }
@@ -28,7 +31,8 @@ InterfaceRoute.propTypes = {
 
 class Interface extends Component {
   static propTypes = {
-    match: PropTypes.object
+    match: PropTypes.object,
+    history: PropTypes.object
   }
 
   constructor(props) {
@@ -36,20 +40,28 @@ class Interface extends Component {
     this.state = {
       curkey: this.props.match.params.action
     }
+    console.log(this.props)
   }
 
-  onChange = (key) => {
-    this.setState({
-      curkey: key
-    })
+  // 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;
     return <div className="web-content g-row" style={{ marginBottom: "15px" }}>
       <Row gutter={16} >
         <Col span={6}>
           <div className="left-menu">
-            <Tabs type="card" activeKey={this.state.curkey} onChange={this.onChange}>
+            <Tabs type="card" activeKey={action} onChange={this.onChange}>
               <Tabs.TabPane tab="接口列表" key="api">
                 <InterfaceMenu projectId={this.props.match.params.id} />
               </Tabs.TabPane>
@@ -73,4 +85,4 @@ class Interface extends Component {
 
 
 
-export default Interface
+export default Interface

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

@@ -10,6 +10,8 @@ import { Input, Icon, Tag, Modal, Row, Col, message, Tooltip, Tree } from 'antd'
 const TextArea = Input.TextArea;
 const TreeNode = Tree.TreeNode;
 
+import './InterfaceColMenu.scss'
+
 @connect(
   state => {
     return {
@@ -28,7 +30,8 @@ export default class InterfaceColMenu extends Component {
     match: PropTypes.object,
     interfaceColList: PropTypes.array,
     fetchInterfaceColList: PropTypes.func,
-    fetchInterfaceCaseList: PropTypes.func
+    fetchInterfaceCaseList: PropTypes.func,
+    history: PropTypes.object
   }
 
   state = {
@@ -41,10 +44,22 @@ export default class InterfaceColMenu extends Component {
     super(props)
   }
 
-  componentWillMount() {
-    this.props.fetchInterfaceColList(this.props.match.params.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)
+  //   let params = nextProps.match.params;
+  //   if(!params.actionId){
+  //     nextProps.history.replace('/project/'+params.id + '/interface/col/' + result.payload.data.data[0]._id)
+  //   }
+  // }
+
   @autobind
   async addCol() {
     const { addColName: name, addColDesc: desc } = this.state;
@@ -78,6 +93,7 @@ export default class InterfaceColMenu extends Component {
           </Tooltip>
         </div>
         <Tree
+          className="col-list-tree"
           defaultExpandedKeys={['0-0-0', '0-0-1']}
           defaultSelectedKeys={['0-0-0', '0-0-1']}
           onSelect={this.onSelect}
@@ -91,6 +107,7 @@ export default class InterfaceColMenu extends Component {
                 {
                   col.caseList && col.caseList.map((interfaceCase) => (
                     <TreeNode
+                      style={{width: '100%'}}
                       key={interfaceCase._id}
                       title={interfaceCase.casename}
                     ></TreeNode>

client/containers/Project/Interface/InterfaceList/InterfaceContent.js

@@ -19,7 +19,7 @@ const TabPane = Tabs.TabPane;
     }
   },
   {
-    fetchInterfaceData    
+    fetchInterfaceData
   }
 )
 class Content extends Component {
@@ -37,6 +37,10 @@ class Content extends Component {
     this._actionId = 0;
   }
 
+  componentWillMount() {
+    this.handleRequest(this.props)
+  }
+
   componentWillReceiveProps(nextProps){
     this.handleRequest(nextProps)
   }
@@ -44,7 +48,7 @@ class Content extends Component {
   handleRequest(nextProps){
     let matchParams = nextProps.match.params;
     let _actionId;
-    _actionId = matchParams.actionId;    
+    _actionId = matchParams.actionId;
     _actionId = parseInt(matchParams.actionId, 10);
     if(!nextProps.curdata)return;
     if(this._actionId !== _actionId){

client/containers/Project/Interface/InterfaceList/InterfaceMenu.js

@@ -58,7 +58,7 @@ class InterfaceMenu extends Component {
       delIcon: null,
       filter: ''
     }
-    
+
   }
 
   async handleRequest() {
@@ -72,7 +72,11 @@ class InterfaceMenu extends Component {
   componentWillMount() {
     this.handleRequest()
   }
-  
+
+  // componentWillReceiveProps() {
+  //   this.handleRequest()
+  // }
+
   handleAddInterface = (data) => {
     data.project_id = this.props.projectId;
     axios.post('/api/interface/add', data).then((res) => {
@@ -167,4 +171,4 @@ class InterfaceMenu extends Component {
   }
 }
 
-export default withRouter(InterfaceMenu)
+export default withRouter(InterfaceMenu)