diff --git a/client/components/ModalPostman/MethodsList.js b/client/components/ModalPostman/MethodsList.js new file mode 100644 index 00000000..07fbad66 --- /dev/null +++ b/client/components/ModalPostman/MethodsList.js @@ -0,0 +1,106 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Row, Input, Radio, Icon } from 'antd'; +import common from 'common/power-string.js' +import { autobind } from 'core-decorators'; + +const RadioButton = Radio.Button; +const RadioGroup = Radio.Group; +const Search = Input.Search; + +const METHODS_LIST = [ + { name: 'md5', type: false }, + { name: 'lower', type: false }, + { name: 'length', type: false }, + { name: 'substr', type: true }, + { name: 'sha', type: false, subname: ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'] }, + { name: 'base64', type: false }, + { name: 'unbase64', type: false }, + { name: 'concat', type: true }, + { name: 'lconcat', type: true }, + { name: 'upper', type: false } + +] + +// const list = METHODS_LIST.slice(0,4); + + +class MethodsList extends Component { + static propTypes = { + show: PropTypes.bool, + click: PropTypes.func, + clickValue: PropTypes.string + } + + constructor(props) { + super(props) + this.state = { + filter: '', + list: METHODS_LIST.slice(0, 4), + moreFlag: true + } + + } + + componentDidMount() { + console.log('common', common); + } + + componentWillReceiveProps(nextProps) { + // console.log("nextProps",nextProps); + if(this.props.show !==nextProps.show){ + this.unshowMore(); + } + } + + @autobind + onFilter() { + + + } + + + @autobind + showMore() { + this.setState({ + list: METHODS_LIST, + moreFlag: false + }) + + } + + @autobind + unshowMore() { + this.setState({ + list: METHODS_LIST.slice(0, 4), + moreFlag: true + }) + } + + render() { + const { list, moreFlag } = this.state; + const {click, clickValue} = this.props; + return ( +
+

方法

+ + { + list.map((item, index) => { + return + {item.name} + + }) + } + + { + moreFlag &&
更多
+ } + +
+ ) + + } + +} + +export default MethodsList; \ No newline at end of file diff --git a/client/components/ModalPostman/MockList.js b/client/components/ModalPostman/MockList.js new file mode 100644 index 00000000..ff8be446 --- /dev/null +++ b/client/components/ModalPostman/MockList.js @@ -0,0 +1,81 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { Row, Input, Radio } from 'antd'; +import constants from '../../constants/variable.js' +import { autobind } from 'core-decorators'; +const wordList = constants.MOCK_SOURCE; +const RadioButton = Radio.Button; +const RadioGroup = Radio.Group; +const Search = Input.Search; + + +class MockList extends Component { + static propTypes = { + click: PropTypes.func, + clickValue: PropTypes.string + + } + + constructor(props) { + super(props) + this.state = { + filter: '', + list: [] + } + + } + + componentDidMount() { + this.setState({ + list: wordList + }) + } + + @autobind + onFilter(e) { + + const list = wordList.filter(item => { + return item.mock.indexOf(e.target.value) !== -1 + }); + this.setState({ + filter: e.target.value, + list: list + }) + } + + @autobind + onSearch(v){ + console.log(v); + this.props.click(); + } + + render() { + const { list, filter} = this.state; + const {click, clickValue} = this.props; + return ( +
+

mock数据

+ + + { + list.map((item, index) => { + return + {item.mock} + + }) + } + +
+ ) + + } + +} + +export default MockList; \ No newline at end of file diff --git a/client/components/ModalPostman/index.js b/client/components/ModalPostman/index.js new file mode 100644 index 00000000..ea253b52 --- /dev/null +++ b/client/components/ModalPostman/index.js @@ -0,0 +1,122 @@ +import React, { Component } from 'react' +// import { connect } from 'react-redux' +// import axios from 'axios' +import PropTypes from 'prop-types' +import './index.scss' +// import { withRouter } from 'react-router-dom'; +import { Modal, Row, Col, Icon } from 'antd'; +import { autobind } from 'core-decorators'; +import MockList from './MockList.js'; +import MethodsList from './MethodsList.js' + + +class ModalPostman extends Component { + static propTypes = { + visible: PropTypes.bool, + handleCancel: PropTypes.func, + handleOk: PropTypes.func + + } + + constructor(props) { + super(props) + this.state = { + clickValue: '', + methodsShow: false, + methodsShowMore: false, + arr: [], + count: [] + } + + } + + mockClick(index) { + + return (e) => { + this.setState({ + clickValue: e.target.value + }) + if (index === -1) { + this.setState({ + arr: [] + }) + this.createArrList([]); + } else { + let newArr = [].concat(this.state.arr); + newArr.splice(index + 1, newArr.length - index - 1) + this.setState({ + arr: newArr + }) + this.createArrList(newArr) + + } + } + + } + + + createArrList(arr) { + // let arr = []; + const ListSource = (props) => { + console.log(props) + return + } + // this.state.arr.push(ListSource) + this.setState({ + arr: [].concat(arr, ListSource) + }) + + } + + + render() { + const { visible, handleCancel, handleOk } = this.props + const { clickValue, count } = this.state; + console.log('count', count); + return ( + 高级参数设置

} + visible={visible} + onOk={handleOk} + onCancel={handleCancel} + wrapClassName="modal-postman" + width={800} + > + + + + +

