fix : 接口tag展示逻辑

client/containers/AddInterface/AddInterface.js

@@ -77,7 +77,9 @@ class AddInterface extends Component {
       isSave: false,
       mockJson: '',
       mockURL: '',
-      projectData: {}
+      projectData: {},
+      tagName: '创建接口',
+      showMock: ''
     }
   }
 
@@ -92,6 +94,8 @@ class AddInterface extends Component {
     if (ifTrue) {
       interfaceId = this.getInterfaceId()
       this.initInterfaceData(interfaceId)
+      this.modifyTagName('编辑接口')
+      this.setState({showMock: 'show-mock'})
     } else {
       const props = this.props
       props.pushInputValue('')
@@ -114,6 +118,12 @@ class AddInterface extends Component {
     }
   }
 
+  modifyTagName (tagName) {
+    this.setState({
+      tagName
+    })
+  }
+
   verificationURL () {
     const dir = 'AddInterface/edit'
     const url = location.href
@@ -247,26 +257,27 @@ class AddInterface extends Component {
   render () {
     const TabPane = Tabs.TabPane
     const { server_ip } = this.props
-    const { isLoading, isSave, mockJson='', mockURL } = this.state
-
+    const { isLoading, isSave, mockJson='', mockURL, tagName, showMock } = this.state
+    let Pane = ''
+    if (showMock) {
+      Pane = <TabPane tab="请求接口" key="3"><InterfaceTest /></TabPane>
+    }
     return (
       <section className="add-interface-box">
         <div className="content">
           <Tabs type="card">
-            <TabPane tab="接口详情" key="1">
+            <TabPane tab={tagName} key="1">
               <h3 className="req-title">请求部分</h3>
               <ReqMethod />
               <ReqHeader />
               <ReqParams data={this.props} />
-              <MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData}  />
+              <MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData} showMock={showMock}/>
               <h3 className="req-title">返回部分</h3>
               <ResParams />
               <Result isSave={isSave} mockJson={mockJson} />
               <Button type="primary" className="save" onClick={this.saveForms}>保存</Button>
             </TabPane>
-            <TabPane tab="请求接口" key="3">
-              <InterfaceTest />
-            </TabPane>
+            {Pane}
           </Tabs>
         </div>
         <div className={`loading ${isLoading}`}></div>

client/containers/AddInterface/AddInterface.scss

@@ -16,6 +16,10 @@
     background: #FFF;
     padding: 10px 20px 50px 20px;
     margin: 0 auto;
+    
+    .ant-tabs {
+      padding: 0 0 50px 0;
+    }
 
     .ant-tabs-content {
       padding: 0 0 50px 0;
@@ -212,6 +216,7 @@
     margin: 10px 0 0 90px;
     zoom: 1;
     overflow: hidden;
+    display: none;
     .title {
       float: left;
       line-height: 35px;
@@ -234,6 +239,10 @@
     }
   }
 
+  .show-mock {
+    display: block;
+  }
+
   .loading {
     display: none;
     width: 100%;

client/containers/AddInterface/MockUrl/MockUrl.js

@@ -13,6 +13,7 @@ class MockUrl extends Component {
     mockURL: PropTypes.string,
     serverIp: PropTypes.string,
     mockData: PropTypes.string,
+    showMock: PropTypes.string,
     projectData: PropTypes.object
   }
 
@@ -37,10 +38,9 @@ class MockUrl extends Component {
   }
 
   render () {
-    console.log(this.props)
-    const { serverIp } = this.props
+    const { serverIp, showMock } = this.props
     return (
-      <section className="mock-url-box">
+      <section className={`mock-url-box ${showMock}`}>
         <span className="title">mock地址 : </span>
         <p id="mock-p">{this.props.mockURL}</p>
         <Button type="primary" id="mock-clipboard">复制</Button>
@@ -50,4 +50,4 @@ class MockUrl extends Component {
   }
 }
 
-export default MockUrl
+export default MockUrl