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

This commit is contained in:
suxiaoxin 2017-10-26 12:01:38 +08:00
commit 005f4896f0
6 changed files with 80 additions and 24 deletions

View File

@ -165,5 +165,9 @@ export default {
{ name: '打乱数组', mock: '@shuffle' },
{ name: '协议', mock: '@protocol' }
],
IP_REGEXP: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/
IP_REGEXP: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/,
docHref: {
adv_mock_case: 'https://yapi.ymfe.org/adv_mock.html#Mock_期望',
adv_mock_script: 'https://yapi.ymfe.org/adv_mock.html#自定义_Mock_脚本'
}
}

View File

@ -6,6 +6,7 @@ import { withRouter } from 'react-router-dom';
import { Form, Switch, Button, message, Icon, Tooltip, Radio } from 'antd';
import MockCol from './MockCol/MockCol.js'
import mockEditor from 'client/containers/Project/Interface/InterfaceList/mockEditor';
import constants from '../../client/constants/variable.js'
const FormItem = Form.Item;
@ -111,7 +112,7 @@ class AdvMock extends Component {
<div style={{display: isShowCase ? 'none' : ''}}>
<Form onSubmit={this.handleSubmit}>
<FormItem
label={<span>是否开启&nbsp;<a target="_blank" rel="noopener noreferrer" href="https://yapi.ymfe.org/mock.html#高级Mock" ><Tooltip title="点击查看文档"><Icon type="question-circle-o" /></Tooltip></a></span>}
label={<span>是否开启&nbsp;<a target="_blank" rel="noopener noreferrer" href={constants.docHref.adv_mock_script} ><Tooltip title="点击查看文档"><Icon type="question-circle-o" /></Tooltip></a></span>}
{...formItemLayout}
>
<Switch checked={this.state.enable} onChange={this.onChange} checkedChildren="开" unCheckedChildren="关" />

View File

@ -1,10 +1,11 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button, Form, Input, Switch, Select, Icon, Modal, Col, Row, InputNumber } from 'antd';
import { Button, Form, Input, Switch, Select, Icon, Modal, Col, Row, InputNumber, AutoComplete } from 'antd';
import { safeAssign } from '../../../client/common.js';
import mockEditor from '../../../client/containers/Project/Interface/InterfaceList/mockEditor';
import constants from '../../../client/constants/variable.js'
import { httpCodes } from '../index.js';
import { httpCodes } from '../index.js'
import { connect } from 'react-redux'
import './CaseDesModal.scss'
@ -18,6 +19,13 @@ const formItemLayoutWithOutLabel = {
wrapperCol: { span: 12, offset: 5 }
};
@connect(
state => {
return {
currInterface: state.inter.curdata
}
}
)
@Form.create()
export default class CaseDesModal extends Component {
static propTypes = {
@ -26,13 +34,14 @@ export default class CaseDesModal extends Component {
onCancel: PropTypes.func,
onOk: PropTypes.func,
isAdd: PropTypes.bool,
visible: PropTypes.bool
visible: PropTypes.bool,
currInterface: PropTypes.object
}
state = {
headers: [],
paramsArr: [],
res_body: ''
paramsArr: []
// res_body: ''
}
constructor(props) {
@ -85,7 +94,7 @@ export default class CaseDesModal extends Component {
endProcess = caseData => {
const headers = [];
const params = {};
const { res_body } = this.state;
// const { res_body } = this.state;
caseData.headers.forEach(item => {
if (item.name) {
headers.push({
@ -101,7 +110,7 @@ export default class CaseDesModal extends Component {
})
caseData.headers = headers;
caseData.params = params;
caseData.res_body = res_body;
// caseData.res_body = res_body;
delete caseData.paramsArr;
return caseData;
}
@ -152,6 +161,20 @@ export default class CaseDesModal extends Component {
setFieldsValue({ [key]: values })
}
getParamsKey = () => {
const { req_query, req_body_form, req_body_type } = this.props.currInterface;
const keys = [];
req_query.forEach(item => {
keys.push(item.name)
})
if (req_body_type === 'form') {
req_body_form.forEach(item => {
keys.push(item.name)
})
}
return keys
}
loadBodyEditor = () => {
const that = this;
const { setFieldsValue } = this.props.form;
@ -160,9 +183,9 @@ export default class CaseDesModal extends Component {
data: that.props.caseData.res_body,
onChange: function (d) {
if (d.format !== true) return false;
that.setState({
res_body: d.text
})
// that.setState({
// res_body: d.text
// })
setFieldsValue({ res_body: d.text })
}
});
@ -175,6 +198,7 @@ export default class CaseDesModal extends Component {
const valuesTpl = (name, values, title) => {
getFieldDecorator(name)
const dataSource = name === 'headers' ? constants.HTTP_REQUEST_HEADER : this.getParamsKey();
return values.map((item, index) => (
<div key={index} className={name}>
<FormItem
@ -186,11 +210,10 @@ export default class CaseDesModal extends Component {
<Col span={10}>
<FormItem>
{getFieldDecorator(`${name}[${index}].name`, { initialValue: item.name })(
name === 'headers' ? <Select showSearch>
{constants.HTTP_REQUEST_HEADER.map(item => (
<Option value={item} key={item}>{item}</Option>
))}
</Select> : <Input />
<AutoComplete
dataSource={dataSource}
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
/>
)}
</FormItem>
</Col>
@ -291,7 +314,7 @@ export default class CaseDesModal extends Component {
initialValue: 0,
rules: [{ required: true, message: '请输入延时时间!', type: 'integer' }]
})(
<InputNumber placeholder="请输入延时时间"/>
<InputNumber placeholder="请输入延时时间" min={0}/>
)}
<span>ms</span>
</FormItem>

View File

@ -15,6 +15,6 @@
margin-top: .48rem;
margin-bottom: .16rem;
// border-left: 3px solid #2395f1;
padding-left: 8px;
padding-left: 32px;
}
}

View File

@ -3,9 +3,10 @@ import { connect } from 'react-redux'
import axios from 'axios'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom';
import { Table, Button, message, Popconfirm } from 'antd';
import { Table, Button, message, Popconfirm, Tooltip, Icon } from 'antd';
import { fetchMockCol } from '../../../client/reducer/modules/mockCol'
import { formatTime } from '../../../client/common.js';
import constants from '../../../client/constants/variable.js'
import CaseDesModal from './CaseDesModal';
@connect(
@ -67,7 +68,6 @@ export default class MockCol extends Component {
}
deleteCase = async (id) => {
console.log(id)
const interface_id = this.props.match.params.actionId;
await axios.post('/api/plugin/advmock/case/del', {id}).then(async res => {
if (res.data.errcode === 0) {
@ -98,6 +98,21 @@ export default class MockCol extends Component {
res_body: ''
}
let ipFilters = [];
let ipObj = {};
let userFilters = [];
let userObj = {};
data.forEach(item => {
ipObj[item.ip_enable ? item.ip : ''] = '';
userObj[item.username] = '';
})
ipFilters = Object.keys(Object.assign(ipObj)).map(value => {
if (!value) {
value = '无过滤'
}
return { text: value, value }
})
userFilters = Object.keys(Object.assign(userObj)).map(value => { return { text: value, value } })
const columns = [{
title: '期望名称',
dataIndex: 'name',
@ -105,11 +120,21 @@ export default class MockCol extends Component {
}, {
title: 'ip',
dataIndex: 'ip',
key: 'ip'
key: 'ip',
render: (text, recode) => {
if (!recode.ip_enable) {
text = '';
}
return text;
},
onFilter: (value, record) => (record.ip === value && record.ip_enable) || (value === '无过滤' && !record.ip_enable),
filters: ipFilters
}, {
title: '创建人',
dataIndex: 'username',
key: 'username'
key: 'username',
onFilter: (value, record) => record.username === value,
filters: userFilters
}, {
title: '编辑时间',
dataIndex: 'up_time',
@ -152,6 +177,9 @@ export default class MockCol extends Component {
caseDesModalVisible: true,
caseData: initCaseData
})}>添加期望</Button>
<a target="_blank" rel="noopener noreferrer" href={constants.docHref.adv_mock_case} style={{marginLeft: 8}} >
<Tooltip title="点击查看文档"><Icon type="question-circle-o" /></Tooltip>
</a>
</div>
<Table columns={columns} dataSource={data} pagination={false} rowKey='_id' />
<CaseDesModal

View File

@ -36,7 +36,7 @@ class interfaceController extends baseController {
* @param {Boolean} [req_headers[].required] 是否是必须默认为否
* @param {String} [req_headers[].desc] header描述
* @param {String} [req_body_type] 请求参数方式["form", "json", "text", "xml"]四种
* @param {Array} [req_params] name, desc两个参数
* @param {Array} [req_params] 路径参数 name, desc两个参数
* @param {Mixed} [req_body_form] 请求参数,如果请求方式是form参数是Array数组其他格式请求参数是字符串
* @param {String} [req_body_form[].name] 请求参数名
* @param {String} [req_body_form[].value] 请求参数值可填写生成规则mock@email随机生成一条email