feat: 在组件中加入输入框

client/components/ModalPostman/MethodsList.js

@@ -1,29 +1,44 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Row, Input, Radio, Icon } from 'antd';
+import { Row, Radio, Icon, Input, Select } from 'antd';
 import common from 'common/power-string.js'
-import { autobind } from 'core-decorators';
+const Option = Select.Option;
 
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
-const Search = Input.Search;
+
+
+// const list = METHODS_LIST.slice(0,4);
+const inputComponent = () => {
+  return <Input size="small" placeholder="small size" />
+}
+
+const selectComponent = (value) => {
+  // console.log('props', props);
+  // const subname = ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'];
+  return <Select defaultValue="sha1" style={{ width: 150 }} size="small" >
+    {
+      value.map((item, index) => {
+        return <Option value={item} key={index}>{item}</Option>
+      })
+    }
+  </Select>
+}
 
 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: 'sha', type: true, component: selectComponent(['sha1', 'sha224', 'sha256', 'sha384', 'sha512']), subname: ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'] },
   { name: 'base64', type: false },
   { name: 'unbase64', type: false },
-  { name: 'concat', type: true },
-  { name: 'lconcat', type: true },
+  { name: 'concat', type: true, component: inputComponent() },
+  { name: 'lconcat', type: true, component: inputComponent() },
   { name: 'upper', type: false }
 
 ]
 
-// const list = METHODS_LIST.slice(0,4);
-
 
 class MethodsList extends Component {
   static propTypes = {
@@ -48,20 +63,14 @@ class MethodsList extends Component {
 
   componentWillReceiveProps(nextProps) {
     // console.log("nextProps",nextProps);
-    if(this.props.show !==nextProps.show){
+    if (this.props.show !== nextProps.show) {
       this.unshowMore();
     }
   }
 
-  @autobind
-  onFilter() {
 
 
-  }
-
-  
-  @autobind
-  showMore() {
+  showMore = () => {
     this.setState({
       list: METHODS_LIST,
       moreFlag: false
@@ -69,8 +78,8 @@ class MethodsList extends Component {
 
   }
 
-  @autobind
-  unshowMore() {
+
+  unshowMore = () => {
     this.setState({
       list: METHODS_LIST.slice(0, 4),
       moreFlag: true
@@ -79,15 +88,21 @@ class MethodsList extends Component {
 
   render() {
     const { list, moreFlag } = this.state;
-    const {click, clickValue} =  this.props;
+    const { click } = this.props;
     return (
       <div className="modal-postman-form-method">
         <h3 className="methods-title title">方法</h3>
-        <RadioGroup onChange={click} value={clickValue}>
+        <RadioGroup onChange={click}>
           {
             list.map((item, index) => {
               return <Row key={index} type="flex" align="middle" className="row methods-row" >
-                <RadioButton value={item.name}>{item.name}</RadioButton>
+                <RadioButton value={item.name}>
+                  <span>{item.name}</span>
+                  <span className="input-component">
+                    {item.type && item.component}
+                  </span>
+                </RadioButton>
+
               </Row>
             })
           }

client/components/ModalPostman/MockList.js

@@ -2,7 +2,6 @@ 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;
@@ -31,8 +30,8 @@ class MockList extends Component {
     })
   }
 
-  @autobind
-  onFilter(e) {
+ 
+  onFilter= (e)=> {
 
     const list = wordList.filter(item => {
       return item.mock.indexOf(e.target.value) !== -1
@@ -43,10 +42,10 @@ class MockList extends Component {
     })
   }
 
-  @autobind
-  onSearch(v){
-    console.log(v);
-    this.props.click();
+  
+  onSearch=(v)=>{
+    console.log("v",v);
+    // this.props.click(v);
   }
 
   render() {

client/components/ModalPostman/index.js

@@ -5,7 +5,7 @@ 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 { autobind } from 'core-decorators';
 import MockList from './MockList.js';
 import MethodsList from './MethodsList.js'
 
@@ -21,7 +21,7 @@ class ModalPostman extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      clickValue: '',
+      clickValue: [],
       methodsShow: false,
       methodsShowMore: false,
       arr: [],
@@ -33,18 +33,19 @@ class ModalPostman extends Component {
   mockClick(index) {
   
     return (e) => {
-      this.setState({
-        clickValue: e.target.value
-      })
-      if (index === -1) {
+      if (index === 0) {
         this.setState({
+          clickValue: [].concat([], e.target.value ),
           arr: []
         })
         this.createArrList([]);
       } else {
         let newArr = [].concat(this.state.arr);
+        let newValue = [].concat(this.state.clickValue);
         newArr.splice(index + 1, newArr.length - index - 1)
+        newValue.splice(index + 1, newValue.length - index - 1)
         this.setState({
+          clickValue: [].concat(newValue, e.target.value ),
           arr: newArr
         })
         this.createArrList(newArr)
@@ -56,16 +57,15 @@ class ModalPostman extends Component {
 
 
   createArrList(arr) {
-    // let arr = [];
+   
     const ListSource = (props) => {
-      console.log(props)
       return <MethodsList
         show={this.state.methodsShowMore}
         click={this.mockClick(props.index)}
-        clickValue={this.state.clickValue}
+        clickValue={this.state.clickValue[props.index]}
       />
     }
-    // this.state.arr.push(ListSource)
+   
     this.setState({
       arr: [].concat(arr, ListSource)
     })
@@ -75,8 +75,8 @@ class ModalPostman extends Component {
 
   render() {
     const { visible, handleCancel, handleOk } = this.props
-    const { clickValue, count } = this.state;
-    console.log('count', count);
+    const { clickValue } = this.state;
+    console.log('clickValue', clickValue);
     return (
       <Modal
         title={<p><Icon type="edit" /> 高级参数设置</p>}
@@ -87,24 +87,18 @@ class ModalPostman extends Component {
         width={800}
       >
 
-        <Row className="modal-postman-form" type="flex" flex-flow="row nowrap">
+        <Row className="modal-postman-form" type="flex">
           <Col span={8} className="modal-postman-col">
-            <MockList click={this.mockClick(-1)} clickValue={clickValue}></MockList>
+            <MockList click={this.mockClick(0)} clickValue={clickValue[0]}></MockList>
             <h3>变量</h3>
           </Col>
           {
             this.state.arr.map((ListSourceComponent, index) => {
               return <Col span={8} className="modal-postman-col" key={index}>
-                <ListSourceComponent index={index} />
+                <ListSourceComponent index={index+1} />
               </Col>
             })
-
           }
-          {/* <Col span={8} className="modal-postman-col">
-            {
-              methodsShow ? <MethodsList show={methodsShowMore} click={this.mockClick} clickValue={clickValue}></MethodsList> : <div>没有值</div>
-            }
-          </Col> */}
         </Row>
         <Row className="modal-postman-expression">
           <Col span={6}><h3 className="title">输入值</h3></Col>

client/components/ModalPostman/index.scss

@@ -67,7 +67,19 @@
   }
 
   .methods-row{
+    position: relative;
     // border-bottom: 1px solid #e9e9e9;
+    label{
+      position: unset;
+    }
+    .ant-radio-button-wrapper{
+      position: unset;
+    }
+
+    .ant-select-selection__rendered{
+      height: 26px;
+      line-height: 26px;
+    }
   }
 
   .modal-postman-col{
@@ -83,5 +95,12 @@
   .ant-row-flex {
     flex-wrap: nowrap
   }
+  .input-component {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    width: 150px;
+  }
+
   
 }