mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2025-01-24 13:14:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

Browse Source
This commit is contained in:
wenbo.dong 2017-08-15 18:23:33 +08:00
commit e5a3e0441f
2 changed files with 49 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
client/containers/Project/Interface/InterfaceList/Run.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Button, Input, Select, Card, Alert, Spin, Icon, message, Collapse } from 'antd' import { Button, Input, Select, Card, Alert, Spin, Icon, message, Collapse, Radio } from 'antd'
import { autobind } from 'core-decorators'; import { autobind } from 'core-decorators';
import crossRequest from 'cross-request'; import crossRequest from 'cross-request';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
@ -17,6 +17,8 @@ const { TextArea } = Input;
const InputGroup = Input.Group; const InputGroup = Input.Group;
const Option = Select.Option; const Option = Select.Option;
const Panel = Collapse.Panel; const Panel = Collapse.Panel;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
@connect( @connect(
state => ({ state => ({
@ -376,8 +378,6 @@ export default class Run extends Component {
} }
</div> </div>
{/*<div className="interface-name">{interfaceName}</div>*/}
<Card title="请求部分" noHovering className="req-part"> <Card title="请求部分" noHovering className="req-part">
<div className="url"> <div className="url">
<InputGroup compact style={{display: 'flex'}}> <InputGroup compact style={{display: 'flex'}}>
@ -421,7 +421,8 @@ export default class Run extends Component {
headers.map((item, index) => { headers.map((item, index) => {
return ( return (
<div key={index} className="key-value-wrap"> <div key={index} className="key-value-wrap">
<Input value={item.name} onChange={e => this.changeHeader(e, index, true)} className="key" />{' = '} <Input value={item.name} onChange={e => this.changeHeader(e, index, true)} className="key" />
<span className="eq-symbol">=</span>
<Input value={item.value} onChange={e => this.changeHeader(e, index)} className="value" /> <Input value={item.value} onChange={e => this.changeHeader(e, index)} className="value" />
<Icon type="delete" className="icon-btn" onClick={() => this.deleteHeader(index)} /> <Icon type="delete" className="icon-btn" onClick={() => this.deleteHeader(index)} />
</div> </div>
@ -447,49 +448,55 @@ export default class Run extends Component {
> >
{ method === 'POST' && paramsType !== 'form' && paramsType !== 'file' && { method === 'POST' && paramsType !== 'form' && paramsType !== 'file' &&
<div> <div>
<RadioGroup defaultValue="json">
<RadioButton value="json">JSON</RadioButton>
<RadioButton value="text">TEXT</RadioButton>
<RadioButton value="xml">XML</RadioButton>
<RadioButton value="html">HTML</RadioButton>
</RadioGroup>
<TextArea <TextArea
value={params} value={params}
style={{margin: 10}} style={{marginTop: 10}}
autosize={{ minRows: 2, maxRows: 6 }} autosize={{ minRows: 2, maxRows: 6 }}
></TextArea> ></TextArea>
<div>{paramsType}</div>
</div> </div>
} }
{ {
method === 'POST' && paramsType === 'form' && ( method === 'POST' && paramsType === 'form' &&
<div> <div>
{ {
params.map((item, index) => { params.map((item, index) => {
return ( return (
<div key={index}> <div key={index} className="key-value-wrap">
<Input value={item.key} onChange={e => this.changeParams(e, index, 'key')} style={{display: 'inline-block', width: 200, margin: 10}} /> <Input value={item.key} onChange={e => this.changeParams(e, index, 'key')} className="key" />
[<Select value={item.type} onChange={e => this.changeParams(e, index, 'type')}> <span>[</span>
<Option value="file">File</Option> <Select value={item.type} onChange={e => this.changeParams(e, index, 'type')}>
<Option value="text">Text</Option> <Option value="file">File</Option>
</Select>]{' = '} <Option value="text">Text</Option>
{item.type === 'file' ? </Select>
<Input type="file" id={'file_' + index} onChange={e => this.changeParams(e, index, 'value')} multiple style={{display: 'inline-block', width: 200, margin: 10}} /> : <span>]</span>
<Input value={item.value} onChange={e => this.changeParams(e, index, 'value')} style={{display: 'inline-block', width: 200, margin: 10}} /> <span className="eq-symbol">=</span>
} {
</div> item.type === 'file' ? <Input type="file" id={'file_' + index} onChange={e => this.changeParams(e, index, 'value')} multiple className="value" /> :
) <Input value={item.value} onChange={e => this.changeParams(e, index, 'value')} className="value" />
}) }
} <Icon type="delete" className="icon-btn" onClick={() => this.deleteParams(index)} />
<Button type="primary" icon="plus" onClick={this.addParams}>Add form parameter</Button> </div>
</div> )
) })
}
<Button type="primary" icon="plus" onClick={this.addParams}>Add form parameter</Button>
</div>
} }
{ {
method === 'POST' && paramsType === 'file' && ( method === 'POST' && paramsType === 'file' &&
<div> <div>
<Input type="file"></Input> <Input type="file"></Input>
</div> </div>
)
} }
{ {
method !== 'POST' && ( method !== 'POST' &&
<div style={{margin: 10}}>GET 请求没有 Body。</div> <div>GET 请求没有 BODY。</div>
)
} }
</Panel> </Panel>
</Collapse> </Collapse>

12
client/containers/Project/Interface/InterfaceList/View.js
View File

@ -30,17 +30,17 @@ class View extends Component {
componentDidMount() { componentDidMount() {
let that = this; let that = this;
mockEditor({ mockEditor({
container: 'req_body_json', container: 'vreq_body_json',
data: that.props.req_body_form, data: that.props.req_body_form,
onChange: function () {} onChange: function () {}
}) })
mockEditor({ mockEditor({
container: 'res_body_json', container: 'vres_body_json',
data: that.props.res_body, data: that.props.res_body,
onChange: function () {} onChange: function () {}
}) })
mockEditor({ mockEditor({
container: 'req_query_json', container: 'vreq_query_json',
data: that.props.req_query, data: that.props.req_query,
onChange: function () {} onChange: function () {}
}) })
@ -106,15 +106,15 @@ class View extends Component {
</div> </div>
<div className="colQuery"> <div className="colQuery">
<span className="colKey">Query：</span> <span className="colKey">Query：</span>
<div span={18} offset={4} id="req_query_json" style={{ minHeight: "150px" }}></div> <div span={18} offset={4} id="vreq_query_json" style={{ minHeight: "150px" }}></div>
</div> </div>
<div className="colBody"> <div className="colBody">
<span className="colKey">请求Body：</span> <span className="colKey">请求Body：</span>
<div span={18} offset={4} id="req_body_json" style={{ minHeight: "300px" }}></div> <div span={18} offset={4} id="vreq_body_json" style={{ minHeight: "300px" }}></div>
</div> </div>
<div className="colBody"> <div className="colBody">
<span className="colKey">响应Body：</span> <span className="colKey">响应Body：</span>
<div span={18} offset={4} id="res_body_json" style={{ minHeight: "300px" }}></div> <div span={18} offset={4} id="vres_body_json" style={{ minHeight: "300px" }}></div>
</div> </div>