feat: 跳转新连接，复制内容

client/actions/addInterface.js

@@ -8,7 +8,8 @@ import {
   GET_INTERFACE_RES_PARAMS,
   PUSH_INTERFACE_NAME,
   PUSH_INTERFACE_METHOD,
-  FETCH_INTERFACE_PROJECT
+  FETCH_INTERFACE_PROJECT,
+  ADD_INTERFACE_CLIPBOARD
 } from '../constants/action-types.js'
 import axios from 'axios'
 
@@ -80,4 +81,11 @@ export function fetchInterfaceProject(id) {
     type: FETCH_INTERFACE_PROJECT,
     payload: axios.get('/project/get', { params: {id}})
   }
-}
+}
+
+export function addInterfaceClipboard (func) {
+  return {
+    type: ADD_INTERFACE_CLIPBOARD,
+    payload: func
+  }
+}

client/constants/action-types.js

@@ -17,6 +17,7 @@ export  const GET_INTERFACE_REQ_PARAMS = 'GET_INTERFACE_REQ_PARAMS'
 export  const GET_INTERFACE_RES_PARAMS = 'GET_INTERFACE_RES_PARAMS'
 export  const PUSH_INTERFACE_METHOD = 'PUSH_INTERFACE_METHOD'
 export  const FETCH_INTERFACE_PROJECT = 'FETCH_INTERFACE_PROJECT'
+export const ADD_INTERFACE_CLIPBOARD = 'ADD_INTERFACE_CLIPBOARD'
 
 // group
 export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST'

client/containers/AddInterface/AddInterface.js

