newICSS/src/components/AddNewInspect/SearchSelect2/index.jsx

import React, { Component } from "react";
import axios from '@utils/ajax';
import styles from "./index.less";
import { Notify, DelToast } from '@commonComp';
import $ from 'jquery';
import down 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);
    this.confirm = this.confirm.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 });
    this.setState({
      inpVal: part.name,
    });
  }
  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)
  }
  confirm(){
    let val = this.state.inpVal
    console.log(this.state);
    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,
      "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={show?styles.up:styles.down} src={down} alt="" onClick={this.confirm}/>
        {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;