feat: 复制mock URL

client/actions/interfaceAction.js

@@ -2,7 +2,8 @@ import {
   FETCH_INTERFACE_DATA,
   LIST_INTERFACE_CLICK,
   PROJECT_MEMBER_INTERFACE,
-  DELETE_INTERFACE_DATA
+  DELETE_INTERFACE_DATA,
+  SAVE_INTERFACE_PROJECT_ID
 } from '../constants/action-types.js'
 
 export function fetchInterfaceData (value) {
@@ -30,3 +31,10 @@ export function deleteInterfaceData (value) {
     payload: value
   }
 }
+
+export function saveInterfaceProjectId (value) {
+  return {
+    type: SAVE_INTERFACE_PROJECT_ID,
+    payload: value
+  }
+}

client/constants/action-types.js

@@ -3,7 +3,8 @@ export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA'
 export const LIST_INTERFACE_CLICK = 'LIST_INTERFACE_CLICK'
 export const PROJECT_MEMBER_INTERFACE = 'PROJECT_MEMBER_INTERFACE'
 export const PUSH_INTERFACE_NAME = 'PUSH_INTERFACE_NAME'
-export  const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA'
+export const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA'
+export const SAVE_INTERFACE_PROJECT_ID = 'SAVE_INTERFACE_PROJECT_ID'
 
 // addInterFace
 export  const FETCH_ADD_INTERFACE_INPUT = 'FETCH_ADD_INTERFACE_INPUT'

client/containers/AddInterface/AddInterface.js

@@ -11,6 +11,7 @@ import ReqHeader from './ReqHeader/ReqHeader.js'
 import ReqParams from './ReqParams/ReqParams.js'
 import ResParams from './ResParams/ResParams.js'
 import Result from './Result/Result.js'
+import MockUrl from './MockUrl/MockUrl.js'
 import InterfaceTest from './InterfaceTest/InterfaceTest.js'
 import {
   saveForms,
@@ -23,6 +24,7 @@ import {
   pushInterfaceMethod
 } from '../../actions/addInterface.js'
 
+let projectId = ''
 const success = () => {
   message.success('保存成功!')
 }
@@ -71,7 +73,8 @@ class AddInterface extends Component {
     this.state = {
       isLoading: '',
       isSave: false,
-      mockJson: ''
+      mockJson: '',
+      mockURL: ''
     }
   }
 
@@ -106,7 +109,6 @@ class AddInterface extends Component {
       url.match(regTwo)
       return RegExp.$1
     }
-    
   }
 
   verificationURL () {
@@ -117,9 +119,22 @@ class AddInterface extends Component {
     }
   }
 
