mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2024-12-21 05:19:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: edit interface ci

Browse Source
This commit is contained in:
suxiaoxin 2017-08-14 21:43:06 +08:00
parent 5d1ceafc39
commit ac7f1f09f5
4 changed files with 95 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ 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 InterfaceEditForm from './InterfaceEditForm.js' import InterfaceEditForm from './InterfaceEditForm.js'
import './Edit.scss'
@connect( @connect(
state => { state => {
@ -17,11 +17,13 @@ class InterfaceEdit extends Component{
curdata: PropTypes.object curdata: PropTypes.object
} }
render(){ onSubmit = (params)=>{
console.log('edit', params)
}
return <div> render(){
<h3>Edit</h3> return <div className="interface-edit">
<InterfaceEditForm /> <InterfaceEditForm onSubmit={this.onSubmit} curdata={this.props.curdata} />
</div> </div>
} }
} }

6
client/containers/Project/Interface/InterfaceList/Edit.scss Normal file
View File

@ -0,0 +1,6 @@
.interface-edit{
padding:10px;
.interface-edit-item{
margin-bottom: 10px;
}
}

122
client/containers/Project/Interface/InterfaceList/InterfaceEditForm.js
View File

@ -18,40 +18,52 @@ const mockEditor = require('./mockEditor.js');
class InterfaceEditForm extends Component { class InterfaceEditForm extends Component {
static propTypes = { static propTypes = {
form: PropTypes.object form: PropTypes.object,
curdata: PropTypes.object,
onSubmit: PropTypes.func
} }
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { const { curdata } = this.props;
title: 'title', if (curdata.query && curdata.query.length === 0) delete curdata.query;
path: 'path', if (curdata.req_headers && curdata.req_headers.length === 0) delete curdata.req_headers;
if (curdata.req_body_form && curdata.req_body_form.length === 0) delete curdata.req_body_form;
this.state = Object.assign({
title: '',
path: '',
status: 'undone',
method: 'get', method: 'get',
query: [{ query: [{
name: 'name', name: '',
desc: 'desc', desc: '',
required: "1" required: "1"
}], }],
req_body_type: 'form', req_body_type: 'form',
req_headers: [{ req_headers: [{
name: 'Content-Type', name: '',
value: 'application/x-www-form-urlencoded', required: "1" value: '', required: "1"
}], }],
req_body_form: [{ req_body_form: [{
name: 'id', name: '',
type: 'text', type: '',
required: '1' required: ''
}], }],
res_body_type: 'json', res_body_type: 'json',
res_body: '' res_body: '',
} desc: '',
res_body_mock: ''
}, curdata)
} }
handleSubmit = (e) => { handleSubmit = (e) => {
e.preventDefault(); e.preventDefault();
this.props.form.validateFields((err, values) => { this.props.form.validateFields((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); if (values.res_body_type === 'json') values.res_body = this.state.res_body;
values.req_body_json = this.state.res_body;
this.props.onSubmit(values)
} }
}); });
} }
@ -72,8 +84,10 @@ class InterfaceEditForm extends Component {
container: 'res_body_json', container: 'res_body_json',
data: that.state.res_body, data: that.state.res_body,
onChange: function (d) { onChange: function (d) {
that.setState({ that.setState({
res_body: d.text res_body: d.text,
res_body_mock: d.mockText
}) })
} }
}) })
@ -99,8 +113,8 @@ class InterfaceEditForm extends Component {
render() { render() {
const { getFieldDecorator } = this.props.form; const { getFieldDecorator } = this.props.form;
const formItemLayout = { const formItemLayout = {
labelCol: { span: 6 }, labelCol: { span: 4 },
wrapperCol: { span: 14 } wrapperCol: { span: 18 }
}; };
const prefixSelector = getFieldDecorator('method', { const prefixSelector = getFieldDecorator('method', {
initialValue: 'GET' initialValue: 'GET'
@ -219,10 +233,12 @@ class InterfaceEditForm extends Component {
return ( return (
<Form onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit}>
<FormItem <FormItem
className="interface-edit-item"
{...formItemLayout} {...formItemLayout}
label="接口名称" label="接口名称"
> >
{getFieldDecorator('title', { {getFieldDecorator('title', {
initialValue: this.state.title,
rules: [{ rules: [{
required: true, message: '清输入接口名称!' required: true, message: '清输入接口名称!'
}] }]
@ -232,10 +248,12 @@ class InterfaceEditForm extends Component {
</FormItem> </FormItem>
<FormItem <FormItem
className="interface-edit-item"
{...formItemLayout} {...formItemLayout}
label="接口路径" label="接口路径"
> >
{getFieldDecorator('path', { {getFieldDecorator('path', {
initialValue: this.state.path,
rules: [{ rules: [{
required: true, message: '清输入接口路径!' required: true, message: '清输入接口路径!'
}] }]
@ -245,10 +263,11 @@ class InterfaceEditForm extends Component {
</FormItem> </FormItem>
<FormItem <FormItem
className="interface-edit-item"
{...formItemLayout} {...formItemLayout}
label="状态" label="状态"
> >
{getFieldDecorator('status', { initialValue: 'undone' })( {getFieldDecorator('status', { initialValue: this.state.status })(
<Select> <Select>
<Option value="done">已完成</Option> <Option value="done">已完成</Option>
<Option value="undone">未完成</Option> <Option value="undone">未完成</Option>
@ -257,23 +276,25 @@ class InterfaceEditForm extends Component {
</FormItem> </FormItem>
<FormItem <FormItem
className="interface-edit-item"
{...formItemLayout} {...formItemLayout}
label="接口描述" label="接口描述"
> >
{getFieldDecorator('desc')( {getFieldDecorator('desc', { initialValue: this.state.desc })(
<Input.TextArea placeholder="接口描述" /> <Input.TextArea placeholder="接口描述" />
)} )}
</FormItem> </FormItem>
<FormItem <FormItem
className="interface-edit-item"
{...formItemLayout} {...formItemLayout}
label="Query" label="Query"
> >
<Button onClick={() => this.addParams('query')}>添加Query参数</Button> <Button size="small" type="primary" onClick={() => this.addParams('query')}>添加Query参数</Button>
</FormItem> </FormItem>
<Row> <Row className="interface-edit-item">
<Col span={18} offset={6}> <Col span={18} offset={4}>
{QueryList} {QueryList}
</Col> </Col>
@ -281,20 +302,22 @@ class InterfaceEditForm extends Component {
<FormItem <FormItem
className="interface-edit-item"
{...formItemLayout} {...formItemLayout}
label="请求Headers" label="请求Headers"
> >
<Button onClick={() => this.addParams('req_headers')}>添加Header</Button> <Button size="small" type="primary" onClick={() => this.addParams('req_headers')}>添加Header</Button>
</FormItem> </FormItem>
<Row> <Row className="interface-edit-item">
<Col span={18} offset={6}> <Col span={18} offset={4}>
{headerList} {headerList}
</Col> </Col>
</Row> </Row>
<FormItem style={{ marginBottom: "5px" }} <FormItem
className="interface-edit-item"
{...formItemLayout} {...formItemLayout}
label="请求Body" label="请求Body"
> >
@ -311,12 +334,12 @@ class InterfaceEditForm extends Component {
</FormItem> </FormItem>
{this.props.form.getFieldValue('req_body_type') === 'form' ? {this.props.form.getFieldValue('req_body_type') === 'form' ?
<Row > <Row className="interface-edit-item">
<Col span={14} offset={6} style={{ minHeight: "50px", padding: "15px" }}> <Col span={18} offset={4} style={{ minHeight: "50px" }}>
<Row> <Row>
<Col span="24"> <Col span="24" className="interface-edit-item">
<Button onClick={() => this.addParams('req_body_form')}>添加form参数</Button> <Button size="small" type="primary" onClick={() => this.addParams('req_body_form')}>添加form参数</Button>
</Col> </Col>
@ -330,14 +353,14 @@ class InterfaceEditForm extends Component {
} }
<Row style={{ display: this.props.form.getFieldValue('req_body_type') === 'json' ? 'block' : 'none' }}> <Row className="interface-edit-item" style={{ display: this.props.form.getFieldValue('req_body_type') === 'json' ? 'block' : 'none' }}>
<Col span={14} offset={6} id="req_body_json" style={{ minHeight: "300px", padding: "15px" }}> <Col span={18} offset={4} id="req_body_json" style={{ minHeight: "300px"}}>
</Col> </Col>
</Row> </Row>
{this.props.form.getFieldValue('req_body_type') === 'file' ? {this.props.form.getFieldValue('req_body_type') === 'file' ?
<Row > <Row className="interface-edit-item" >
<Col span={14} offset={6} style={{ padding: "15px" }}> <Col span={14} offset={6}>
{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="备注信息" />
)} )}
@ -350,7 +373,7 @@ class InterfaceEditForm extends Component {
} }
{this.props.form.getFieldValue('req_body_type') === 'raw' ? {this.props.form.getFieldValue('req_body_type') === 'raw' ?
<Row> <Row>
<Col span={14} offset={6} style={{ padding: "15px" }}> <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="备注信息" />
)} )}
@ -359,7 +382,8 @@ class InterfaceEditForm extends Component {
: null : null
} }
<FormItem style={{ marginBottom: "5px" }} <FormItem
className="interface-edit-item"
{...formItemLayout} {...formItemLayout}
label="响应Body" label="响应Body"
> >
@ -374,17 +398,28 @@ class InterfaceEditForm extends Component {
)} )}
</FormItem> </FormItem>
<Row 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={14} offset={6} id="res_body_json" style={{ minHeight: "300px", padding: "15px" }}>
<Col span={18} offset={4} id="res_body_json" style={{ minHeight: "300px" }}>
</Col> </Col>
</Row> </Row>
<Row style={{ display: this.props.form.getFieldValue('res_body_type') === 'raw' ? 'block' : 'none' }}> <FormItem
<Col span={14} offset={6} style={{ padding: "15px" }}> style={{ display: this.props.form.getFieldValue('res_body_type') === 'json' ? 'block' : 'none' }}
{getFieldDecorator('req_body_other', { initialValue: this.state.res_body })( className="interface-edit-item"
{...formItemLayout}
label="mock预览"
>
<pre style={{backgroundColor: "#eee", lineHeight: "20px"}}>
{this.state.res_body_mock || " "}
</pre>
</FormItem>
<Row className="interface-edit-item" style={{ display: this.props.form.getFieldValue('res_body_type') === 'raw' ? 'block' : 'none' }}>
<Col span={18} offset={4} >
{getFieldDecorator('res_body', { initialValue: this.state.res_body })(
<Input.TextArea placeholder="备注信息" /> <Input.TextArea placeholder="备注信息" />
)} )}
</Col> </Col>
@ -394,6 +429,7 @@ class InterfaceEditForm extends Component {
<FormItem <FormItem
className="interface-edit-item"
wrapperCol={{ span: 12, offset: 6 }} wrapperCol={{ span: 12, offset: 6 }}
> >
<Button type="primary" htmlType="submit">Submit</Button> <Button type="primary" htmlType="submit">Submit</Button>

5
client/containers/Project/Interface/InterfaceList/mockEditor.js
View File

@ -76,7 +76,7 @@ function run(options) {
enableBasicAutocompletion: true, enableBasicAutocompletion: true,
enableSnippets: false, enableSnippets: false,
enableLiveAutocompletion: true, enableLiveAutocompletion: true,
useWorker: false useWorker: true
}); });
mockEditor = { mockEditor = {
curData: {}, curData: {},
@ -86,7 +86,7 @@ function run(options) {
if (typeof data === 'string') { if (typeof data === 'string') {
editor.setValue(data); editor.setValue(data);
} else if (typeof data === 'object') { } else if (typeof data === 'object') {
editor.setValue(json5.stringify(data, null, " ")) editor.setValue(JSON.stringify(data, null, " "))
} }
}, },
editor: editor editor: editor
@ -128,6 +128,7 @@ function handleJson(json) {
curData.format = true; curData.format = true;
curData.jsonData = obj; curData.jsonData = obj;
curData.mockData = Mock.mock(obj); curData.mockData = Mock.mock(obj);
curData.mockText = JSON.stringify(curData.mockData, null, " ");
} catch (e) { } catch (e) {
curData.format = e.message; curData.format = e.message;
} }