feat: edit interface add auto header

This commit is contained in:
suxiaoxin 2017-08-15 14:49:02 +08:00
parent f8bb4335ef
commit 17fcb8c418
3 changed files with 52 additions and 49 deletions

View File

@ -67,13 +67,31 @@ class InterfaceEditForm extends Component {
if (!err) { if (!err) {
if (values.res_body_type === 'json') values.res_body = this.state.res_body; if (values.res_body_type === 'json') values.res_body = this.state.res_body;
values.req_body_json = this.state.res_body; values.req_body_json = this.state.res_body;
let isfile = false;
if(values.req_body_type === 'form'){
values.req_body_form.forEach((item)=>{
if(item.type === 'file'){
isfile = true;
}
})
values.req_headers.filter( (item)=>{
item.name !== 'Content-Type'
})
values.req_headers.unshift({
name: 'Content-Type',
value: isfile? 'multipart/form-data': 'application/x-www-form-urlencoded'
})
}
this.props.onSubmit(values) this.props.onSubmit(values)
} }
}); });
} }
componentDidMount() { componentDidMount() {
let that = this; let that = this, mockPreview, resBodyEditor;
mockEditor({ mockEditor({
container: 'req_body_json', container: 'req_body_json',
data: that.state.req_body_json, data: that.state.req_body_json,
@ -84,11 +102,11 @@ class InterfaceEditForm extends Component {
} }
}) })
let resBodyEditor = mockEditor({ resBodyEditor = mockEditor({
container: 'res_body_json', container: 'res_body_json',
data: that.state.res_body, data: that.state.res_body,
onChange: function (d) { onChange: function (d) {
mockPreview.editor.setValue(d.mockText)
that.setState({ that.setState({
res_body: d.text, res_body: d.text,
res_body_mock: d.mockText res_body_mock: d.mockText
@ -96,11 +114,11 @@ class InterfaceEditForm extends Component {
} }
}) })
that.setState({ mockPreview = mockEditor({
res_body_mock: resBodyEditor.curData.mockText container: 'mock-preview',
data: resBodyEditor.curData.mockText,
readOnly: true
}) })
} }
addParams = (name) => { addParams = (name) => {
@ -267,18 +285,18 @@ class InterfaceEditForm extends Component {
{getFieldDecorator('method', { {getFieldDecorator('method', {
initialValue: 'GET' initialValue: 'GET'
})( })(
<Select style={{ width: "75px" }}> <Select style={{ width: "15%" }}>
<Option value="GET">GET</Option> <Option value="GET">GET</Option>
<Option value="POST">POST</Option> <Option value="POST">POST</Option>
<Option value="PUT">PUT</Option> <Option value="PUT">PUT</Option>
<Option value="DELETE">DELETE</Option> <Option value="DELETE">DELETE</Option>
</Select> </Select>
)} )}
<Input value={this.props.basepath} readOnly onChange={() => { }} style={{ width: '100px', marginRight: "10px", marginLeft: "10px" }} /> <Input value={this.props.basepath} readOnly onChange={() => { }} style={{ width: '25%'}} />
{getFieldDecorator('path', { {getFieldDecorator('path', {
initialValue: this.state.path initialValue: this.state.path
})( })(
<Input placeholder="/path" style={{ width: '350px' }} /> <Input placeholder="/path" style={{ width: '60%' }} />
)} )}
</InputGroup> </InputGroup>
@ -383,7 +401,7 @@ class InterfaceEditForm extends Component {
{this.props.form.getFieldValue('req_body_type') === 'file' ? {this.props.form.getFieldValue('req_body_type') === 'file' ?
<Row className="interface-edit-item" > <Row className="interface-edit-item" >
<Col span={14} offset={6}> <Col span={18} offset={4}>
{getFieldDecorator('req_body_other', { initialValue: this.state.req_body_other })( {getFieldDecorator('req_body_other', { initialValue: this.state.req_body_other })(
<Input.TextArea placeholder="备注信息" /> <Input.TextArea placeholder="备注信息" />
)} )}
@ -423,8 +441,8 @@ class InterfaceEditForm extends Component {
</FormItem> </FormItem>
<Row className="interface-edit-item" style={{ display: this.props.form.getFieldValue('res_body_type') === 'json' ? 'block' : 'none' }}> <Row className="interface-edit-item" style={{ display: this.props.form.getFieldValue('res_body_type') === 'json' ? 'block' : 'none' }}>
<Col span={18} offset={4} id="res_body_json" style={{ minHeight: "300px" }}> <Col span={17} offset={4} >
<div id="res_body_json" style={{ minHeight: "300px" }} ></div>
</Col> </Col>
</Row> </Row>
@ -443,16 +461,16 @@ class InterfaceEditForm extends Component {
{...formItemLayout} {...formItemLayout}
label="预览" label="预览"
> >
<pre style={{ backgroundColor: "#eee", lineHeight: "20px" }}> <div id="mock-preview" style={{ backgroundColor: "#eee", lineHeight: "20px", minHeight: "300px" }}>
{this.state.res_body_mock || " "}
</pre> </div>
</FormItem> </FormItem>
<Row className="interface-edit-item" style={{ display: this.props.form.getFieldValue('res_body_type') === 'raw' ? 'block' : 'none' }}> <Row className="interface-edit-item" style={{ display: this.props.form.getFieldValue('res_body_type') === 'raw' ? 'block' : 'none' }}>
<Col span={18} offset={4} > <Col span={18} offset={4} >
{getFieldDecorator('res_body', { initialValue: this.state.res_body })( {getFieldDecorator('res_body', { initialValue: this.state.res_body })(
<Input.TextArea placeholder="备注信息" /> <Input.TextArea style={{minHeight: "150px"}} placeholder="备注信息" />
)} )}
</Col> </Col>

View File

@ -1,4 +1,3 @@
<<<<<<< HEAD
import '../interface.scss' import '../interface.scss'
import React, { Component } from 'react' import React, { Component } from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
@ -84,32 +83,3 @@ View.defaultProps = {
} }
export default View export default View
=======
import React,{Component} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux';
@connect(
state => {
return {
curdata: state.inter.curdata
}
}
)
class InterfaceView extends Component{
static propTypes = {
curdata: PropTypes.object
}
render(){
console.log(this.props.curdata)
let view = JSON.stringify(this.props.curdata, null, " ");
return <pre>
{view}
</pre>
}
}
export default InterfaceView;
>>>>>>> fe76f992f0b0251fce75b3fb564ace43565ab8b4

View File

@ -67,10 +67,15 @@ function run(options) {
wordList.push(options.wordList); wordList.push(options.wordList);
} }
data = options.data || ''; data = options.data || '';
options.readOnly = options.readOnly || false;
editor = ace.edit(container) editor = ace.edit(container)
editor.$blockScrolling = Infinity; editor.$blockScrolling = Infinity;
editor.getSession().setMode('ace/mode/javascript'); editor.getSession().setMode('ace/mode/javascript');
//editor.renderer.setShowGutter(true);
if(options.readOnly === true){
editor.setReadOnly(true);
}
editor.setTheme('ace/theme/xcode'); editor.setTheme('ace/theme/xcode');
editor.setOptions({ editor.setOptions({
enableBasicAutocompletion: true, enableBasicAutocompletion: true,
@ -134,5 +139,15 @@ function handleJson(json) {
} }
} }
/**
* mockEditor({
container: 'req_body_json', //dom的id
data: that.state.req_body_json, //初始化数据
onChange: function (d) {
that.setState({
req_body_json: d.text
})
}
})
*/
module.exports = run; module.exports = run;