2017-07-18 12:53:53 +08:00
|
|
|
import './AddInterface.scss'
|
|
|
|
import React, { Component } from 'react'
|
2017-07-20 14:48:29 +08:00
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import axios from 'axios'
|
2017-07-26 12:31:42 +08:00
|
|
|
import Mock from 'mockjs'
|
2017-07-20 14:48:29 +08:00
|
|
|
import { connect } from 'react-redux'
|
|
|
|
import { autobind } from 'core-decorators'
|
2017-07-28 16:16:53 +08:00
|
|
|
import { Button, Tabs, message, Affix } from 'antd'
|
2017-07-18 12:53:53 +08:00
|
|
|
import ReqMethod from './ReqMethod/ReqMethod.js'
|
|
|
|
import ReqHeader from './ReqHeader/ReqHeader.js'
|
|
|
|
import ReqParams from './ReqParams/ReqParams.js'
|
|
|
|
import ResParams from './ResParams/ResParams.js'
|
|
|
|
import Result from './Result/Result.js'
|
2017-07-26 16:25:34 +08:00
|
|
|
import MockUrl from './MockUrl/MockUrl.js'
|
2017-07-25 13:34:48 +08:00
|
|
|
import InterfaceTest from './InterfaceTest/InterfaceTest.js'
|
|
|
|
import {
|
2017-07-24 10:59:17 +08:00
|
|
|
saveForms,
|
|
|
|
getResParams,
|
|
|
|
getReqParams,
|
|
|
|
addReqHeader,
|
|
|
|
pushInputValue,
|
2017-07-25 21:24:12 +08:00
|
|
|
pushInterfaceName,
|
|
|
|
fetchInterfaceProject,
|
|
|
|
pushInterfaceMethod
|
2017-07-24 10:59:17 +08:00
|
|
|
} from '../../actions/addInterface.js'
|
2017-07-18 12:53:53 +08:00
|
|
|
|
2017-07-26 16:25:34 +08:00
|
|
|
let projectId = ''
|
2017-07-25 14:35:46 +08:00
|
|
|
const success = () => {
|
|
|
|
message.success('保存成功!')
|
|
|
|
}
|
|
|
|
|
2017-07-20 14:48:29 +08:00
|
|
|
@connect(
|
|
|
|
state => {
|
|
|
|
return {
|
2017-07-20 16:57:21 +08:00
|
|
|
reqParams: state.addInterface.reqParams,
|
2017-07-20 19:26:04 +08:00
|
|
|
resParams: state.addInterface.resParams,
|
|
|
|
method: state.addInterface.method,
|
|
|
|
url: state.addInterface.url,
|
2017-07-24 10:59:17 +08:00
|
|
|
seqGroup: state.addInterface.seqGroup,
|
2017-07-27 20:35:19 +08:00
|
|
|
interfaceName: state.addInterface.interfaceName,
|
|
|
|
server_ip: state.login.server_ip
|
2017-07-20 14:48:29 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
2017-07-24 10:59:17 +08:00
|
|
|
saveForms,
|
|
|
|
getReqParams,
|
|
|
|
getResParams,
|
|
|
|
addReqHeader,
|
|
|
|
pushInputValue,
|
2017-07-25 21:24:12 +08:00
|
|
|
pushInterfaceName,
|
|
|
|
fetchInterfaceProject,
|
|
|
|
pushInterfaceMethod
|
2017-07-20 14:48:29 +08:00
|
|
|
}
|
|
|
|
)
|
2017-07-18 12:53:53 +08:00
|
|
|
|
2017-07-20 14:48:29 +08:00
|
|
|
class AddInterface extends Component {
|
|
|
|
static propTypes = {
|
2017-07-24 10:59:17 +08:00
|
|
|
url: PropTypes.string,
|
|
|
|
method: PropTypes.string,
|
2017-07-27 20:35:19 +08:00
|
|
|
server_ip: PropTypes.string,
|
2017-07-20 14:48:29 +08:00
|
|
|
reqParams: PropTypes.string,
|
2017-07-20 19:26:04 +08:00
|
|
|
resParams: PropTypes.string,
|
2017-07-24 10:59:17 +08:00
|
|
|
seqGroup: PropTypes.array,
|
2017-07-20 19:26:04 +08:00
|
|
|
interfaceName: PropTypes.string,
|
2017-07-24 10:59:17 +08:00
|
|
|
saveForms: PropTypes.func,
|
|
|
|
addReqHeader: PropTypes.func,
|
|
|
|
getReqParams: PropTypes.func,
|
|
|
|
getResParams: PropTypes.func,
|
|
|
|
pushInputValue: PropTypes.func,
|
|
|
|
pushInterfaceName: PropTypes.func
|
2017-07-20 14:48:29 +08:00
|
|
|
}
|
2017-07-18 12:53:53 +08:00
|
|
|
|
|
|
|
constructor (props) {
|
|
|
|
super(props)
|
2017-07-24 10:59:17 +08:00
|
|
|
this.state = {
|
2017-07-25 14:35:46 +08:00
|
|
|
isLoading: '',
|
2017-07-26 12:31:42 +08:00
|
|
|
isSave: false,
|
2017-07-26 16:25:34 +08:00
|
|
|
mockJson: '',
|
2017-07-28 10:29:20 +08:00
|
|
|
mockURL: '',
|
2017-07-28 12:06:11 +08:00
|
|
|
projectData: {},
|
2017-07-31 10:47:29 +08:00
|
|
|
tagName: '添加接口',
|
2017-07-28 12:06:11 +08:00
|
|
|
showMock: ''
|
2017-07-24 10:59:17 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount () {
|
|
|
|
const ifTrue = this.verificationURL()
|
2017-07-26 12:31:42 +08:00
|
|
|
const initData = [{
|
|
|
|
id: 0,
|
|
|
|
name: '',
|
|
|
|
value: ''
|
2017-07-26 14:54:14 +08:00
|
|
|
}]
|
2017-07-24 10:59:17 +08:00
|
|
|
let interfaceId = undefined
|
|
|
|
if (ifTrue) {
|
|
|
|
interfaceId = this.getInterfaceId()
|
|
|
|
this.initInterfaceData(interfaceId)
|
2017-07-28 12:06:11 +08:00
|
|
|
this.modifyTagName('编辑接口')
|
|
|
|
this.setState({showMock: 'show-mock'})
|
2017-07-24 10:59:17 +08:00
|
|
|
} else {
|
|
|
|
const props = this.props
|
|
|
|
props.pushInputValue('')
|
|
|
|
props.pushInterfaceName('')
|
|
|
|
props.getReqParams('')
|
|
|
|
props.getResParams('')
|
2017-07-26 12:31:42 +08:00
|
|
|
props.addReqHeader(initData)
|
2017-07-24 10:59:17 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
getInterfaceId () {
|
2017-07-28 17:30:56 +08:00
|
|
|
const reg = /add-interface\/edit\/(\d+)/g
|
|
|
|
const regTwo = /add-interface\/(\d+)/g
|
2017-07-25 17:41:58 +08:00
|
|
|
const url = location.href
|
2017-07-26 12:31:42 +08:00
|
|
|
if ( url.match(reg) ) {
|
|
|
|
return RegExp.$1
|
|
|
|
} else {
|
|
|
|
url.match(regTwo)
|
|
|
|
return RegExp.$1
|
|
|
|
}
|
2017-07-24 10:59:17 +08:00
|
|
|
}
|
|
|
|
|
2017-07-28 12:06:11 +08:00
|
|
|
modifyTagName (tagName) {
|
|
|
|
this.setState({
|
|
|
|
tagName
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2017-07-24 10:59:17 +08:00
|
|
|
verificationURL () {
|
2017-07-28 17:30:56 +08:00
|
|
|
const dir = 'add-interface/edit'
|
2017-07-24 10:59:17 +08:00
|
|
|
const url = location.href
|
|
|
|
if (url.includes(dir)) {
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-07-26 16:25:34 +08:00
|
|
|
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({
|
2017-07-28 10:29:20 +08:00
|
|
|
mockURL: mockURL,
|
|
|
|
projectData: data.data.data
|
2017-07-26 16:25:34 +08:00
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2017-07-24 10:59:17 +08:00
|
|
|
editState (data) {
|
|
|
|
const props = this.props
|
2017-07-25 21:24:12 +08:00
|
|
|
const { path, title, req_params_other, res_body, req_headers, project_id, method } = data
|
2017-07-28 10:29:20 +08:00
|
|
|
this.setState({
|
|
|
|
apiData: data
|
|
|
|
})
|
2017-07-24 10:59:17 +08:00
|
|
|
props.pushInputValue(path)
|
2017-07-25 21:24:12 +08:00
|
|
|
props.pushInterfaceMethod(method)
|
2017-07-24 10:59:17 +08:00
|
|
|
props.pushInterfaceName(title)
|
|
|
|
props.getReqParams(req_params_other)
|
|
|
|
props.getResParams(res_body)
|
|
|
|
props.addReqHeader(req_headers)
|
2017-07-25 21:24:12 +08:00
|
|
|
props.fetchInterfaceProject(project_id)
|
2017-07-26 16:25:34 +08:00
|
|
|
projectId = project_id
|
2017-07-24 10:59:17 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
initInterfaceData (interfaceId) {
|
|
|
|
const params = { id: interfaceId }
|
|
|
|
|
|
|
|
axios.get('/interface/get', {params: params})
|
|
|
|
.then(result => {
|
|
|
|
result = result.data.data
|
|
|
|
result.req_headers.map((value, key) => {
|
|
|
|
value.id = key
|
|
|
|
return value
|
|
|
|
})
|
|
|
|
this.editState(result)
|
2017-07-26 12:31:42 +08:00
|
|
|
// 初始化 mock
|
|
|
|
this.mockData()
|
2017-07-26 16:25:34 +08:00
|
|
|
|
|
|
|
this.getMockURL(projectId, result)
|
2017-07-24 10:59:17 +08:00
|
|
|
})
|
|
|
|
.catch(e => {
|
|
|
|
console.log(e)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
setLoading (boolean) {
|
|
|
|
this.setState({
|
|
|
|
isLoading: boolean ? 'is-loading' : ''
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
routerPage () {
|
|
|
|
const origin = location.origin
|
|
|
|
const pathname = location.pathname
|
|
|
|
location.href = `${origin}${pathname}#/interface`
|
2017-07-18 12:53:53 +08:00
|
|
|
}
|
|
|
|
|
2017-07-25 14:35:46 +08:00
|
|
|
changeState (ifTrue) {
|
|
|
|
this.setState({
|
|
|
|
isSave: ifTrue
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2017-07-26 12:31:42 +08:00
|
|
|
@autobind
|
|
|
|
mockData () { // mock 数据
|
|
|
|
let resParams = ''
|
|
|
|
let json = ''
|
2017-07-26 14:54:14 +08:00
|
|
|
|
2017-07-26 12:31:42 +08:00
|
|
|
if(this.props.resParams){
|
|
|
|
resParams = JSON.parse(this.props.resParams)
|
|
|
|
json = JSON.stringify(Mock.mock(resParams), null, 2)
|
|
|
|
}
|
|
|
|
this.setState({
|
|
|
|
mockJson: json
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2017-07-20 14:48:29 +08:00
|
|
|
@autobind
|
2017-07-18 12:53:53 +08:00
|
|
|
saveForms () {
|
2017-07-24 10:59:17 +08:00
|
|
|
let postURL = undefined
|
2017-07-26 16:25:34 +08:00
|
|
|
const { interfaceName, url, seqGroup, reqParams, resParams, method } = this.props
|
2017-07-24 10:59:17 +08:00
|
|
|
const ifTrue = this.verificationURL()
|
|
|
|
const interfaceId = this.getInterfaceId()
|
2017-07-31 11:26:23 +08:00
|
|
|
// const origin = location.origin
|
|
|
|
// const pathname = location.pathname
|
2017-07-20 14:48:29 +08:00
|
|
|
const params = {
|
2017-07-20 19:26:04 +08:00
|
|
|
title: interfaceName,
|
|
|
|
path: url,
|
2017-07-26 16:25:34 +08:00
|
|
|
method: method,
|
2017-07-24 10:59:17 +08:00
|
|
|
req_headers: seqGroup,
|
2017-07-25 17:41:58 +08:00
|
|
|
project_id: interfaceId,
|
2017-07-20 19:26:04 +08:00
|
|
|
req_params_type: 'json',
|
|
|
|
req_params_other: reqParams,
|
|
|
|
res_body_type: 'json',
|
|
|
|
res_body: resParams
|
2017-07-20 14:48:29 +08:00
|
|
|
}
|
|
|
|
|
2017-07-24 10:59:17 +08:00
|
|
|
if (ifTrue) {
|
|
|
|
params.id = interfaceId
|
|
|
|
postURL = '/interface/up'
|
|
|
|
} else {
|
|
|
|
postURL = '/interface/add'
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setLoading(true)
|
|
|
|
|
|
|
|
axios.post(postURL, params)
|
2017-07-25 14:35:46 +08:00
|
|
|
.then(() => {
|
2017-07-24 10:59:17 +08:00
|
|
|
this.setLoading()
|
2017-07-25 14:35:46 +08:00
|
|
|
success()
|
|
|
|
this.changeState(true)
|
2017-07-27 10:54:19 +08:00
|
|
|
// 初始化 mock
|
2017-07-28 17:30:56 +08:00
|
|
|
this.mockData()
|
2017-07-31 11:26:23 +08:00
|
|
|
// location.href = `${origin}${pathname}#/add-interface/edit/${interfaceId}`
|
2017-07-20 14:48:29 +08:00
|
|
|
})
|
|
|
|
.catch(e => {
|
|
|
|
console.log(e)
|
|
|
|
})
|
2017-07-18 12:53:53 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2017-07-20 16:34:46 +08:00
|
|
|
const TabPane = Tabs.TabPane
|
2017-07-27 20:35:19 +08:00
|
|
|
const { server_ip } = this.props
|
2017-07-28 12:06:11 +08:00
|
|
|
const { isLoading, isSave, mockJson='', mockURL, tagName, showMock } = this.state
|
|
|
|
let Pane = ''
|
|
|
|
if (showMock) {
|
|
|
|
Pane = <TabPane tab="请求接口" key="3"><InterfaceTest /></TabPane>
|
|
|
|
}
|
2017-07-18 12:53:53 +08:00
|
|
|
return (
|
2017-07-20 16:38:50 +08:00
|
|
|
<section className="add-interface-box">
|
2017-07-28 16:16:53 +08:00
|
|
|
|
2017-07-20 16:38:50 +08:00
|
|
|
<div className="content">
|
2017-07-27 20:06:49 +08:00
|
|
|
<Tabs type="card">
|
2017-07-28 12:06:11 +08:00
|
|
|
<TabPane tab={tagName} key="1">
|
2017-07-27 20:06:49 +08:00
|
|
|
<h3 className="req-title">请求部分</h3>
|
2017-07-20 16:34:46 +08:00
|
|
|
<ReqMethod />
|
|
|
|
<ReqHeader />
|
2017-07-24 10:59:17 +08:00
|
|
|
<ReqParams data={this.props} />
|
2017-07-28 12:06:11 +08:00
|
|
|
<MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData} showMock={showMock}/>
|
2017-07-27 20:06:49 +08:00
|
|
|
<h3 className="req-title">返回部分</h3>
|
2017-07-20 16:34:46 +08:00
|
|
|
<ResParams />
|
2017-07-26 12:31:42 +08:00
|
|
|
<Result isSave={isSave} mockJson={mockJson} />
|
2017-07-20 16:38:50 +08:00
|
|
|
</TabPane>
|
2017-07-28 12:06:11 +08:00
|
|
|
{Pane}
|
2017-07-20 16:38:50 +08:00
|
|
|
</Tabs>
|
|
|
|
</div>
|
2017-07-28 16:16:53 +08:00
|
|
|
<Affix offsetBottom={0} className="save-button" onChange={affixed => console.log(affixed)}>
|
|
|
|
<Button type="primary" onClick={this.saveForms}>保存</Button>
|
|
|
|
</Affix>
|
2017-07-24 10:59:17 +08:00
|
|
|
<div className={`loading ${isLoading}`}></div>
|
2017-07-20 16:38:50 +08:00
|
|
|
</section>
|
2017-07-18 12:53:53 +08:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default AddInterface
|