diff --git a/client/actions/addInterface.js b/client/actions/addInterface.js index 5dc0f521..c963d133 100644 --- a/client/actions/addInterface.js +++ b/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}}) } -} \ No newline at end of file +} + +export function addInterfaceClipboard (func) { + return { + type: ADD_INTERFACE_CLIPBOARD, + payload: func + } +} diff --git a/client/constants/action-types.js b/client/constants/action-types.js index 99658dfb..57348430 100644 --- a/client/constants/action-types.js +++ b/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' diff --git a/client/containers/AddInterface/AddInterface.js b/client/containers/AddInterface/AddInterface.js index bf514255..030afe30 100644 --- a/client/containers/AddInterface/AddInterface.js +++ b/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 = + mockGroup = } return (
-
@@ -276,7 +309,7 @@ class AddInterface extends Component { - + {mockGroup}

返回部分

@@ -284,7 +317,7 @@ class AddInterface extends Component { {Pane}
- console.log(affixed)}> +
diff --git a/client/containers/AddInterface/AddInterface.scss b/client/containers/AddInterface/AddInterface.scss index 7a149baf..add49c33 100644 --- a/client/containers/AddInterface/AddInterface.scss +++ b/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; } } diff --git a/client/containers/AddInterface/MockUrl/MockUrl.js b/client/containers/AddInterface/MockUrl/MockUrl.js index e114b744..1f7a6549 100644 --- a/client/containers/AddInterface/MockUrl/MockUrl.js +++ b/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 = '' 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 (
mock地址 :

{this.props.mockURL}

- +
{this.props.projectData.prd_host} { serverIp }
) diff --git a/client/containers/AddInterface/ReqMethod/ReqMethod.js b/client/containers/AddInterface/ReqMethod/ReqMethod.js index bc3ecbb0..2e36a805 100644 --- a/client/containers/AddInterface/ReqMethod/ReqMethod.js +++ b/client/containers/AddInterface/ReqMethod/ReqMethod.js @@ -66,9 +66,8 @@ class ReqMethod extends Component { 请求方式 : diff --git a/client/reducer/addInterface/addInterface.js b/client/reducer/addInterface/addInterface.js index 1f554aa1..28562eb0 100644 --- a/client/reducer/addInterface/addInterface.js +++ b/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 }