变量

+ + { + this.state.arr.map((ListSourceComponent, index) => { + return + + + }) + + } + {/* + { + methodsShow ? :
没有值
+ } + */} +
+ +

输入值

+

{clickValue}

+
+ +

预览

+

输入值

+
+
+ ) + } +} + +export default ModalPostman; \ No newline at end of file diff --git a/client/components/ModalPostman/index.scss b/client/components/ModalPostman/index.scss new file mode 100644 index 00000000..6769c96e --- /dev/null +++ b/client/components/ModalPostman/index.scss @@ -0,0 +1,87 @@ +.modal-postman { + .ant-modal-body { + padding: 0; + } + .ant-modal-footer { + background-color: #f5f5f5; + } + .modal-postman-form { + padding: 16px; + padding-top: 0; + max-height: 300px; + overflow-y: scroll; + .ant-radio-group{ + width:100%; + } + + .mock-search { + padding-right: 8px; + margin-bottom: 16px; + } + .mock-checked{ + color:#fff; + background-color:#2395f1; + width:100% + + + } + .row { + margin-bottom: 8px; + width:100%; + .ant-radio-button-wrapper{ + border :0 + } + .ant-radio-button-wrapper-checked{ + color:#fff; + background-color:#2395f1; + width:100% + } + } + } + .modal-postman-expression, .modal-postman-preview { + border-top: 1px solid #e9e9e9; + padding: 8px 16px; + } + .modal-postman-expression { + } + .modal-postman-preview { + background-color: #f5f5f5; + } + .title { + border-left: 3px solid #2395f1; + padding-left: 8px; + } + + .modal-postman-form-mock{ + max-height: 200px; + overflow-y: scroll; + } + + .mock-title, .methods-title{ + margin-bottom: 8px + } + .modal-postman-form-method{ + margin-left: 8px; + max-height: 300px; + overflow: auto; + } + + .methods-row{ + // border-bottom: 1px solid #e9e9e9; + } + + .modal-postman-col{ + border-right: 1px solid #e9e9e9; + padding-top: 16px; + } + + .show-more{ + color: #2395f1; + padding-left: 8px; + } + + .ant-row-flex { + flex-wrap: nowrap + } + +} diff --git a/client/components/Postman/Postman.js b/client/components/Postman/Postman.js index 024467f3..31833bae 100755 --- a/client/components/Postman/Postman.js +++ b/client/components/Postman/Postman.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import Mock from 'mockjs' -import { Button, Input, Checkbox, Select, Alert, Spin, Icon, Collapse, Tooltip, message, Switch, Modal, Row, Col } from 'antd' +import { Button, Input, Checkbox, Select, Alert, Spin, Icon, Collapse, Tooltip, message, Switch } from 'antd' import { autobind } from 'core-decorators'; import constants from '../../constants/variable.js' @@ -11,8 +11,9 @@ import URL from 'url'; const MockExtra = require('common/mock-extra.js') import './Postman.scss'; import json5 from 'json5' -import { isJson, handleJson, handleParamsValue } from '../../common.js' +import { isJson, handleJson, handleParamsValue } from '../../common.js' import _ from "underscore" +import ModalPostman from '../ModalPostman/index.js' function json_parse(data) { try { @@ -33,7 +34,7 @@ function isJsonData(headers) { return isResJson; } -const wordList = constants.MOCK_SOURCE; +// const wordList = constants.MOCK_SOURCE; // const mockDataSource = wordList.map(item => { // return @@ -41,12 +42,12 @@ const wordList = constants.MOCK_SOURCE; // // }); -const MockModalList = wordList.map((item, index) => { - return - - - -}) +// const MockModalList = wordList.map((item, index) => { +// return +// +// +// +// }) @@ -130,7 +131,7 @@ export default class Run extends Component { } } - handleValue (val) { + handleValue(val) { return handleParamsValue(val, {}); } @@ -211,18 +212,18 @@ export default class Run extends Component { return; } const { headers, bodyForm, pathParam, bodyOther, caseEnv, domains, method, pathname, query, bodyType } = this.state; - + let path = pathname; - + pathParam.forEach(item => { path = path.replace(`:${item.name}`, this.handleValue(item.value) || `:${item.name}`); }); - + const urlObj = URL.parse(URL.resolve(_.find(domains, item => item.name === caseEnv).domain, '.' + path)); let pathQuery = {}; - urlObj.query && urlObj.query.split('&').forEach(item=>{ - if(item){ + urlObj.query && urlObj.query.split('&').forEach(item => { + if (item) { item = item.split('='); pathQuery[item[0]] = item[1]; } @@ -235,16 +236,16 @@ export default class Run extends Component { query: Object.assign(pathQuery, this.getQueryObj(query)) }); let reqBody; - if(bodyType === 'form'){ + if (bodyType === 'form') { reqBody = this.arrToObj(bodyForm) - }else{ + } else { reqBody = isJson(bodyOther); - if(reqBody === false){ - if(bodyType === 'json'){ + if (reqBody === false) { + if (bodyType === 'json' && HTTP_METHOD[method].request_body) { return message.error('请求 Body 的 json 格式有误') - } + } reqBody = bodyOther; - }else{ + } else { reqBody = handleJson(reqBody, this.handleValue) } @@ -368,8 +369,8 @@ export default class Run extends Component { @autobind changeQuery(v, index, key) { - v = v.target.value key = key || 'value'; + v = v.target.value; const query = json_parse(JSON.stringify(this.state.query)); if (key == 'enable') { query[index].enable = v; @@ -600,8 +601,8 @@ export default class Run extends Component { const pathObj = URL.parse(path); path = pathObj.pathname; let pathQuery = {}; - pathObj.query && pathObj.query.split('&').forEach(item=>{ - if(item){ + pathObj.query && pathObj.query.split('&').forEach(item => { + if (item) { item = item.split('='); pathQuery[item[0]] = item[1]; } @@ -618,7 +619,13 @@ export default class Run extends Component { return (
- + + {/* Basic Modal

} visible={this.state.modalVisible} onOk={this.handleOk} @@ -636,7 +643,7 @@ export default class Run extends Component {

预览

输入值

-
+
*/}
{hasPlugin ? '' : this.changePathParam(e, index, true)} className="key" /> = - } defaultValue={item.value} /> + } defaultValue={item.value} onChange={e => this.changePathParam(e, index, false)} /> this.deletePathParam(index)} />
) @@ -731,10 +738,10 @@ export default class Run extends Component { { query.map((item, index) => { - console.log(item.value); + console.log(item.value); return (
- +   {item.required == 1 ? enable : @@ -747,9 +754,9 @@ export default class Run extends Component { className="value" onChange={e => this.changeQuery(e, index)} placeholder="参数值" - addonAfter={} + addonAfter={} /> - + this.deleteQuery(index)} />
) diff --git a/client/components/Postman/Postman.scss b/client/components/Postman/Postman.scss index 19313131..ef91a57f 100755 --- a/client/components/Postman/Postman.scss +++ b/client/components/Postman/Postman.scss @@ -21,32 +21,32 @@ } } -.modal-postman { - .ant-modal-body { - padding: 0; - } - .ant-modal-footer { - background-color: #f5f5f5; - } - .modal-postman-form { - padding: 16px; - max-height: 300px; - overflow-y: scroll; - .row { - margin-bottom: 8px; - } - } - .modal-postman-expression, .modal-postman-preview { - border-top: 1px solid #e9e9e9; - padding: 8px 16px; - } - .modal-postman-expression { - } - .modal-postman-preview { - background-color: #f5f5f5; - } - .title { - border-left: 3px solid #2395f1; - padding-left: 8px; - } -} +// .modal-postman { +// .ant-modal-body { +// padding: 0; +// } +// .ant-modal-footer { +// background-color: #f5f5f5; +// } +// .modal-postman-form { +// padding: 16px; +// max-height: 300px; +// overflow-y: scroll; +// .row { +// margin-bottom: 8px; +// } +// } +// .modal-postman-expression, .modal-postman-preview { +// border-top: 1px solid #e9e9e9; +// padding: 8px 16px; +// } +// .modal-postman-expression { +// } +// .modal-postman-preview { +// background-color: #f5f5f5; +// } +// .title { +// border-left: 3px solid #2395f1; +// padding-left: 8px; +// } +// }