feat: 输出展示部分

client/components/ModalPostman/MethodsList.js

@@ -9,18 +9,19 @@ const RadioGroup = Radio.Group;
 
 const inputComponent = (props) => {
   let index = props.index
-  return <Input size="small" placeholder="small size"  onChange={(e) => props.paramsInput(e.target.value,index)} />
+  return <Input size="small" placeholder="请输入参数" disabled={!props.disabled} onChange={(e) => props.paramsInput(e.target.value, index)} />
 }
 
 inputComponent.propTypes = {
   paramsInput: PropTypes.func,
-  index:PropTypes.number
+  index: PropTypes.number,
+  disabled: PropTypes.bool
 }
 
 const selectComponent = (props) => {
   const subname = ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'];
   let index = props.index;
-  return <Select defaultValue="sha1" style={{ width: 150 }} size="small" onChange={(e)=>props.paramsInput(e,index)}>
+  return <Select placeholder="请选择" style={{ width: 150 }} size="small" disabled={!props.disabled} onChange={(e) => props.paramsInput(e, index)}>
     {
       subname.map((item, index) => {
         return <Option value={item} key={index}>{item}</Option>
@@ -30,7 +31,8 @@ const selectComponent = (props) => {
 }
 selectComponent.propTypes = {
   paramsInput: PropTypes.func,
-  index: PropTypes.number
+  index: PropTypes.number,
+  disabled: PropTypes.bool
 }
 
 
@@ -53,9 +55,9 @@ const METHODS_LIST = [
 ]
 
 const MethodsListSource = (props) => {
-  console.log("index",props.paramsIndex);
+  // console.log("disabled",props.disabled);
   return <div>
-    {props.component && <props.component paramsInput={props.paramsInput} index={props.paramsIndex}/>}
+    {props.component && <props.component disabled={props.disabled} paramsInput={props.paramsInput} index={props.paramsIndex} />}
   </div>
 }
 
@@ -63,8 +65,9 @@ const MethodsListSource = (props) => {
 MethodsListSource.propTypes = {
   component: PropTypes.any,
   paramsInput: PropTypes.func,
-  paramsIndex: PropTypes.number
-  
+  paramsIndex: PropTypes.number,
+  disabled: PropTypes.bool
+
 }
 
 class MethodsList extends Component {
@@ -98,7 +101,7 @@ class MethodsList extends Component {
 
   // handleSelectMethod = (methodName)=>{
   //   return ()=>{
-      
+
   //   }
   // }
 
@@ -118,14 +121,20 @@ class MethodsList extends Component {
     return (
       <div className="modal-postman-form-method">
         <h3 className="methods-title title">方法</h3>
-        <RadioGroup onChange={click} value={clickValue} >
+        <RadioGroup onChange={click} value={clickValue}>
           {
             list.map((item, index) => {
               return <Row key={index} type="flex" align="middle" className="row methods-row">
                 <RadioButton value={item.name}>
                   <span>{item.name}</span>
                   <span className="input-component">
-                    {item.type && <MethodsListSource paramsInput={paramsInput} component={item.component} paramsIndex={clickIndex}/>}
+                    {item.type &&
+                      <MethodsListSource
+                        disabled={item.name === clickValue}
+                        paramsInput={paramsInput}
+                        component={item.component}
+                        paramsIndex={clickIndex} />
+                    }
                   </span>
                 </RadioButton>
 

client/components/ModalPostman/index.js

@@ -5,7 +5,6 @@ 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'
 
@@ -22,7 +21,8 @@ function closeRightTabsAndAddNewTab(arr, index, curname) {
   })
   newParamsList[index] = {
     ...newParamsList[index],
-    name: curname
+    name: curname,
+    params: []
   }
   return newParamsList;
 
@@ -40,7 +40,6 @@ class ModalPostman extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      clickValue: [],
       methodsShow: false,
       methodsShowMore: false,
       methodsList: [],
@@ -55,29 +54,25 @@ class ModalPostman extends Component {
 
   mockClick(index) {
     return (e) => {
-      // console.log(e);
       let curname = e.target.value;
       let newParamsList = closeRightTabsAndAddNewTab(this.state.methodsParamsList, index, curname)
-      // console.log(newParamsList)
       this.setState({
         methodsParamsList: newParamsList
       })
     }
   }
 
-  handleParamsInput = (e,index) => {
-    console.log('input', e);
-    console.log('index',index);
-    // this.mockClick(index+1)(e);
+  handleParamsInput = (e, index, ...params) => {
     let newParamsList = deepEqual(this.state.methodsParamsList);
-    newParamsList[index].params.push(e);
-    console.log('list',newParamsList);
+    // newParamsList[index].params.push(e);
+    newParamsList[index].params[0] = e
     this.setState({
       methodsParamsList: newParamsList
     })
   }
+
   MethodsListSource = (props) => {
-    // console.log(props.value);
+
     return <MethodsList
       click={this.mockClick(props.index)}
       clickValue={props.value}
@@ -89,8 +84,7 @@ class ModalPostman extends Component {
 
   render() {
     const { visible, handleCancel, handleOk } = this.props
-    const { clickValue, methodsParamsList } = this.state;
-
+    const {  methodsParamsList } = this.state;
     const { name } = methodsParamsList[0];
     console.log('list', this.state.methodsParamsList);
     return (
@@ -120,7 +114,16 @@ class ModalPostman extends Component {
         </Row>
         <Row className="modal-postman-expression">
           <Col span={6}><h3 className="title">输入值</h3></Col>
-          <Col span={18}><h3>{clickValue}</h3></Col>
+          <Col span={18}>
+            <span>${'{'}</span>
+            {
+              methodsParamsList.map((item, index) => {
+                return item.name && 
+                <span className="expression-item" key={index}>{item.name}({item.params})</span>
+              })
+            }
+            <span>{'}'}</span>
+          </Col>
         </Row>
         <Row className="modal-postman-preview">
           <Col span={6}><h3 className="title">预览</h3></Col>

client/components/ModalPostman/index.scss

@@ -103,5 +103,31 @@
     width: 150px;
   }
 
+  .modal-postman-expression{
+    span{
+      color: rgba(39,56,72,0.85);
+      font-size: 1.17em;
+      font-weight: 500;
+      line-height: 1.5em;
+      padding-right: 4px;
+    }
+
+    span:nth-last-child(2){
+      color: #2395f1;
+    }
+
+    // .expression-item :last-of-child{
+    //   color: #2395f1;
+    // }
+    .expression-item:after{
+      content:".";
+    }
+
+    span:nth-last-child(2):after{
+      content:"";
+    }
+
+  }
+
   
 }