mh_jy_safe_web/src/feui/common/FullDatePicker.js

// 核心库
import React, { useState, useEffect, useMemo } from 'react'
import PropTypes from 'prop-types'
// 组件库
import { Form, Select, DatePicker } from 'antd'
// 工具库
import moment from 'moment'

const { Option } = Select
const { MonthPicker, RangePicker } = DatePicker

function FullDatePicker (props) {
  const [dateType, setDateType] = useState(props.dateType)
  const [dateString, setDateString] = useState(moment(props.dateString))

  useEffect(() => {
    setDateType(props.dateType)
    switch (props.dateType) {
      case '3':
      case '4':
        {
          const dates = props.dateString.split(',')
          setDateString([moment(dates[0]), moment(dates[1])])
        }
        break
      default:
        setDateString(moment(props.dateString))
        break
    }
  }, [props.dateType, props.dateString])

  const dateValue = useMemo(() => {
    const dateValue = {}
    switch (dateType) {
      // 年选择
      case '0':
        {
          const yearString = dateString.format('YYYY')
          dateValue.dateString = yearString
          const rawYearString = moment(yearString).format('YYYY-MM-DD')
          dateValue.dateRaw = rawYearString
          dateValue.dateRange = [rawYearString, moment(rawYearString).add(1, 'years').subtract(1, 'days').format('YYYY-MM-DD')]
        }
        break
      // 月选择
      case '1':
        {
          const monthString = dateString.format('YYYY-MM')
          dateValue.dateString = monthString
          const rawMonthString = moment(monthString).format('YYYY-MM-DD')
          dateValue.dateRaw = rawMonthString
          dateValue.dateRange = [rawMonthString, moment(rawMonthString).add(1, 'months').subtract(1, 'days').format('YYYY-MM-DD')]
        }
        break
      // 日选择
      case '2':
        {
          const DateString = dateString.format('YYYY-MM-DD')
          dateValue.dateString = DateString
          const rawDateString = moment(DateString).format('YYYY-MM-DD HH:mm:ss')
          dateValue.dateRaw = rawDateString
          dateValue.dateRange = [rawDateString, moment(rawDateString).add(1, 'days').subtract(1, 'seconds').format('YYYY-MM-DD HH:mm:ss')]
        }
        break
      // 日期区间，精确到日
      case '3':
        {
          const DateRangeString = dateString.map(item => item.format('YYYY-MM-DD'))
          dateValue.dateString = DateRangeString.join(',')
          const rawDateRangeString = DateRangeString.map(item => moment(item).format('YYYY-MM-DD HH:mm:ss'))
          dateValue.dateRaw = rawDateRangeString.join(',')
          dateValue.dateRange = rawDateRangeString
        }
        break
      // 日期区间，精确到时分秒
      case '4':
        {
          const DateFullRangeString = dateString.map(item => item.format('YYYY-MM-DD HH:mm:ss'))
          dateValue.dateString = DateFullRangeString.join(',')
          const rawDateFullRangeString = DateFullRangeString
          dateValue.dateRaw = rawDateFullRangeString.join(',')
          dateValue.dateRange = rawDateFullRangeString
        }
        break
      default:
        break
    }
    dateValue.dateType = dateType
    return dateValue
  }, [dateType, dateString])

  useEffect(() => {
    props.onChange instanceof Function && props.onChange(dateValue)
  }, [dateType, dateString, dateValue])

  const DatePickerComponent = useMemo(() => {
    switch (dateType) {
      // 年选择
      case '0':
        return (
          <DatePicker
            key='full-date-picker-year'
            allowClear={false}
            mode='year'
            format='YYYY'
            value={dateString}
            onPanelChange={(date) => setDateString(date)}
            style={{ width: '100%' }}
          />
        )
      // 月选择
      case '1':
        return (
          <MonthPicker
            key='full-date-picker-month'
            allowClear={false}
            value={dateString}
            onChange={(date) => setDateString(date)}
            style={{ width: '100%' }}
          />
        )
      // 日选择
      case '2':
        return (
          <DatePicker
            key='full-date-picker-date'
            allowClear={false}
            value={dateString}
            onChange={(date) => setDateString(date)}
            style={{ width: '100%' }}
          />
        )
      // 日期区间，精确到日
      case '3':
        return (
          <RangePicker
            key='full-date-picker-range-date'
            allowClear={false}
            value={dateString}
            onChange={(date) => setDateString(date)}
            style={{ width: '100%' }}
          />
        )
      // 日期区间，精确到时分秒
      case '4':
        return (
          <RangePicker
            key='full-date-picker-range-full-date'
            showTime
            allowClear={false}
            value={dateString}
            onChange={(date) => setDateString(date)}
            style={{ width: '100%' }}
          />
        )
      default:
        break
    }
  }, [dateType, dateString])

  const handleSelectChange = (type) => {
    setDateType(type)
    switch (type) {
      // 日期区间，精确到日
      case '3':
        setDateString([moment().subtract(1, 'days'), moment()])
        break
      // 日期区间，精确到时分秒
      case '4':
        {
          const defaultStart = moment(moment().format('YYYY-MM-DD'))
          const defaultEnd = moment(moment().format('YYYY-MM-DD')).add(1, 'days').subtract(1, 'seconds')
          setDateString([defaultStart, defaultEnd])
        }
        break
      default:
        setDateString(moment())
        break
    }
  }

  const { onlyItem, formProps, formItemProps, options, optionLabel } = props
  const ParentComponent = onlyItem ? React.Fragment : Form
  return (
    <ParentComponent {...formProps}>
      <Form.Item label='查询方式' {...formItemProps}>
        <Select
          value={dateType}
          onChange={handleSelectChange}
        >
          {
            options.map(opt => {
              return <Option key={`full-date-picker-${opt}`} value={opt}>{optionLabel[opt]}</Option>
            })
          }
        </Select>
      </Form.Item>
      <Form.Item label='日期' {...formItemProps}>
        {DatePickerComponent}
      </Form.Item>
    </ParentComponent>
  )
}

FullDatePicker.propTypes = {
  dateType: PropTypes.string,
  dateString: PropTypes.string,
  onlyItem: PropTypes.bool,
  formProps: PropTypes.object,
  formItemProps: PropTypes.object,
  options: PropTypes.array,
  optionLabel: PropTypes.object
}

FullDatePicker.defaultProps = {
  dateType: '0',
  dateString: moment().format('YYYY'),
  onlyItem: false,
  formProps: {},
  formItemProps: {},
  options: ['0', '1', '2'],
  optionLabel: {
    '0': '年',
    '1': '月',
    '2': '日',
    '3': '日期区间',
    '4': '日期区间-时分秒'
  }
}

export default FullDatePicker