mirror of
https://github.com/YMFE/yapi.git
synced 2025-01-18 13:04:46 +08:00
feat: run
This commit is contained in:
zwjamnsss
parent
f67f0f2c4f
commit
600d7da21c
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'react-redux'
|
||||
import { Button, Input, Select, Card, Alert, Spin, Icon, message } from 'antd'
|
||||
import { Button, Input, Select, Card, Alert, Spin, Icon, message, Collapse } from 'antd'
|
||||
import { autobind } from 'core-decorators';
|
||||
import crossRequest from 'cross-request';
|
||||
import { withRouter } from 'react-router';
|
||||
@ -16,6 +16,7 @@ import './Run.scss'
|
||||
const { TextArea } = Input;
|
||||
const InputGroup = Input.Group;
|
||||
const Option = Select.Option;
|
||||
const Panel = Collapse.Panel;
|
||||
|
||||
@connect(
|
||||
state => ({
|
||||
@ -380,16 +381,16 @@ export default class Run extends Component {
|
||||
<Card title="请求部分" noHovering className="req-part">
|
||||
<div className="url">
|
||||
<InputGroup compact style={{display: 'flex'}}>
|
||||
<Select value={method} style={{flexBasis: '80'}} onChange={this.changeMethod} >
|
||||
<Select value={method} style={{flexBasis: 60}} onChange={this.changeMethod} >
|
||||
<Option value="GET">GET</Option>
|
||||
<Option value="POST">POST</Option>
|
||||
</Select>
|
||||
<Select value={currDomain} mode="combobox" filterOption={() => true} style={{flexBasis: '180', flexGrow: 1}} onChange={this.changeDomain} onSelect={this.selectDomain}>
|
||||
<Select value={currDomain} mode="combobox" filterOption={() => true} style={{flexBasis: 180, flexGrow: 1}} onChange={this.changeDomain} onSelect={this.selectDomain}>
|
||||
{
|
||||
Object.keys(domains).map((key, index) => (<Option value={domains[key]} key={index}>{key + '：' + domains[key]}</Option>))
|
||||
}
|
||||
</Select>
|
||||
<Input value={pathname + search} onChange={this.changePath} spellCheck="false" style={{flexBasis: '180', flexGrow: 1}} />
|
||||
<Input value={pathname + search} onChange={this.changePath} spellCheck="false" style={{flexBasis: 180, flexGrow: 1}} />
|
||||
</InputGroup>
|
||||
<Button
|
||||
onClick={this.requestInterface}
|
||||
@ -399,45 +400,51 @@ export default class Run extends Component {
|
||||
>发送</Button>
|
||||
</div>
|
||||
|
||||
<Card title="QUERY PARAMETERS" noHovering style={{marginTop: 10}}>
|
||||
{
|
||||
query.map((item, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<Input value={item.key} onChange={e => this.changeQuery(e, index, true)} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
|
||||
<Input value={item.value} onChange={e => this.changeQuery(e, index)} style={{display: 'inline-block', width: 200, margin: 10}} />
|
||||
<Icon type="delete" className="icon-btn" onClick={() => this.deleteQuery(index)} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button type="primary" icon="plus" onClick={this.addQuery} style={{margin: 10}}>Add query parameter</Button>
|
||||
</Card>
|
||||
<Card title="HEADERS" noHovering style={{marginTop: 10}} >
|
||||
<div className="req-row headers">
|
||||
<Collapse defaultActiveKey={['1', '2', '3']} bordered={true}>
|
||||
<Panel header="QUERY PARAMETERS" key="1">
|
||||
{
|
||||
query.map((item, index) => {
|
||||
return (
|
||||
<div key={index} className="key-value-wrap">
|
||||
<Input value={item.key} onChange={e => this.changeQuery(e, index, true)} className="key" />
|
||||
<span className="eq-symbol">=</span>
|
||||
<Input value={item.value} onChange={e => this.changeQuery(e, index)} className="value" />
|
||||
<Icon type="delete" className="icon-btn" onClick={() => this.deleteQuery(index)} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button type="primary" icon="plus" onClick={this.addQuery}>Add query parameter</Button>
|
||||
</Panel>
|
||||
<Panel header="HEADERS" key="2" >
|
||||
{
|
||||
headers.map((item, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<Input value={item.name} onChange={e => this.changeHeader(e, index, true)} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
|
||||
<Input value={item.value} onChange={e => this.changeHeader(e, index)} style={{display: 'inline-block', width: 200, margin: 10}} />
|
||||
<div key={index} className="key-value-wrap">
|
||||
<Input value={item.name} onChange={e => this.changeHeader(e, index, true)} className="key" />{' = '}
|
||||
<Input value={item.value} onChange={e => this.changeHeader(e, index)} className="value" />
|
||||
<Icon type="delete" className="icon-btn" onClick={() => this.deleteHeader(index)} />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button type="primary" icon="plus" onClick={this.addHeader} style={{margin: 10}}>Add header</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="BODY" noHovering style={{marginTop: 10}}>
|
||||
<div className="req-row params">
|
||||
<div>
|
||||
<Select style={{margin: 10, float: 'right'}} defaultValue={paramsType} onChange={this.changeParamsType} className={method === 'POST' ? 'floatfix' : 'floatfix hidden'}>
|
||||
<Option value="text">Text</Option>
|
||||
<Option value="file">File</Option>
|
||||
<Option value="form">Form</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<Button type="primary" icon="plus" onClick={this.addHeader}>Add header</Button>
|
||||
</Panel>
|
||||
<Panel
|
||||
header={
|
||||
<div style={{display: 'flex', justifyContent: 'space-between'}}>
|
||||
<div>BODY</div>
|
||||
<div onClick={e => e.stopPropagation()} style={{marginRight: 5}}>
|
||||
<Select defaultValue={paramsType} onChange={this.changeParamsType} className={method === 'POST' ? '' : 'hidden'}>
|
||||
<Option value="text">Text</Option>
|
||||
<Option value="file">File</Option>
|
||||
<Option value="form">Form</Option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
key="3"
|
||||
>
|
||||
{ method === 'POST' && paramsType !== 'form' && paramsType !== 'file' &&
|
||||
<div>
|
||||
<TextArea
|
||||
@ -468,7 +475,7 @@ export default class Run extends Component {
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button type="primary" icon="plus" onClick={this.addParams} style={{margin: 10}}>Add form parameter</Button>
|
||||
<Button type="primary" icon="plus" onClick={this.addParams}>Add form parameter</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -484,8 +491,8 @@ export default class Run extends Component {
|
||||
<div style={{margin: 10}}>GET 请求没有 Body。</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</Card>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</Card>
|
||||
|
||||
<Card title="返回结果" noHovering className="resp-part">
|
||||
|
||||
@ -2,12 +2,23 @@
|
||||
.has-plugin, .req-part, .resp-part {
|
||||
margin: 8px;
|
||||
}
|
||||
// .interface-name {
|
||||
// font-size: 24px;
|
||||
// margin-bottom: 24px;
|
||||
// }
|
||||
.url {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.key-value-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 5px 0;
|
||||
.key {
|
||||
flex-basis: 220px;
|
||||
}
|
||||
.value {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.eq-symbol {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
.icon-btn {
|
||||
cursor: pointer;
|
||||
@ -17,8 +28,3 @@
|
||||
color: #108ee9;
|
||||
}
|
||||
}
|
||||
.floatfix:after{
|
||||
content:"";
|
||||
display:table;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user