yapi/client/containers/AddInterface/InterfaceTest/InterfaceTest.js
2017-07-26 18:24:06 +08:00

195 lines
5.8 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Button, Input, Select, Card } from 'antd'
import { autobind } from 'core-decorators';
import crossRequest from 'cross-request';
import { withRouter } from 'react-router';
import URL from 'url';
import {
} from '../../../actions/group.js'
import './InterfaceTest.scss'
const { TextArea } = Input;
const InputGroup = Input.Group;
const Option = Select.Option;
@connect(
state => ({
reqParams: state.addInterface.reqParams,
method: state.addInterface.method,
url: state.addInterface.url,
seqGroup: state.addInterface.seqGroup,
interfaceName: state.addInterface.interfaceName,
interfaceProject: state.addInterface.project
}),
{
}
)
@withRouter
export default class InterfaceTest extends Component {
static propTypes = {
reqParams: PropTypes.string,
method: PropTypes.string,
url: PropTypes.string,
interfaceName: PropTypes.string,
seqGroup: PropTypes.array,
match: PropTypes.object,
interfaceProject: PropTypes.object
}
state = {
res: '',
header: {}
}
constructor(props) {
super(props)
}
componentWillMount() {
}
@autobind
testInterface() {
const { method, url, seqGroup, interfaceProject } = this.props;
const { prd_host, basepath, protocol } = interfaceProject;
const reqParams = JSON.parse(this.props.reqParams);
const query = {};
if (method === 'GET') {
Object.keys(reqParams).forEach(key => {
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams) : reqParams.toString();
query[key] = value;
})
}
const headers = {}
seqGroup.forEach((headerItem) => {
if (headerItem.name) {
headers[headerItem.name] = headerItem.value;
}
})
const href = URL.format({
protocol: protocol || 'http',
host: prd_host,
pathname: (basepath + url).replace(/\/+/g, '/'),
query
});
crossRequest({
url: href,
method,
headers,
data: {
a:1
},
success: (res, header) => {
console.log(header)
this.setState({res})
}
})
}
render () {
const { method, url, seqGroup, interfaceName, interfaceProject } = this.props;
const { prd_host, basepath, protocol, env } = interfaceProject;
const reqParams = JSON.parse(this.props.reqParams);
const pathname = (basepath + url).replace(/\/+/g, '/');
const domains = [{name: 'prd', domain: protocol + '://' + prd_host}];
env.forEach(item => {
domains.push({name: item.name, domain: item.domain});
})
const query = {};
if (method === 'GET') {
Object.keys(reqParams).forEach(key => {
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
query[key] = value;
})
}
const headers = {}
seqGroup.forEach((headerItem) => {
if (headerItem.name) {
headers[headerItem.name] = headerItem.value;
}
})
const search = URL.format({
query
});
return (
<div className="interface-test">
<div className="interface-name">{interfaceName}</div>
<div className="req-part">
<div className="req-row href">
<InputGroup compact style={{display: 'inline-block', width: 680}}>
<Input value={method} disabled style={{display: 'inline-block', width: 80}} />
<Select defaultValue="prd" style={{display: 'inline-block', width: 300}}>
{
domains.map((item, index) => (<Option value={item.name} key={index}>{item.domain}</Option>))
}
</Select>
<Input value={pathname+search} style={{display: 'inline-block', width: 300}} />
</InputGroup>
<Button onClick={this.testInterface} type="primary" style={{marginLeft: 10}}>发送</Button>
</div>
<Card noHovering style={{marginTop: 10}} className={Object.keys(headers).length ? '' : 'hidden'}>
<div className="req-row headers">
HEADERS
{
Object.keys(headers).map((key, index) => {
return (
<div key={index}>
<Input disabled value={key} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
<Input value={headers[key]} style={{display: 'inline-block', width: 200, margin: 10}} />
</div>
)
})
}
</div>
</Card>
<Card noHovering style={{marginTop: 10}} className={Object.keys(reqParams).length ? '' : 'hidden'}>
<div className="req-row params">
请求参数
{
Object.keys(reqParams).map((key, index) => {
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
return (
<div key={index}>
<Input disabled value={key} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
<Input value={value} style={{display: 'inline-block', width: 200, margin: 10}} />
</div>
)
})
}
</div>
</Card>
</div>
<Card noHovering style={{marginTop: 10}}>
<div className="res-part">
返回结果
<div>
<TextArea
value={this.state.res ? JSON.stringify(this.state.res, 2) : ''}
style={{margin: 10}}
autosize={{ minRows: 2, maxRows: 6 }}
></TextArea>
</div>
</div>
</Card>
</div>
)
}
}