搜索结果样式修改

src/components/AddNewInspect/SearchSelect/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import axios from '@utils/ajax';
 import styles from "./index.less";
-import {Notify,DelToast} from '@commonComp';
+import { Notify, DelToast } from '@commonComp';
 import $ from 'jquery';
 import dowm from '../img/down.png';
 import del from '../img/close.png';
@@ -10,103 +10,101 @@ class SearchSelect extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      show:false,
-      data:[],
-      inpVal:''
+      show: false,
+      data: [],
+      inpVal: ''
     };
     this.handleBlur = this.handleBlur.bind(this);
     this.getDrugWayList = this.getDrugWayList.bind(this);
   }
-  
+
   componentDidMount() {
-      //关闭下拉弹窗
+    //关闭下拉弹窗
     $(document).click((event) => {
-        const domClass=$(event.target).attr("class")||'';
-      if(domClass.indexOf(styles.selectLis)===-1&&domClass.indexOf(styles.inpSearch)===-1){
+      const domClass = $(event.target).attr("class") || '';
+      if (domClass.indexOf(styles.selectLis) === -1 && domClass.indexOf(styles.inpSearch) === -1) {
         this.setState({
-          show:false
+          show: false
         })
       }
     });
   }
-  handleBlur(){
-    const {handlePush} = this.props;
-    handlePush && handlePush({mode:8});       //右侧推送
+  handleBlur() {
+    const { handlePush } = this.props;
+    handlePush && handlePush({ mode: 8 });       //右侧推送
   }
 
-  handleFocus(){
-    const {handlePush} = this.props;
-    handlePush&&handlePush({mode:8});
+  handleFocus() {
+    const { handlePush } = this.props;
+    handlePush && handlePush({ mode: 8 });
   }
-  handleSelect(part,idx){
-    const {selectJiType,handlePush,type,hosId} = this.props;
-    const item = Object.assign(part,{uniqueName:hosId===-1?part.name:undefined});       //朗通的需要传uniqueName
-    selectJiType(item,idx,type)
-    handlePush&&handlePush({mode:8});
+  handleSelect(part, idx) {
+    const { selectJiType, handlePush, type, hosId } = this.props;
+    const item = Object.assign(part, { uniqueName: hosId === -1 ? part.name : undefined });       //朗通的需要传uniqueName
+    selectJiType(item, idx, type)
+    handlePush && handlePush({ mode: 8 });
   }
-  handleChange(e,isClear){
-      const val =e.target.value;
+  handleChange(e, isClear) {
+    const val = e.target.value;
     console.log(e.target.value);
-      
-      if(isClear||!val){
-          this.setState({
-              data:[],
-              inpVal:''
-          });
-          this.handleSelect({name:'',uniqueName:''},this.props.idx);
-          return;
-      }
+
+    if (isClear || !val) {
       this.setState({
-          show:true,
-          inpVal:val,
+        data: [],
+        inpVal: ''
       });
-      //搜索
-    console.log(val);
-      
-      this.getDrugWayList(val)
+      this.handleSelect({ name: '', uniqueName: '' }, this.props.idx);
+      return;
+    }
+    this.setState({
+      show: true,
+      inpVal: val,
+    });
+    //搜索
+    this.getDrugWayList(val)
   }
-    //获取药品剂型15,、给药途径16
-    getDrugWayList(val){
-      const {hosId,type} = this.props;
-      if(!val.trim()){
-          this.setState({
-              data:[]
-          });
-          return;
+  //获取药品剂型15,、给药途径16
+  getDrugWayList(val) {
+    const { hosId, type } = this.props;
+    if (!val.trim()) {
+      this.setState({
+        data: []
+      });
+      return;
+    }
+    axios.json('/demo/retrieval/index', {
+      "inputStr": val.trim(),
+      "type": type,
+      "hospitalId": hosId
+    }).then((res) => {
+      if (res.data.code == 0) {
+        const data = res.data.data;
+        this.setState({
+          data: data.nameList || []
+        })
+      } else {
+        Notify.success(res.data.msg)
       }
-         axios.json('/demo/retrieval/index',{
-             "inputStr": val.trim(),
-             "type": type,
-             "hospitalId":hosId
-         }).then((res)=>{
-             if(res.data.code==0){
-                 const data = res.data.data;
-                 this.setState({
-                     data:data.nameList||[]
-                 })
-             }else{
-                 Notify.success(res.data.msg)
-             }
-         })
-    };
+    })
+  };
   render() {
-    const {idx,title,selected} = this.props;
-    const {show,data,inpVal} = this.state;
+    const { idx, title, selected } = this.props;
+    const { show, data, inpVal } = this.state; 
     return (
-        <div className={styles.medType}>
-            <input placeholder={title} value={selected} className={styles.inpSearch} onInput={(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)}/>:''}
+      <div className={styles.medType}>
+        <input placeholder={title} value={selected} title={selected} className={styles.inpSearch} onInput={(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}>
             {
-                show?<ul className={styles.selectLis}>
-                    {
-                        data&&data.map((part)=>{
-                            return <li onClick={()=>this.handleSelect(part,idx)}>{part.name}</li>
-                        })
-                    }
-                </ul>:''
+              data && data.map((part) => {
+                return <li onClick={() => this.handleSelect(part, idx)}>{part.name}</li>
+              })
             }
-          </div>
+          </ul> : ''
+        }
+      </div>
     );
   }
 }

src/components/AddNewInspect/SearchSelect/index.less

@@ -38,6 +38,9 @@
         li{
             padding-left: 5px;
             cursor: pointer;
+            white-space:nowrap;
+            overflow:hidden;
+            text-overflow:ellipsis;
         }
         li:hover{
             background: #E2F1F8;