newICSS/src/components/PatInfo/index.jsx

import React, { Component } from "react";
import style from "./index.less";
import {
  timesYMDTime
} from '@utils/tools';

class PatInfo extends Component {
  constructor(props){
    super(props)
    this.state ={
      patientInfo: [
        {
          label: 'patientIdNo',
          id: 'patientIdNo',
          value: '330127198912311234',
          title: '卡号',
          maxlength: 50
        },
        {
          label: 'patientName',
          id: 'patientName',
          value: '王明明',
          title: '姓名',
          maxlength: 50
        },
        {
          label: 'patientAge',
          id: 'patientAge',
          value: '50',
          title: '年龄',
          maxlength: 11
        },
        {
          label: 'patientSex',
          id: 'patientSex',
          value: 2,
          title: '性别',
          maxlength: 11
        },
        {
          label: 'systemTime',
          id: 'systemTime',
          value: timesYMDTime(new Date().getTime()),
          title: '就诊时间',
          maxlength: 100
        },
        {
          label: 'hospitalDeptName',
          id: 'hospitalDeptName',
          value: '全科',
          title: '科室',
          maxlength: 50
        },
        {
          label: 'doctorName',
          id: 'doctorName',
          value: '付医生',
          title: '医生',
          maxlength: 50
        },
        {
          label: 'recordId',
          id: 'recordId',
          value: '4332',
          title: '门诊号',
          maxlength: 50
        }

      ]
    }
    this.handleChange = this.handleChange.bind(this)
  }
  componentWillMount() {
    const { getMessage, initPatInfoData } = this.props;
    getMessage && getMessage()
    initPatInfoData && initPatInfoData(this.state.patientInfo)

    // console.log(timesYMDTime(new Date().getTime()),'电脑时间');

  }
  componentWillReceiveProps(nextProps){
    // console.log(nextProps,'nextProps');
    const { patInfoData } = nextProps.patInfo
    this.setState({
      // patientInfo:patInfoData
    })
  }

  handleChange(e){
    const { initPatInfoData } = this.props;    
    let { patientInfo } = this.state;
    let newInfo = Object.assign([], patientInfo);
    let patientItem = newInfo.find(item =>{
      return item.id === e.target.id
    })      
    // 处理性别
    if (patientItem.id === 'patientSex'){     
      if (e.target.value === '1') {
        patientItem.value = 1
      } else if (e.target.value === '2'){
        patientItem.value = 2
      } else {
        patientItem.value = 2 // 默认为女
      }
    } else if (patientItem.id === 'patientAge'){
      patientItem.value = e.target.value.replace(/[^\d]+/, '')
    } else {
      patientItem.value = e.target.value;
    }
    this.setState({
      patientInfo: newInfo
    })
    initPatInfoData && initPatInfoData(newInfo)
  }

  render(){
    const {message} = this.props.patInfo;
     return (
       <div className={style["infoContainer"]}>         
         {
            this.state.patientInfo.map((item, index) => {
              return (
                <div className={style["infoItem"]} key={item.id}>
                  <label for={item.label}>{item.title}：</label>
                  {item.id === 'patientSex' && (
                    <select id={item.id} value={item.value} onChange={this.handleChange}>
                      <option value='1'>男</option>
                      <option value='2'>女</option>
                    </select>
                  )}
                  {item.id === 'patientAge' && (<input id={item.id} type="text" autocomplete="off" maxlength={11}  value={item.value} onChange={this.handleChange} />)}
                  {/* {item.id === 'patientSex' && (<input id={item.id} type="text" autocomplete="off" value={item.value == 1 ? '男' : '女'} onChange={this.handleChange} />)} */}
                  {item.id === 'systemTime' && (<input id={item.id} type="text" autocomplete="off"  disabled value={item.value } onChange={this.handleChange} />)}
                  {item.id !== 'patientAge' && item.id !== 'patientSex' && item.id !== 'systemTime' && (<input id={item.id} type="text" maxlength={item.maxlength} autocomplete="off" value={item.value} onChange={this.handleChange} />) }                  
                </div>
              )
            })
         }
       </div>

     );
  }
}

export default PatInfo;