+  getMockURL (project_id, result) {
+    const params = {id: project_id}
+    axios.get('/project/get', {params: params}).
+      then( data => {
+        const { protocol, prd_host, basepath } = data.data.data
+        const mockURL = `${protocol}://${prd_host}${basepath}${result.path}`
+        this.setState({
+          mockURL: mockURL
+        })
+      })
+  }
+
   editState (data) {
     const props = this.props
     const { path, title, req_params_other, res_body, req_headers, project_id, method } = data
+
     props.pushInputValue(path)
     props.pushInterfaceMethod(method)
     props.pushInterfaceName(title)
@@ -127,6 +142,7 @@ class AddInterface extends Component {
     props.getResParams(res_body)
     props.addReqHeader(req_headers)
     props.fetchInterfaceProject(project_id)
+    projectId = project_id
   }
 
   initInterfaceData (interfaceId) {
@@ -142,6 +158,8 @@ class AddInterface extends Component {
         this.editState(result)
         // 初始化 mock
         this.mockData()
+
+        this.getMockURL(projectId, result)
       })
       .catch(e => {
         console.log(e)
@@ -175,7 +193,6 @@ class AddInterface extends Component {
       resParams = JSON.parse(this.props.resParams)
       json = JSON.stringify(Mock.mock(resParams), null, 2)
     }
-    console.log('json', json)
     this.setState({
       mockJson: json
     })
@@ -184,13 +201,13 @@ class AddInterface extends Component {
   @autobind
   saveForms () {
     let postURL = undefined
-    const { interfaceName, url, seqGroup, reqParams, resParams } = this.props
+    const { interfaceName, url, seqGroup, reqParams, resParams, method } = this.props
     const ifTrue = this.verificationURL()
     const interfaceId = this.getInterfaceId()
     const params = {
       title: interfaceName,
       path: url,
-      method: 'POST',
+      method: method,
       req_headers: seqGroup,
       project_id: interfaceId,
       req_params_type: 'json',
@@ -221,8 +238,8 @@ class AddInterface extends Component {
 
   render () {
     const TabPane = Tabs.TabPane
-    const { isLoading, isSave, mockJson='' } = this.state
-    console.log('mockJson', mockJson)
+    const { isLoading, isSave, mockJson='', mockURL } = this.state
+    console.log(mockURL)
     return (
       <section className="add-interface-box">
         <div className="content">
@@ -235,6 +252,7 @@ class AddInterface extends Component {
               <ReqParams data={this.props} />
               <ResParams />
               <Result isSave={isSave} mockJson={mockJson} />
+              <MockUrl mockURL={mockURL} />
             </TabPane>
             <TabPane tab="Mock" key="2">mock</TabPane>
             <TabPane tab="测试" key="3">

client/containers/AddInterface/AddInterface.scss

@@ -167,6 +167,23 @@
       color: #CCC;
     }
   }
+  
+  /* .mock-url-box.css */
+  .mock-url-box {
+    clear: both;
+    padding: 10px 0 0 0;
+    margin: 0 0 0 20px;
+    p {
+      width: 70%;
+      height: 35px;
+      line-height: 35px;
+      border: 1px #DDD solid;
+      display: inline-block;
+      vertical-align: -4px;
+      margin: 0 10px 0 0;
+      padding: 0 0 0 10px;
+    }
+  }
 
   .loading {
     display: none;

client/containers/AddInterface/MockUrl/MockUrl.js

@@ -0,0 +1,46 @@
+import '../AddInterface.scss'
+import React, { Component } from 'react'
+import { Button, message } from 'antd'
+import Clipboard from 'clipboard'
+import PropTypes from 'prop-types'
+
+const success = () => {
+  message.success('复制成功!')
+}
+
+class MockUrl extends Component {
+  static propTypes = {
+    mockURL: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentDidMount () {
+    setTimeout(this.clipboard, 500)
+  }
+
+  clipboard () {
+    const btn = document.querySelector('#mock-clipboard')
+    const txt = document.querySelector('#mock-p').innerHTML
+    console.log('txt', txt)
+    new Clipboard(btn, {
+      text: () => txt,
+      target () {
+        success()
+      }
+    })
+  }
+
+  render () {
+    return (
+      <section className="mock-url-box">
+        <p id="mock-p">{this.props.mockURL}</p>
+        <Button type="primary" id="mock-clipboard">复制</Button>
+      </section>
+    )
+  }
+}
+
+export default MockUrl

client/containers/AddInterface/ReqMethod/ReqMethod.js

@@ -40,6 +40,7 @@ class ReqMethod extends Component {
 
   @autobind
   handleChange (value) {
+    console.log('value', value)
     this.props.pushInterfaceMethod(value)
   }
 
@@ -57,20 +58,15 @@ class ReqMethod extends Component {
 
   render () {
     const { Option } = Select
-    const { url, interfaceName } = this.props
+    const { url, interfaceName, method } = this.props
     return (
       <table>
         <tbody>
           <tr>
             <th>协议 :</th>
             <td>
-              <span className="h3">请求协议</span>
-              <Select defaultValue="HTTP" style={{ width: 220}} onChange={this.handleChange} size="large">
-                <Option value="HTTP">HTTP</Option>
-                <Option value="HTTPS">HTTPS</Option>
-              </Select>
               <span className="h3">请求方式</span>
-              <Select defaultValue="POST" style={{ width: 220 }} onChange={this.handleChange} size="large">
+              <Select defaultValue={method} style={{ width: 220 }} onChange={this.handleChange} size="large">
                 <Option value="POST">POST</Option>
                 <Option value="GET">GET</Option>
                 <Option value="PUT">PUT</Option>

client/containers/Interface/Interface.js

@@ -10,7 +10,8 @@ import moment from 'moment'
 import {
   fetchInterfaceData, 
   projectMember,
-  closeProjectMember
+  closeProjectMember,
+  saveInterfaceProjectId
 } from '../../actions/interfaceAction.js'
 
 @connect(
@@ -24,7 +25,8 @@ import {
   {
     fetchInterfaceData,
     projectMember,
-    closeProjectMember
+    closeProjectMember,
+    saveInterfaceProjectId
   }
 )
 
@@ -33,6 +35,7 @@ class Interface extends Component {
     fetchInterfaceData: PropTypes.func,
     interfaceData: PropTypes.array,
     projectMember: PropTypes.func,
+    saveInterfaceProjectId: PropTypes.func,
     closeProjectMember: PropTypes.func,
     modalVisible: PropTypes.bool
   }
@@ -49,6 +52,8 @@ class Interface extends Component {
       }
     }
 
+    this.props.saveInterfaceProjectId(interfaceId)
+
     axios.get('/interface/list', params)
       .then(result => {
         result = result.data.data

client/containers/Interface/InterfaceList/InterfaceList.js

@@ -21,7 +21,7 @@ class InterfaceList extends Component {
   render () {
     const { projectMember } = this.props
     const getInterfaceId = this.getInterfaceId()
-    console.log(`/AddInterface/${getInterfaceId}`)
+
     return (
       <ul className="interface-list">
         <li><Link to={`/AddInterface/${getInterfaceId}`}>添加接口</Link></li>

client/containers/Interface/InterfaceTable/InterfaceTable.js

@@ -21,6 +21,7 @@ class InterfaceTable extends Component {
   static propTypes = {
     interfaceData: PropTypes.array,
     data: PropTypes.array,
+    projectId: PropTypes.string,
     deleteInterfaceData: PropTypes.func
   }
 
@@ -70,6 +71,7 @@ class InterfaceTable extends Component {
       'key': 'action',
       render: (data) => {
         const deleteInterface = this.deleteInterface.bind(this, data._id)
+        console.log(data)
         return (
           <span>
             <Button type="primary">

client/reducer/Interface/InterfaceReducer.js

@@ -2,13 +2,15 @@ import {
   FETCH_INTERFACE_DATA,
   LIST_INTERFACE_CLICK,
   PROJECT_MEMBER_INTERFACE,
-  DELETE_INTERFACE_DATA
+  DELETE_INTERFACE_DATA,
+  SAVE_INTERFACE_PROJECT_ID
 } from '../../constants/action-types.js'
 
 const initialState = {
   interfaceData: [],
   modalVisible: false,
-  interfaceName: ''
+  interfaceName: '',
+  projectId: ''
 }
 
 export default (state = initialState, action) => {
@@ -33,6 +35,11 @@ export default (state = initialState, action) => {
         ...state,
         interfaceData: action.payload
       }
+    case SAVE_INTERFACE_PROJECT_ID:
+      return {
+        ...state,
+        projectId: action.payload
+      }
     default:
       return state
   }

client/reducer/interface/InterfaceReducer.js

@@ -2,13 +2,15 @@ import {
   FETCH_INTERFACE_DATA,
   LIST_INTERFACE_CLICK,
   PROJECT_MEMBER_INTERFACE,
-  DELETE_INTERFACE_DATA
+  DELETE_INTERFACE_DATA,
+  SAVE_INTERFACE_PROJECT_ID
 } from '../../constants/action-types.js'
 
 const initialState = {
   interfaceData: [],
   modalVisible: false,
-  interfaceName: ''
+  interfaceName: '',
+  projectId: ''
 }
 
 export default (state = initialState, action) => {
@@ -33,6 +35,11 @@ export default (state = initialState, action) => {
         ...state,
         interfaceData: action.payload
       }
+    case SAVE_INTERFACE_PROJECT_ID:
+      return {
+        ...state,
+        projectId: action.payload
+      }
     default:
       return state
   }

package.json

@@ -18,10 +18,11 @@
     "assets-webpack-plugin": "^3.5.1",
     "axios": "^0.16.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "clipboard": "^1.7.1",
     "copy-webpack-plugin": "^4.0.1",
     "core-decorators": "^0.17.0",
-    "fast-sass-loader": "^1.2.5",
     "cross-request": "^1.0.1",
+    "fast-sass-loader": "^1.2.5",
     "fs-extra": "^3.0.1",
     "json2html": "0.0.8",
     "jsoneditor": "^5.9.3",