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 {
预览
输入值
-
+ */}
)
@@ -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;
+// }
+// }