From 5edd3ef98148895911a807b32c3d01dee5c02764 Mon Sep 17 00:00:00 2001
From: "gaoxiaolin.gao" <gaoxiaolin.gao@qunar.com>
Date: Tue, 21 Nov 2017 10:27:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=20=E7=82=B9=E5=87=BB=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/ModalPostman/MethodsList.js | 44 +++++++++----------
 client/components/ModalPostman/MockList.js    | 39 +++++++++-------
 client/components/ModalPostman/index.js       |  2 +-
 client/components/ModalPostman/index.scss     | 12 ++++-
 4 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/client/components/ModalPostman/MethodsList.js b/client/components/ModalPostman/MethodsList.js
index dcc627c0..f9710f4e 100644
--- a/client/components/ModalPostman/MethodsList.js
+++ b/client/components/ModalPostman/MethodsList.js
@@ -62,7 +62,6 @@ class MethodsList extends Component {
     return <Input
       size="small"
       placeholder="请输入参数"
-      disabled={!props.disabled}
       onChange={(e) => this.handleParamsChange(e.target.value, clickIndex, paramsIndex)}
     />
   }
@@ -71,7 +70,7 @@ class MethodsList extends Component {
     const subname = ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'];
     let clickIndex = props.clickIndex;
     let paramsIndex = props.paramsIndex;
-    return <Select placeholder="请选择" style={{ width: 150 }} size="small" disabled={!props.disabled} onChange={(e) => this.handleParamsChange(e, clickIndex, paramsIndex)}>
+    return <Select placeholder="请选择" style={{ width: 150 }} size="small" onChange={(e) => this.handleParamsChange(e, clickIndex, paramsIndex)}>
       {
         subname.map((item, index) => {
           return <Option value={item} key={index}>{item}</Option>
@@ -97,7 +96,6 @@ class MethodsList extends Component {
   // 组件选择
   handleComponent(item, clickIndex, index) {
     let query = {
-      disabled: item.name === this.props.clickValue,
       clickIndex: clickIndex,
       paramsIndex: index
     }
@@ -113,10 +111,10 @@ class MethodsList extends Component {
 
   handleRadioChange = (e) => {
     console.log(e);
-    this.state.list.forEach(item=>{
-     if(item.name === clickValue) {
+    this.state.list.forEach(item => {
+      if (item.name === clickValue) {
 
-     }
+      }
     })
     this.props.click(e);
     // console.log('state', this.state.index);
@@ -124,29 +122,31 @@ class MethodsList extends Component {
   }
 
   render() {
-    const { list, moreFlag, index } = this.state;
-    const { click,clickValue, clickIndex } = this.props;
+    const { list, moreFlag } = this.state;
+    const { click, clickValue, clickIndex } = this.props;
     console.log('click', clickValue);
     console.log('state', this.state.index);
     let showList = moreFlag ? list.slice(0, 4) : list;
     return (
       <div className="modal-postman-form-method">
         <h3 className="methods-title title">方法</h3>
-        <RadioGroup onChange={(e) => this.handleRadioChange(e} value={clickValue}>
-          {
-            showList.map((item, index) => {
-              return <Row key={index} type="flex" align="middle" className="row methods-row">
-                <RadioButton value={item.name} onClick={click}>
-                  <span>{item.name}</span>
-                  <span className="input-component">
-                    {item.type && this.handleComponent(item, clickIndex, index)}
-                  </span>
-                </RadioButton>
+        {
+          showList.map((item, index) => {
+            return <Row
+              key={index}
+              type="flex"
+              align="middle"
+              className={'row methods-row ' + (item.name === clickValue ? 'checked' : '')}
+              onClick={() => click(item.name)}>
+              <span>{item.name}</span>
+              <span className="input-component">
+                {item.type && this.handleComponent(item, clickIndex, index)}
+              </span>
 
-              </Row>
-            })
-          }
-        </RadioGroup>
+
+            </Row>
+          })
+        }
         {
           moreFlag && <div className="show-more" onClick={this.showMore}><Icon type="down" /><span style={{ paddingLeft: '4px' }}>更多</span></div>
         }
diff --git a/client/components/ModalPostman/MockList.js b/client/components/ModalPostman/MockList.js
index af3f0796..122c6e63 100644
--- a/client/components/ModalPostman/MockList.js
+++ b/client/components/ModalPostman/MockList.js
@@ -12,7 +12,7 @@ class MockList extends Component {
   static propTypes = {
     click: PropTypes.func,
     clickValue: PropTypes.string
-   
+
   }
 
   constructor(props) {
@@ -30,8 +30,8 @@ class MockList extends Component {
     })
   }
 
- 
-  onFilter= (e)=> {
+
+  onFilter = (e) => {
 
     const list = wordList.filter(item => {
       return item.mock.indexOf(e.target.value) !== -1
@@ -42,15 +42,15 @@ class MockList extends Component {
     })
   }
 
-  
-  onSearch=(v)=>{
-    console.log("v",v);
+
+  onSearch = (v) => {
+    console.log("v", v);
     // this.props.click(v);
   }
 
   render() {
-    const { list, filter} = this.state;
-    const {click, clickValue} =  this.props;
+    const { list, filter } = this.state;
+    const { click, clickValue } = this.props;
     return (
       <div className="modal-postman-form-mock">
         <h3 className="mock-title title">mock数据</h3>
@@ -61,15 +61,20 @@ class MockList extends Component {
           placeholder="搜索mock数据"
           className="mock-search"
         />
-        <RadioGroup onChange={click} value={clickValue}>
-          {
-            list.map((item, index) => {
-              return <Row key={index} type="flex" align="middle" className="row" >
-                <RadioButton value={item.mock}>{item.mock}</RadioButton>
-              </Row>
-            })
-          }
-        </RadioGroup>
+        {/* <RadioGroup onChange={click} value={clickValue}> */}
+        {
+          list.map((item, index) => {
+            return <Row
+              key={index}
+              type="flex"
+              align="middle"
+              className={'row ' + (item.mock === clickValue ? 'checked' : '')}
+              onClick={() => click(item.mock)} >
+              <span>{item.mock}</span>
+            </Row>
+          })
+        }
+        {/* </RadioGroup> */}
       </div>
     )
 
diff --git a/client/components/ModalPostman/index.js b/client/components/ModalPostman/index.js
index 02d380d6..69ea8ba5 100644
--- a/client/components/ModalPostman/index.js
+++ b/client/components/ModalPostman/index.js
@@ -58,7 +58,7 @@ class ModalPostman extends Component {
   mockClick(index) {
     return (e, params) => {
       console.log('value', params);
-      let curname = e.target.value;
+      let curname = e;
       let newParamsList = closeRightTabsAndAddNewTab(this.state.methodsParamsList, index, curname, params)
       this.setState({
         methodsParamsList: newParamsList
diff --git a/client/components/ModalPostman/index.scss b/client/components/ModalPostman/index.scss
index 040b4508..b20c6c43 100644
--- a/client/components/ModalPostman/index.scss
+++ b/client/components/ModalPostman/index.scss
@@ -27,7 +27,12 @@
     }
     .row {
       margin-bottom: 8px;
-      width:100%;
+      width: 100%;
+      height: 32px;
+      line-height: 30px;
+      padding: 0 16px;
+      cursor: pointer;
+
       .ant-radio-button-wrapper{
         border: 0;
         width: 100%;
@@ -38,6 +43,11 @@
         width:100%
       }
     }
+
+    .checked{
+      color:#fff;
+      background-color:#2395f1;
+    }
   }
   .modal-postman-expression, .modal-postman-preview {
     border-top: 1px solid #e9e9e9;