cip-components/cip-form-input/basic/date-picker/index.vue

<template>
  <el-date-picker class="cip-form-picker"
                  :model-value="transValue"
                  @update:modelValue="emitDateInput"
                  :format="formatter"
                  :disabled="disabled"
                  :type="type"
                  :placeholder="placeholder"
                  :clearable="clearable"
                  :style="{width}"
                  :disabled-date="disabledDate"
                  ></el-date-picker>
</template>
<script>
import { ElDatePicker } from 'element-plus'
import { useFormInput } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
import { computed } from 'vue'
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
import weekYear from 'dayjs/plugin/weekYear'
import weekOfYear from 'dayjs/plugin/weekOfYear'
import { isArray, isNotEmpty, isNumber } from '@cip/utils/util'
dayjs.extend(advancedFormat)
dayjs.extend(weekYear)
dayjs.extend(weekOfYear)
export default {
  components: { ElDatePicker },
  props: formInputProps,
  inheritAttrs: false,
  emits: ['update:modelValue'],
  setup (props, context) {
    const { emitInput, ...formInput } = useFormInput(props, context)
    const disabled = computed(() => {
      return props.config?.disabled ?? false
    })
    const isTimestamp = computed(() => {
      return props.config?.isTimestamp ?? false
    })

    const transValue = computed({
      get () {
        if (!props.modelValue) return null
        if (isTimestamp.value) {
          return dayjs(props.modelValue).format(formatter.value)
        }
        if (type.value === 'dates') {
          return props.modelValue.split(',')
        }
        return dayjs(props.modelValue).format(formatter.value)
      }
    })

    const formatter = computed(() => {
      if (props.config?.formatter) return props.config?.formatter
      const typeToFormatter = {
        year: 'YYYY',
        month: 'YYYY-MM',
        week: 'YYYY 第 ww 周',
        date: 'YYYY-MM-DD',
        datetime: 'YYYY-MM-DD HH:mm:ss'
      }
      return typeToFormatter[type.value] ?? typeToFormatter.date
    })

    const type = computed(() => {
      const viewType = props.config?.viewType ?? 'date'
      return viewType.includes('range') ? 'date' : viewType
    })
    // 是否包含等于
    const isEqual = computed(() => {
      return props.config?.isEqual ?? false
    })
    // disable日期
    const disabledDate = computed(() => {
      return date => {
        if (props.config?.disabledDate) {
          return props.config?.disabledDate(date)
        }
        if (isNotEmpty(props.config?.max) || isNotEmpty(props.config?.min)) {
          return getDisabledConfig(date)
        }
        return undefined
      }
    })
    // disable时间转换
    const dateTransform = (date) => {
      if (isNumber(date)) return date
      if (!date?.includes(' ')) return new Date(date + ' 00:00:00').getTime()
      return new Date(date).getTime()
    }
    // min/max的disable实现
    const getDisabledConfig = (date) => {
      const maxDate = dateTransform(props.config?.max)
      const minDate = dateTransform(props.config?.min)
      const dateTime = date.getTime()
      if (isNotEmpty(props.config?.max) && isNotEmpty(props.config?.min)) {
        if (isEqual.value) return (dateTime >= maxDate) || (dateTime <= minDate)
        return (dateTime > maxDate) || (dateTime < minDate)
      }
      if (isNotEmpty(props.config?.max)) {
        if (isEqual.value) return dateTime >= maxDate
        return dateTime > maxDate
      }
      if (isNotEmpty(props.config?.min)) {
        if (isEqual.value) return dateTime <= minDate
        return dateTime < minDate
      }
    }

    /**
     * element plus的date-picker组件不再提供value-format属性
     * 提交val时候引入dayjs的format方法手动转换
     */
    const emitDateInput = (val) => {
      emitInput(typeToValue(val))
    }
    // 不同事件类型传值不同，做转换
    const typeToValueMap = {
      dates: (val) => {
        if (!isArray(val)) val = [val]
        return val?.map(i => dayjs(i).format(formatter.value)).join(',')
      },
      datetime: val => dayjs(val).format('YYYY-MM-DD HH:mm:ss'),
      week: val => dayjs(val).format('YYYY-MM-DD')
    }
    const typeToValue = (val) => {
      if (!val) return ''
      if (isTimestamp.value) return new Date(val).getTime()
      return typeToValueMap?.[type.value]?.(val) ?? dayjs(val).format(formatter.value)
    }

    return {
      ...formInput,
      transValue,
      disabled,
      formatter,
      emitDateInput,
      type,
      disabledDate
    }
  }
}
</script>

<style lang="less">
.el-input.el-date-editor.cip-form-picker{
  width: 100%;
}
</style>