交互优化

src/components/AddNewInspect/SearchSelect/index.jsx

@@ -2,18 +2,17 @@ import React, { Component } from "react";
 import axios from '@utils/ajax';
 import styles from "./index.less";
 import {Notify,DelToast} from '@commonComp';
-import config from '@config/index';
 import $ from 'jquery';
 import dowm from '../img/down.png';
+import del from '../img/close.png';
 
 class SearchSelect extends Component {
   constructor(props) {
     super(props);
     this.state = {
       show:false,
-      ata:[],
-      wayList:[],        //给药途径列表
-      pipeList:[],    //剂型列表
+      data:[],
+      inpVal:''
     };
     this.handleBlur = this.handleBlur.bind(this);
     this.getDrugWayList = this.getDrugWayList.bind(this);
@@ -45,14 +44,21 @@ class SearchSelect extends Component {
     selectJiType(item,idx,type)
     handlePush&&handlePush({mode:8});
   }
-  handleSelectShow (e){
-    const val = e.target.value;
-    //const {handleChange} = this.props;
+  handleChange(e,isClear){
+      const val =e.target.value;
+      if(isClear||!val){
+          this.setState({
+              data:[],
+              inpVal:''
+          });
+          this.handleSelect({name:'',uniqueName:''},this.props.idx);
+          return;
+      }
       this.setState({
-          show:true
+          show:true,
+          inpVal:val,
       });
       //搜索
-      //handleChange(val);
       this.getDrugWayList(val)
   }
     //获取药品剂型15,、给药途径16
@@ -71,15 +77,9 @@ class SearchSelect extends Component {
          }).then((res)=>{
              if(res.data.code==0){
                  const data = res.data.data;
-                 //if(type===15){
-                     this.setState({
-                         data:data.nameList||[]
-                     })
-                 /*}else if(type===16){
-                     this.setState({
-                         pipeList:data.nameList||[]
-                     })
-                 }*/
+                 this.setState({
+                     data:data.nameList||[]
+                 })
              }else{
                  Notify.success(res.data.msg)
              }
@@ -87,11 +87,12 @@ class SearchSelect extends Component {
     };
   render() {
     const {idx,title,selected} = this.props;
-    const {show,data} = this.state;
+    const {show,data,inpVal} = this.state;
     return (
         <div className={styles.medType}>
-            <input placeholder={title} value={selected} className={styles.inpSearch} onChange={(e)=>this.handleSelectShow(e)} />
-                <img src={dowm} alt=""/>
+            <input placeholder={title} value={selected} className={styles.inpSearch} onChange={(e)=>this.handleChange(e)} />
+                <img className={styles.down} src={dowm} alt=""/>
+                {inpVal?<img className={styles.clear} src={del} alt="清空" onClick={(e)=>this.handleChange(e,true)}/>:''}
             {
                 show?<ul className={styles.selectLis}>
                     {

src/components/AddNewInspect/SearchSelect/index.less

@@ -6,13 +6,26 @@
     border-radius: 3px;
     position: relative;
     margin-right: 10px;
-    img{
+    .down{
         width: 8px;
         height: 5px;
         position: absolute;
+        cursor: pointer;
         top:8px;
         right: 5px;
     }
+    .clear{
+        display: none;
+        width: 12px;
+        height: 12px;
+        position: absolute;
+        cursor: pointer;
+        top: 5px;
+        right: 4px;
+    }
+    &:hover .clear{
+        display: inline-block;
+    }
     .selectLis{
         position: absolute;
         top:24px;