diff --git a/client/common.js b/client/common.js index 36da7fe5..54801966 100755 --- a/client/common.js +++ b/client/common.js @@ -1,7 +1,9 @@ import React from 'react'; import moment from 'moment'; -import constants from './constants/variable'; +import constants from './constants/variable' import Mock from 'mockjs' +import json5 from 'json5' +import MockExtra from 'common/mock-extra.js' const Roles = { 0 : 'admin', @@ -194,6 +196,10 @@ function handleMockWord(word) { return Mock.mock(word); } +exports.getMockText = (mockTpl) => { + return JSON.stringify(Mock.mock(MockExtra(json5.parse(mockTpl), {})), null, " ") +} + /** * 合并后新的对象属性与 Obj 一致，nextObj 有对应属性则取 nextObj 属性值，否则取 Obj 属性值 * @param {Object} Obj 旧对象 diff --git a/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.js b/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.js index f5df0600..d84057ad 100644 --- a/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.js +++ b/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.js @@ -11,6 +11,8 @@ import './CaseDesModal.scss' const Option = Select.Option; const FormItem = Form.Item; +// const RadioButton = Radio.Button; +// const RadioGroup = Radio.Group; const formItemLayout = { labelCol: { span: 5 }, wrapperCol: { span: 12 } @@ -40,7 +42,8 @@ export default class CaseDesModal extends Component { state = { headers: [], - paramsArr: [] + paramsArr: [], + paramsForm: 'form' } constructor(props) { @@ -48,6 +51,11 @@ export default class CaseDesModal extends Component { } preProcess = caseData => { + try { + caseData = JSON.parse(JSON.stringify(caseData)) + } catch (error) { + console.log(error) + } // caseModel // const a = { // interface_id: { type: Number, required: true }, @@ -74,14 +82,20 @@ export default class CaseDesModal extends Component { deplay: 0, headers: [{name: '', value: ''}], paramsArr: [{name: '', value: ''}], + params: '', res_body: '' } - const paramsArr = caseData.params && Object.keys(caseData.params).length ? Object.keys(caseData.params).map(key => { return { name: key, value: caseData.params[key] } + }).filter(item => { + if (typeof item.value === 'object') { + this.setState({ paramsForm: 'json' }) + } + return typeof item.value !== 'object' }) : [{name: '', value: ''}]; const headers = caseData.headers && caseData.headers.length ? caseData.headers : [{name: '', value: ''}]; caseData.code = ''+caseData.code; + caseData.params = JSON.stringify(caseData.params, null, 2); this.setState({ headers, paramsArr @@ -93,6 +107,7 @@ export default class CaseDesModal extends Component { endProcess = caseData => { const headers = []; const params = {}; + const { paramsForm } = this.state; caseData.headers.forEach(item => { if (item.name) { headers.push({ @@ -107,20 +122,29 @@ export default class CaseDesModal extends Component { } }) caseData.headers = headers; - caseData.params = params; + if (paramsForm === 'form') { + caseData.params = params; + } else { + try { + caseData.params = JSON.parse(caseData.params) + } catch (error) { + console.log(error) + } + } delete caseData.paramsArr; return caseData; } componentDidMount() { this.props.form.setFieldsValue(this.preProcess(this.props.caseData)) - this.shouldLoadBodyEditor = true + this.shouldLoadEditor = true } componentDidUpdate() { - if (this.shouldLoadBodyEditor) { + if (this.shouldLoadEditor) { this.loadBodyEditor() - this.shouldLoadBodyEditor = false + this.loadParamsEditor() + this.shouldLoadEditor = false } } @@ -130,13 +154,13 @@ export default class CaseDesModal extends Component { this.props.visible !== nextProps.visible ) { this.props.form.setFieldsValue(this.preProcess(nextProps.caseData)) - this.shouldLoadBodyEditor = true + this.shouldLoadEditor = true } } handleOk = () => { const form = this.props.form; - form.validateFields((err, values) => { + form.validateFieldsAndScroll((err, values) => { if (!err) { this.props.onOk(this.endProcess(values)); } @@ -184,17 +208,39 @@ export default class CaseDesModal extends Component { } }); } + loadParamsEditor = () => { + const that = this; + const { setFieldsValue } = this.props.form; + this.props.visible && mockEditor({ + container: 'case_modal_params', + data: that.props.caseData.params, + onChange: function (d) { + if (d.format !== true) return false; + setFieldsValue({ params: d.text }) + } + }); + } + + jsonValidator = (rule, value, callback) => { + try { + JSON.parse(value) + callback() + } catch (error) { + callback(new Error()) + } + } render() { const { getFieldDecorator, getFieldValue } = this.props.form; const { isAdd, visible, onCancel } = this.props; - const { headers, paramsArr } = this.state; + const { headers, paramsArr, paramsForm } = this.state; const valuesTpl = (name, values, title) => { getFieldDecorator(name) const dataSource = name === 'headers' ? constants.HTTP_REQUEST_HEADER : this.getParamsKey(); + const display = (name === 'paramsArr' && paramsForm === 'json') ? 'none': '' return values.map((item, index) => ( -
+
)) } + getFieldDecorator('params') return ( onCancel()} + afterClose={() => this.setState({paramsForm: 'form'})} className="case-des-modal" >
@@ -278,14 +326,56 @@ export default class CaseDesModal extends Component {
+
+ + { + this.setState({ paramsForm: bool ? 'json' : 'form' }, () => { + if (paramsForm === 'json') { + this.loadParamsEditor() + } + }) + }} + /> + { + // this.setState({ paramsForm: e.target.value })} + // > + // Form + // JSON + // + } + +
{ valuesTpl('paramsArr', paramsArr, '参数过滤') } - + + +
+ + {getFieldDecorator('params', { + rules: [{ validator: this.jsonValidator, message: '请输入正确的 JSON！' }] + })( + + )} + +

响应

{getFieldDecorator('res_body', { - rules: [{ required: true, message: '请输入返回 JSON！' }] + rules: [{ validator: this.jsonValidator, message: '请输入正确的返回 JSON！' }] })( - + )} diff --git a/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.scss b/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.scss index 33147588..6796275d 100644 --- a/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.scss +++ b/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.scss @@ -6,7 +6,7 @@ .ip-filter .ip>.ant-form-item, .ip-filter .ip-switch>.ant-form-item { margin-bottom: 0; } - .headers>.ant-form-item, .paramsArr>.ant-form-item { + .headers>.ant-form-item, .paramsArr>.ant-form-item, .params-form>.ant-form-item { margin-bottom: 0; } .sub-title { diff --git a/exts/yapi-plugin-advanced-mock/MockCol/MockCol.js b/exts/yapi-plugin-advanced-mock/MockCol/MockCol.js index e593bb6b..33e4fadb 100644 --- a/exts/yapi-plugin-advanced-mock/MockCol/MockCol.js +++ b/exts/yapi-plugin-advanced-mock/MockCol/MockCol.js @@ -4,9 +4,9 @@ import axios from 'axios' import PropTypes from 'prop-types' import { withRouter } from 'react-router-dom'; 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 { fetchMockCol } from 'client/reducer/modules/mockCol' +import { formatTime, getMockText } from 'client/common.js'; +import constants from 'client/constants/variable.js' import CaseDesModal from './CaseDesModal'; @connect( @@ -85,17 +85,17 @@ export default class MockCol extends Component { render() { - const data = this.props.list; + const { list: data, currInterface } = this.props; const { isAdd, caseData, caseDesModalVisible } = this.state; const initCaseData = { ip: '', ip_enable: false, - name: this.props.currInterface.title, + name: currInterface.title, code: '200', deplay: 0, headers: [{name: '', value: ''}], paramsArr: [{name: '', value: ''}], - res_body: '' + res_body: getMockText(currInterface.res_body) } let ipFilters = [];