newICSS/src/components/WrapModalBodyPac/Item/index.jsx

import React from "react";
import style from "../index.less";
import {getCalendarDate,getCurrentDate} from "@utils/tools";
import TimeInterval from '../../TimeInterval';

class Item extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      startTime:getCurrentDate(false)+' 00:00:00',
      endTime:getCurrentDate(false)+' 23:59:59',
      code:'',
      name:'',
      sex:'',
      age:''
    }
    this.getStartTime = this.getStartTime.bind(this)
    this.getEndTime = this.getEndTime.bind(this)
    this.handleInput = this.handleInput.bind(this)
  }
  getStartTime(date){
    this.setState({startTime:date})
  }
  getEndTime(date){
    this.setState({endTime:date})
  }
  handleInput(e,val){
    switch(val){
      case 1:
        this.setState({
          code:e.target.value
        })
        break;
      case 2:
        this.setState({
          name:e.target.value
        })
        break;
      case 3:
        this.setState({
          sex:e.target.value
        })
        break;
      case 4:
        this.setState({
          age:e.target.value
        })
        break;
    }
  }
  render() {
    const {handleSearch,message} = this.props
    return <div className={style['items']}>
      <ul>
        <li className={`${style.code} ${style.pubLi} ${style.partLish}`}>
          <span>门诊号 : </span>
          <input type="text" value={this.state.code || message.recordId} readOnly
            onInput={(e) => { 
                this.handleInput(e,1)
            }}
            onPropertyChange={(e) => {  
                this.handleInput(e,1)
            }} />
        </li>
        <li className={`${style.name} ${style.pubLi} ${style.partLish}`}>
          <span>姓名 : </span>
          <input type="text" value={this.state.name || message.patientName} readOnly
            onInput={(e) => { 
                this.handleInput(e,2)
            }}
            onPropertyChange={(e) => {  
                this.handleInput(e,2)
            }} />
        </li>
        <li className={`${style.sex} ${style.pubLi} ${style.partLish}`}>
          <span>性别 : </span>
          <input type="text" value={this.state.sex || message.patientSex} readOnly
            onInput={(e) => { 
                this.handleInput(e,3)
            }}
            onPropertyChange={(e) => {  
                this.handleInput(e,3)
            }} />
        </li>
        <li className={`${style.age} ${style.pubLi} ${style.partLish}`}>
          <span>年龄 : </span>
          <input type="text" value={this.state.age||message.patientAge} readOnly
            onInput={(e) => { 
                this.handleInput(e,4)
            }}
            onPropertyChange={(e) => {  
                this.handleInput(e,4)
            }} />
        </li>
        <li className={`${style.time} ${style.pubLi} ${style.partLish}`}>
          <span>送检时间 : </span>
          <TimeInterval getStartTime={this.getStartTime} getEndTime={this.getEndTime}></TimeInterval>
        </li>
      </ul>
      <div className={style.search} onClick={()=>handleSearch(this.state)}>检索</div>
    </div>
  }
}

export default Item;