uas-office-integration/uas-office-web/wxuasapproval/src/components/approvalAdd/FormInput.jsx

/**
 * Created by RaoMeng on 2020/2/19
 * Desc: 通用表单输入框类型
 */

import React, { Component } from 'react'
import './formCommon.css'
import ApprovalBean from '../../model/ApprovalBean'
import BillModel from '../../model/BillModel'
import { TextareaItem, InputItem, DatePicker, List, Modal } from 'antd-mobile'
import { isObjEmpty } from '../../utils/common'
import moment from 'moment'

export default class FormInput extends Component {

  constructor () {
    super()

    this.state = {
      billModel: new BillModel(),
      modalOpen: false,
      modalList: [],
    }
  }

  componentDidMount () {
    let { billModel } = this.props

    this.setState({
      billModel: billModel,
      modalVisible: false,
    })
  }

  componentWillReceiveProps () {
    this.componentDidMount()
  }

  componentWillUnmount () {

  }

  render () {
    const { billModel, modalOpen, modalList } = this.state
    let valueItem

    let type = billModel.type
    if (type === 'N') {
      valueItem =
        <InputItem className='form-input-value' clear
                   placeholder={this.isSelect(billModel)
                     ? '请选择'
                     : ((billModel.readOnly === 'T' ||
                       billModel.editable === 'F')
                       ? ''
                       : '请输入')}
                   editable={(billModel.readOnly === 'T' ||
                     billModel.editable === 'F') ? false : (this.isSelect(
                     billModel)
                     ? false
                     : true)}
          // extra={(billModel.readOnly === 'T' &&
          //   billModel.editable === 'F' && this.isSelect(billModel))
          //   ? '>'
          //   : ''}
                   onChange={this.onTextChange}
                   onClick={this.onInputClick}
                   type={'number'}
                   value={billModel.getValue()}
        />
    } else if (type === 'DT' || type === 'D' || type === 'T') {
      valueItem = <DatePicker
        style={{ width: '100%' }}
        locale={{
          okText: '确定',
          dismissText: '取消',
        }}
        mode={type === 'DT' ? 'datetime' : 'date'}
        extra={(billModel.readOnly === 'T' ||
          billModel.editable === 'F') ? '' : type === 'DT' ? '选择时间' : '选择日期'}
        disabled={(billModel.readOnly === 'T' ||
          billModel.editable === 'F') ? true : false}
        value={!isObjEmpty(billModel.getValue())
          ? new Date(billModel.getValue())
          : ''}
        onChange={this.onDateChange}
      >
        <DatePickerCustom>
          <div className='form-input-caption'>{billModel.caption}</div>
          <div className={billModel.allowBlank == 'F'
            ? 'form-input-fill'
            : 'visibleHidden'}>*
          </div>
          <div style={{ flex: 1 }}></div>
        </DatePickerCustom>
      </DatePicker>
    } else {
      valueItem = <TextareaItem className='form-input-value' autoHeight
                                placeholder={this.isSelect(billModel)
                                  ? '请选择'
                                  : ((billModel.readOnly === 'T' ||
                                    billModel.editable === 'F')
                                    ? ''
                                    : '请输入')}
                                clear={true}
                                editable={(billModel.readOnly === 'T' ||
                                  billModel.editable === 'F')
                                  ? false
                                  : (this.isSelect(billModel)
                                    ? false
                                    : true)}
                                disabled={false}
        // extra={(billModel.readOnly === 'T' &&
        //   billModel.editable === 'F' && this.isSelect(billModel))
        //   ? '>'
        //   : ''}
                                onChange={this.onTextChange}
                                onClick={this.onInputClick}
                                value={billModel.getValue()}
      />
    }
    return (
      (type === 'DT' || type === 'D' || type === 'T') ? <div>
        {valueItem}
      </div> : <div className='form-common-layout'
                    style={{ minHeight: '32px' }}>
        <div className='form-input-caption'>{billModel.caption}</div>
        <div className={billModel.allowBlank == 'F'
          ? 'form-input-fill'
          : 'visibleHidden'}>*
        </div>
        {valueItem}
        {this.isSelect(billModel) &&
        <Modal visible={modalOpen}
               animationType={'slide-up'}
               onClose={() => {
                 this.setState({
                   modalOpen: false,
                 })
               }}
               title={billModel.caption}
               popup
        >
          <List className='form-common-modal-root'>
            {modalList && (
              modalList.map((modalObj, index) => (
                <List.Item key={index}
                           onClick={this.onModalSelect.bind(this,
                             index)}>{modalObj.display}</List.Item>
              ))
            )}
          </List>
        </Modal>}
      </div>
    )
  }

  onTextChange = value => {
    const { billModel } = this.state
    billModel.value = value
    this.setState({
      billModel,
    }, () => {
      this.props.onTextChange &&
      this.props.onTextChange(this.props.groupIndex, this.props.childIndex,
        value)
    })
  }

  onInputClick = e => {
    // if (this.props.onInputClick) {
    //   this.props.onInputClick(this.props.groupIndex, this.props.childIndex)
    // }
    const { billModel } = this.state
    if (!isObjEmpty(billModel.localDatas)) {
      console.log('modaldata', billModel.localDatas)
      this.setState({
        modalList: billModel.localDatas,
        modalOpen: true,
      })
    }
  }

  onModalSelect = index => {
    const { modalList } = this.state
    if (!isObjEmpty(modalList) && modalList[index] && this.props.onTextChange) {
      this.props.onTextChange(this.props.groupIndex, this.props.childIndex,
        modalList[index].display, modalList[index].value)
    }
    this.setState({
      modalList: [],
      modalOpen: false,
    })
  }

  onDateChange = date => {
    const { billModel } = this.state
    let dateStr = moment(date).
      format((billModel.type === 'D' || billModel.type === 'T')
        ? 'YYYY-MM-DD 00:00:00'
        : 'YYYY-MM-DD HH:mm:ss')
    console.log('date', dateStr)
    billModel.value = dateStr
    this.setState({
      billModel,
    }, () => {
      this.props.onTextChange &&
      this.props.onTextChange(this.props.groupIndex, this.props.childIndex,
        dateStr)
    })
  }

  isSelect = (billModel) => {
    if (!isObjEmpty(billModel.localDatas)) {
      return true
    }
    let dfType = billModel.type
    if (isObjEmpty(dfType)) {
      return false
    }
    switch (dfType) {
      case 'C':
      case 'D':
      case 'DT':
      case 'MF':
      case 'SF':
      case 'DF':
        return false
      // return true
    }
    return false
  }
}

const DatePickerCustom = ({ extra, onClick, children }) => (
  <div
    onClick={onClick}
    className='form-common-layout'
  >
    {children}
    <span style={{
      float: 'right',
      color: '#888',
      height: '32px',
      lineHeight: '32px',
      paddingRight: '12px',
    }}>{extra}</span>
  </div>
)