样式修改

src/components/AddNewInspect/SearchSelect/index.jsx

@@ -46,10 +46,7 @@ class SearchSelect extends Component {
   }
   handleFocu(e){
     const val = e.target.value;
-    const { type } = this.props;
-    if(type == 16){
-      this.getDrugWayList(val)
-    }
+    this.getDrugWayList(val)
   }
   handleChange(e, isClear) {
     const val = e.target.value;
@@ -70,6 +67,14 @@ class SearchSelect extends Component {
   //获取药品剂型15,、给药途径16
   getDrugWayList(val) {
     const { hosId, type } = this.props;
+    if(!val && type == 15){
+      this.setState({
+        data: [],
+        inpVal: ''
+      });
+      this.handleSelect({ name: '', uniqueName: '' }, this.props.idx);
+      return
+    }
     axios.json('/demo/retrieval/index', {
       "inputStr": val.trim(),
       "type": type,
@@ -99,7 +104,7 @@ class SearchSelect extends Component {
           show ? <ul className={styles.selectLis}>
             {
               data && data.map((part) => {
-                return <li onClick={() => this.handleSelect(part, idx)}>{part.name}</li>
+                return <li title={part.name} onClick={() => this.handleSelect(part, idx)}>{part.name}</li>
               })
             }
           </ul> : ''

src/components/AddNewInspect/SearchSelect2/index.jsx

@@ -0,0 +1,116 @@
+import React, { Component } from "react";
+import axios from '@utils/ajax';
+import styles from "./index.less";
+import { Notify, DelToast } from '@commonComp';
+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,
+      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) {
+        this.setState({
+          show: false
+        })
+      }
+    });
+  }
+  handleBlur() {
+    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 });
+  }
+  handleFocu(e){
+    const val = e.target.value;
+    this.getDrugWayList(val)
+  }
+  handleChange(e, isClear) {
+    const val = e.target.value;
+    if (isClear || !val) {
+      this.setState({
+        data: [],
+        inpVal: ''
+      });
+      this.handleSelect({ name: '', uniqueName: '' }, this.props.idx);
+    }
+    this.setState({
+      show: true,
+      inpVal: val,
+    });
+    //搜索
+    this.getDrugWayList(val)
+  }
+  //获取药品剂型15,、给药途径16
+  getDrugWayList(val) {
+    const { hosId, type } = this.props;
+    if(!val && type == 15){
+      this.setState({
+        data: [],
+        inpVal: ''
+      });
+      this.handleSelect({ name: '', uniqueName: '' }, this.props.idx);
+      return
+    }
+    axios.json('/demo/retrieval/index', {
+      "inputStr": val.trim(),
+      "type": type,
+      "hospitalId": hosId,
+      "defaultList":type==15?0:1
+    }).then((res) => {
+      if (res.data.code == 0) {
+        const data = res.data.data;
+        this.setState({
+          data: data.nameList || [],
+          show: true,
+        })
+      } else {
+        Notify.success(res.data.msg)
+      }
+    })
+  };
+  render() {
+    const { idx, title, selected } = this.props;
+    const { show, data, inpVal } = this.state; 
+    return (
+      <div className={styles.medType}>
+        <input placeholder={title} value={selected} title={selected} className={styles.inpSearch} onFocus={(e) => this.handleFocu(e)} 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}>
+            {
+              data && data.map((part) => {
+                return <li title={part.name} onClick={() => this.handleSelect(part, idx)}>{part.name}</li>
+              })
+            }
+          </ul> : ''
+        }
+      </div>
+    );
+  }
+}
+export default SearchSelect;

src/components/AddNewInspect/SearchSelect2/index.less

@@ -0,0 +1,53 @@
+@import "~@less/variables.less";
+.medType{
+    display: inline-block;
+    width: 110px;
+    border:1px solid #aaa;
+    border-radius: 3px;
+    position: relative;
+    margin-right: 10px;
+    .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;
+        background: #fff;
+        width: 100%;
+        max-height: 110px;
+        box-shadow: 0 10px 20px 0 #989da3;
+        z-index: 9;
+        overflow: auto;
+        li{
+            padding-left: 5px;
+            cursor: pointer;
+            white-space:nowrap;
+            overflow:hidden;
+            text-overflow:ellipsis;
+        }
+        li:hover{
+            background: #E2F1F8;
+        }
+    }
+}
+.inpSearch{
+    width: 100%;
+    padding-left: 5px;
+}

src/components/AddNewInspect/SlidePic/index.jsx

@@ -8,6 +8,7 @@ import checkOn from '@common/images/check_on.png';
 import dowm from '../img/down.png';
 import SlideIpt from '../SlideIpt';
 import SearchSelect from '../SearchSelect';
+import SearchSelect2 from '../SearchSelect2';
 import singleB from '../img/singleB.png';
 import singleL from '../img/singleL.png';
 
@@ -112,7 +113,7 @@ class SlidePic extends Component {
           <span className={styles.bigname} title={item.detailName}>{item.detailName}</span>
           <span className={styles.smallname}>{item.flg == 5?'药品':item.flg == 6?'手术/操作':'输血'}</span>
           {hosId===-1 && item.flg == 5?<SearchSelect title='选择剂型' hosId={hosId} selected={item.form} type={15} selectJiType={selectJiType} handlePush={handlePush} idx={idx}></SearchSelect>:<p style={{width:'110px',marginRight:'10px'}}></p>}
-          {item.flg == 5?<SearchSelect title='选择给药途径' hosId={hosId} selected={item.routeName} type={16} selectJiType={selectJiType} handlePush={handlePush} idx={idx}></SearchSelect>:<p style={{width:'108px',marginRight:'10px'}}></p>}
+          {item.flg == 5?<SearchSelect2 title='选择给药途径' hosId={hosId} selected={item.routeName} type={16} selectJiType={selectJiType} handlePush={handlePush} idx={idx}></SearchSelect2>:<p style={{width:'108px',marginRight:'10px'}}></p>}
           
           <span className={styles.edit}>
             {