feat: merge to params

client/components/Postman/Postman.js

@@ -1,7 +1,8 @@
 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 } from 'antd'
+
+import { Button, Input, Checkbox, Select, Alert, Spin, Icon, Collapse, Tooltip, message,  Switch, Modal, Row, Col } from 'antd'
 import { autobind } from 'core-decorators';
 import constants from '../../constants/variable.js'
 
@@ -32,7 +33,7 @@ function isJsonData(headers) {
   return isResJson;
 }
 
-// const wordList = constants.MOCK_SOURCE;
+const wordList = constants.MOCK_SOURCE;
 
 // const mockDataSource = wordList.map(item => {
 //   return <AutoComplete.Option key={item.mock} value={item.mock}>
@@ -40,6 +41,13 @@ function isJsonData(headers) {
 //   </AutoComplete.Option>
 // });
 
+const MockModalList = wordList.map((item, index) => {
+  return <Row key={index} type="flex" align="middle" className="row">
+    <Col span={6}><label>{item.mock}</label></Col>
+    <Col span={18}><Input /></Col>
+  </Row>
+})
+
 
 
 const { TextArea } = Input;
@@ -76,7 +84,8 @@ export default class Run extends Component {
     test_status: null,
     resMockTest: true,
     resStatusCode: null,
-    resStatusText: ''
+    resStatusText: '',
+    modalVisible: false
   }
 
   constructor(props) {
@@ -565,6 +574,18 @@ export default class Run extends Component {
     });
   }
 
+  // 模态框的相关操作
+  showModal = () => {
+    this.setState({
+      modalVisible: true
+    });
+  }
+  handleOk = () => {
+    this.setState({ modalVisible: false });
+  }
+  handleCancel = () => {
+    this.setState({ modalVisible: false });
+  }
 
   render() {
     const { method, domains, pathParam, pathname, query, headers, bodyForm, caseEnv, bodyType, resHeader, loading, validRes } = this.state;
@@ -597,6 +618,25 @@ export default class Run extends Component {
 
     return (
       <div className="interface-test postman">
+        <Modal
+          title={<p><Icon type="bulb" /> Basic Modal</p>}
+          visible={this.state.modalVisible}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          wrapClassName="modal-postman"
+        >
+          <div className="modal-postman-form">
+            {MockModalList}
+          </div>
+          <Row className="modal-postman-expression">
+            <Col span={6}><h3 className="title">输入值</h3></Col>
+            <Col span={18}><h3>输入值</h3></Col>
+          </Row>
+          <Row className="modal-postman-preview">
+            <Col span={6}><h3 className="title">预览</h3></Col>
+            <Col span={18}><h3>输入值</h3></Col>
+          </Row>
+        </Modal>
         <div className={hasPlugin ? null : 'has-plugin'} >
           {hasPlugin ? '' : <Alert
             message={
@@ -680,15 +720,7 @@ export default class Run extends Component {
                   <div key={index} className="key-value-wrap">
                     <Input disabled value={item.name} onChange={e => this.changePathParam(e, index, true)} className="key" />
                     <span className="eq-symbol">=</span>
-
-                    <TextArea
-                      value={item.value}
-                      onChange={e => this.changePathParam(e, index)}
-                      className="value"
-                      placeholder="参数值"
-                      autosize={true}
-                    />
-
+                    <Input addonAfter={<Icon type="setting" />} defaultValue={item.value} />
                     <Icon style={{ display: 'none' }} type="delete" className="icon-btn" onClick={() => this.deletePathParam(index)} />
                   </div>
                 )
@@ -699,6 +731,7 @@ export default class Run extends Component {
           <Panel header="QUERY PARAMETERS" key="1" className={query.length === 0 ? 'hidden' : ''}>
             {
               query.map((item, index) => {
+                  console.log(item.value);
                 return (
                   <div key={index} className="key-value-wrap">
                     <Input disabled value={item.name}  className="key" />
@@ -709,13 +742,14 @@ export default class Run extends Component {
                     }
                     <span className="eq-symbol">=</span>
 
-                    <TextArea
-                      value={item.value}
-                      onChange={e => this.changeQuery(e, index)}
+                    <Input
+                      defaultValue={item.value}
                       className="value"
+                      onChange={e => this.changeQuery(e, index)}
                       placeholder="参数值"
-                      autosize={true}
+                      addonAfter={<Icon type="bulb" onClick={this.showModal}/>}
                     />
+     
                     <Icon style={{ display: 'none' }} type="delete" className="icon-btn" onClick={() => this.deleteQuery(index)} />
                   </div>
                 )

client/components/Postman/Postman.scss

@@ -20,3 +20,33 @@
     display: flex;
   }
 }
+
+.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;
+  }
+}