feat: 参数输入部分

client/components/ModalPostman/MethodsList.js

@@ -8,16 +8,19 @@ const RadioGroup = Radio.Group;
 
 
 const inputComponent = (props) => {
-  return <Input size="small" placeholder="small size" onChange={props.input} />
+  let index = props.index
+  return <Input size="small" placeholder="small size"  onChange={(e) => props.paramsInput(e.target.value,index)} />
 }
 
 inputComponent.propTypes = {
-  input: PropTypes.func
+  paramsInput: PropTypes.func,
+  index:PropTypes.number
 }
 
 const selectComponent = (props) => {
   const subname = ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'];
-  return <Select defaultValue="sha1" style={{ width: 150 }} size="small" onChange={props.input}>
+  let index = props.index;
+  return <Select defaultValue="sha1" style={{ width: 150 }} size="small" onChange={(e)=>props.paramsInput(e,index)}>
     {
       subname.map((item, index) => {
         return <Option value={item} key={index}>{item}</Option>
@@ -26,13 +29,14 @@ const selectComponent = (props) => {
   </Select>
 }
 selectComponent.propTypes = {
-    input: PropTypes.func
+  paramsInput: PropTypes.func,
+  index: PropTypes.number
 }
 
 
-const handleChange = (v) => {
-  console.log('value', v);
-}
+// const handleChange = (v) => {
+//   console.log('value', v);
+// }
 
 const METHODS_LIST = [
   { name: 'md5', type: false },
@@ -49,16 +53,18 @@ const METHODS_LIST = [
 ]
 
 const MethodsListSource = (props) => {
-  console.log('props', props);
+  console.log("index",props.paramsIndex);
   return <div>
-    {props.component && <props.component input={props.input} />}
+    {props.component && <props.component paramsInput={props.paramsInput} index={props.paramsIndex}/>}
   </div>
 }
 
 
 MethodsListSource.propTypes = {
   component: PropTypes.any,
-  input: PropTypes.func
+  paramsInput: PropTypes.func,
+  paramsIndex: PropTypes.number
+  
 }
 
 class MethodsList extends Component {
@@ -66,7 +72,8 @@ class MethodsList extends Component {
     show: PropTypes.bool,
     click: PropTypes.func,
     clickValue: PropTypes.string,
-    paramsInput:PropTypes.func
+    paramsInput: PropTypes.func,
+    clickIndex: PropTypes.number
   }
 
   constructor(props) {
@@ -78,16 +85,6 @@ class MethodsList extends Component {
     }
   }
 
-  // componentDidMount() {
-  //   console.log('common', common);
-  // }
-
-  // componentWillReceiveProps(nextProps) {
-  //   // console.log("nextProps",nextProps);
-  //   if (this.props.show !== nextProps.show) {
-  //     this.unshowMore();
-  //   }
-  // }
 
 
 
@@ -99,6 +96,12 @@ class MethodsList extends Component {
 
   }
 
+  // handleSelectMethod = (methodName)=>{
+  //   return ()=>{
+      
+  //   }
+  // }
+
 
   // unshowMore = () => {
   //   this.setState({
@@ -109,19 +112,20 @@ class MethodsList extends Component {
 
   render() {
     const { list, moreFlag } = this.state;
-    const { click, paramsInput } = this.props;
-    console.log('input',paramsInput);
+    const { click, paramsInput, clickValue, clickIndex } = this.props;
+    console.log('click', clickValue);
+
     return (
       <div className="modal-postman-form-method">
         <h3 className="methods-title title">方法</h3>
-        <RadioGroup onChange={click}>
+        <RadioGroup onChange={click} value={clickValue} >
           {
             list.map((item, index) => {
-              return <Row key={index} type="flex" align="middle" className="row methods-row" >
+              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 input={paramsInput} component={item.component} />}
+                    {item.type && <MethodsListSource paramsInput={paramsInput} component={item.component} paramsIndex={clickIndex}/>}
                   </span>
                 </RadioButton>
 

client/components/ModalPostman/index.js

@@ -9,17 +9,26 @@ import { Modal, Row, Col, Icon } from 'antd';
 import MockList from './MockList.js';
 import MethodsList from './MethodsList.js'
 
-// 
-function deepEqual(state){
+// 深拷贝
+function deepEqual(state) {
   return JSON.parse(JSON.stringify(state))
 }
 
-function closeRightTabsAndAddNewTab(arr,index){
+function closeRightTabsAndAddNewTab(arr, index, curname) {
   let newParamsList = [].concat(arr);
-  return newParamsList.splice(index, newParamsList.length - index);
+  newParamsList.splice(index + 1, newParamsList.length - index);
+  newParamsList.push({
+    name: '', params: []
+  })
+  newParamsList[index] = {
+    ...newParamsList[index],
+    name: curname
+  }
+  return newParamsList;
 
 }
 
+
 class ModalPostman extends Component {
   static propTypes = {
     visible: PropTypes.bool,
@@ -36,95 +45,54 @@ class ModalPostman extends Component {
       methodsShowMore: false,
       methodsList: [],
       methodsParamsList: [{
-        name:'',
-        params:[],
-        component:''
-      }
-      ]
+        name: '',
+        params: [],
+        type: 'dataSource'
+      }]
     }
 
   }
 
   mockClick(index) {
     return (e) => {
-      if (index === 0) {
-        // let firstParamsItem = {};
-        let firstParamsItem = Object.assign({},
-          {
-            name: e.target.value,
-            params: [],
-            component: this.createArrList([])
-          });
-        this.setState({
-          clickValue: [].concat([], e.target.value),
-          methodsList: [],
-          methodsParamsList: [].concat([], firstParamsItem)
-        })
-        this.createArrList([]);
-
-      } else {
-        let newArr = [].concat(this.state.methodsList);
-        let newValue = [].concat(this.state.clickValue);
-        newArr.splice(index, newArr.length - index)
-        newValue.splice(index, newValue.length - index)
-
-        let newParamsList = [].concat(this.state.methodsParamsList);
-        newParamsList.splice(index, newParamsList.length - index);
-
-        let paramsItem = Object.assign({},
-          {
-            name: e.target.value,
-            params: [],
-            component: this.createArrList([])
-          });
-
-        var a = JSON.parse(JSON.stringify(this.state.methodsParamsList))
-          a[index].name = 1
-          this.
-
-        this.setState({
-          clickValue: [].concat(newValue, e.target.value),
-          methodsList: newArr,
-          methodsParamsList: [].concat(newParamsList, paramsItem)
-        })
-        this.createArrList(newArr)
-
-      }
+      // 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)=>{
-    console.log('input',e);
-
-  }
-
-
-  createArrList(arr) {
-    const ListSource = (props) => {
-      return <MethodsList
-        show={this.state.methodsShowMore}
-        click={this.mockClick(props.index)}
-        clickValue={this.state.clickValue[props.index]}
-        paramsInput={this.handleParamsInput}
-      />
-    }
-
+  handleParamsInput = (e,index) => {
+    console.log('input', e);
+    console.log('index',index);
+    // this.mockClick(index+1)(e);
+    let newParamsList = deepEqual(this.state.methodsParamsList);
+    newParamsList[index].params.push(e);
+    console.log('list',newParamsList);
     this.setState({
-      methodsList: [].concat(arr, ListSource)
+      methodsParamsList: newParamsList
     })
-
-    return ListSource;
-
+  }
+  MethodsListSource = (props) => {
+    // console.log(props.value);
+    return <MethodsList
+      click={this.mockClick(props.index)}
+      clickValue={props.value}
+      paramsInput={this.handleParamsInput}
+      clickIndex={props.index}
+    />
   }
 
 
   render() {
     const { visible, handleCancel, handleOk } = this.props
     const { clickValue, methodsParamsList } = this.state;
-    console.log('state', this.state);
-    const {name} = methodsParamsList[0];
-    console.log('list',name);
+
+    const { name } = methodsParamsList[0];
+    console.log('list', this.state.methodsParamsList);
     return (
       <Modal
         title={<p><Icon type="edit" /> 高级参数设置</p>}
@@ -136,16 +104,17 @@ class ModalPostman extends Component {
       >
 
         <Row className="modal-postman-form" type="flex">
-          <Col span={8} className="modal-postman-col">
-            <MockList click={this.mockClick(0)} clickValue={name}></MockList>
-            <h3>变量</h3>
-          </Col>
           {
-            methodsParamsList.map((ListSourceComponent, index) => {
-              return <Col span={8} className="modal-postman-col" key={index}>
-                {ListSourceComponent.component&&
-                <ListSourceComponent.component index={index + 1} />}
-              </Col>
+            methodsParamsList.map((item, index) => {
+              return item.type === 'dataSource' ?
+                <Col span={8} className="modal-postman-col" key={index}>
+                  <MockList click={this.mockClick(index)} clickValue={name}></MockList>
+                  <h3>变量</h3>
+                </Col>
+                :
+                <Col span={8} className="modal-postman-col" key={index}>
+                  <this.MethodsListSource index={index} value={item.name} />
+                </Col>
             })
           }
         </Row>

client/components/ModalPostman/index.scss

@@ -29,7 +29,8 @@
       margin-bottom: 8px;
       width:100%;
       .ant-radio-button-wrapper{
-        border :0
+        border: 0;
+        width: 100%;
       }
       .ant-radio-button-wrapper-checked{
         color:#fff;