@@ -38,7 +38,8 @@ const success = () => {
       url: state.addInterface.url,
       seqGroup: state.addInterface.seqGroup,
       interfaceName: state.addInterface.interfaceName,
-      server_ip: state.login.server_ip
+      server_ip: state.login.server_ip,
+      clipboard: state.addInterface.clipboard
     }
   },
   {
@@ -67,7 +68,8 @@ class AddInterface extends Component {
     getReqParams: PropTypes.func,
     getResParams: PropTypes.func,
     pushInputValue: PropTypes.func,
-    pushInterfaceName: PropTypes.func
+    pushInterfaceName: PropTypes.func,
+    clipboard: PropTypes.func
   }
 
   constructor (props) {
@@ -110,6 +112,7 @@ class AddInterface extends Component {
     const reg = /add-interface\/edit\/(\d+)/g
     const regTwo = /add-interface\/(\d+)/g
     const url = location.href
+
     if ( url.match(reg) ) {
       return RegExp.$1
     } else {
@@ -182,6 +185,19 @@ class AddInterface extends Component {
       })
   }
 
+  initInterfaceDataTwo (interfaceId) {
+    const params = { id: interfaceId }
+
+    axios.get('/interface/get', {params: params})
+      .then(result => {
+        result = result.data.data
+        this.getMockURL(result.project_id, result)
+      })
+      .catch(e => {
+        console.log(e)
+      })
+  }
+
   setLoading (boolean) {
     this.setState({
       isLoading: boolean ? 'is-loading' : ''
@@ -214,14 +230,23 @@ class AddInterface extends Component {
     })
   }
 
+  @autobind
+  jumpEditUrl (_id) {
+    const origin = location.origin
+    const pathname = location.pathname
+    location.href = `${origin}${pathname}#/add-interface/edit/${_id}`
+    this.initInterfaceDataTwo(_id)
+    setTimeout(() => {
+      this.props.clipboard()
+    }, 1000)
+  }
+
   @autobind
   saveForms () {
     let postURL = undefined
     const { interfaceName, url, seqGroup, reqParams, resParams, method } = this.props
     const ifTrue = this.verificationURL()
     const interfaceId = this.getInterfaceId()
-    const origin = location.origin
-    const pathname = location.pathname
     const params = {
       title: interfaceName,
       path: url,
@@ -244,14 +269,21 @@ class AddInterface extends Component {
     this.setLoading(true)
 
     axios.post(postURL, params)
-      .then(() => {
+      .then(data => {
+        const id = data.data.data._id
+        const _id = id || interfaceId
+
         this.setLoading()
         success()
         this.changeState(true)
         // 初始化 mock
         this.mockData()
+        
+        if (id) {
+          this.setState({showMock: 'show-mock'})
+        }
 
-        location.href = `${origin}${pathname}#/project/${interfaceId}`
+        this.jumpEditUrl(_id)
       })
       .catch(e => {
         console.log(e)
@@ -263,12 +295,13 @@ class AddInterface extends Component {
     const { server_ip } = this.props
     const { isLoading, isSave, mockJson='', mockURL, tagName, showMock } = this.state
     let Pane = ''
+    let mockGroup = ''
     if (showMock) {
       Pane = <TabPane tab="请求接口" key="3"><InterfaceTest /></TabPane>
+      mockGroup = <MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData} showMock={showMock}/>
     }
     return (
       <section className="add-interface-box">
-
         <div className="content">
           <Tabs type="card">
             <TabPane tab={tagName} key="1">
@@ -276,7 +309,7 @@ class AddInterface extends Component {
               <ReqMethod />
               <ReqHeader />
               <ReqParams data={this.props} />
-              <MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData} showMock={showMock}/>
+              {mockGroup}
               <h3 className="req-title">返回部分</h3>
               <ResParams />
               <Result isSave={isSave} mockJson={mockJson} />
@@ -284,7 +317,7 @@ class AddInterface extends Component {
             {Pane}
           </Tabs>
         </div>
-        <Affix offsetBottom={0} className="save-button" onChange={affixed => console.log(affixed)}>
+        <Affix offsetBottom={0} className="save-button">
           <Button type="primary" onClick={this.saveForms}>保存</Button>
         </Affix>
         <div className={`loading ${isLoading}`}></div>

client/containers/AddInterface/AddInterface.scss

@@ -244,6 +244,11 @@
     }
     #mock-clipboard {
       margin: 3px 0 0 0;
+      background: #108ee9;
+      border-radius: 5px;
+      padding: 5px 20px;
+      border: none;
+      color: #FFF;
     }
   }
 

client/containers/AddInterface/MockUrl/MockUrl.js

@@ -1,20 +1,34 @@
 import '../AddInterface.scss'
 import React, { Component } from 'react'
-import { Button, message } from 'antd'
+import { message } from 'antd'
 import Clipboard from 'clipboard'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import {
+  addInterfaceClipboard
+} from '../../../actions/addInterface.js'
 
 const success = () => {
   message.success('复制成功!')
 }
 
+@connect(
+  () => {
+    return {}
+  },
+  {
+    addInterfaceClipboard
+  }
+)
+
 class MockUrl extends Component {
   static propTypes = {
     mockURL: PropTypes.string,
     serverIp: PropTypes.string,
     mockData: PropTypes.string,
     showMock: PropTypes.string,
-    projectData: PropTypes.object
+    projectData: PropTypes.object,
+    addInterfaceClipboard: PropTypes.func
   }
 
   constructor(props) {
@@ -22,13 +36,15 @@ class MockUrl extends Component {
   }
 
   componentDidMount () {
+    this.props.addInterfaceClipboard(this.clipboard)
     setTimeout(this.clipboard, 500)
   }
 
   clipboard () {
+    document.querySelector('#clipboard-button').innerHTML = '<button id="mock-clipboard">复制</button>'
     const btn = document.querySelector('#mock-clipboard')
     const txt = document.querySelector('#mock-p').innerHTML
-
+    
     new Clipboard(btn, {
       text: () => txt,
       target () {
@@ -39,11 +55,12 @@ class MockUrl extends Component {
 
   render () {
     const { serverIp, showMock } = this.props
+
     return (
       <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>
+        <span id="clipboard-button"></span>
         <div className="host"><label>请配置host:</label> {this.props.projectData.prd_host} { serverIp }</div>
       </section>
     )

client/containers/AddInterface/ReqMethod/ReqMethod.js

@@ -66,9 +66,8 @@ class ReqMethod extends Component {
             <td>
               <span className="h3">请求方式 : </span>
               <Select value={method} style={{ width: 180 }} onChange={this.handleChange} size="large">
-                <Option value="">选择请求方式</Option>
-                <Option value="POST">POST</Option>
                 <Option value="GET">GET</Option>
+                <Option value="POST">POST</Option>
                 <Option value="PUT">PUT</Option>
                 <Option value="DELETE">DELETE</Option>
               </Select>

client/reducer/addInterface/addInterface.js

@@ -8,7 +8,8 @@ import {
   GET_INTERFACE_RES_PARAMS,
   PUSH_INTERFACE_NAME,
   PUSH_INTERFACE_METHOD,
-  FETCH_INTERFACE_PROJECT
+  FETCH_INTERFACE_PROJECT,
+  ADD_INTERFACE_CLIPBOARD
 } from '../../constants/action-types.js'
 
 const initialState = {
@@ -25,7 +26,8 @@ const initialState = {
   ],
   reqParams: '',
   resParams: '',
-  project: {}
+  project: {},
+  clipboard: () => {}
 }
 
 export default (state = initialState, action) => {
@@ -80,6 +82,11 @@ export default (state = initialState, action) => {
         ...state,
         project: action.payload.data.data
       }
+    case ADD_INTERFACE_CLIPBOARD:
+      return {
+        ...state,
+        clipboard: action.payload
+      }
     default:
       return state
   }