cip-components/cip-form-input/extension/date-range/index.vue

<template>
  <div class="cip-date-scope" :style="{width}">
    <basic-date-picker class="cip-date-range"
                      :modelValue="modelValue"
                      :config="config"
                      @update:modelValue="val => emitDateInput(val)"
                      ></basic-date-picker>
    <span class="cip-date-scope__link">至</span>
<!--    此处验证由上级处理-->
    <basic-date-picker :modelValue="otherValue"
                       class="cip-date-range"
                      :config="otherConfig"
                      @update:modelValue="val => emitDateInput(val, 'otherValue')"
                      ></basic-date-picker>
  </div>
</template>

<script>
import BasicDatePicker from '../../basic/date-picker'
import { computed } from 'vue'
import { useFormInput } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
import dayjs from 'dayjs'
import { isInputEmpty } from '@cip/utils/util'
export default {
  components: { BasicDatePicker },
  props: formInputProps,
  emits: ['update:modelValue', 'update:otherValue'],
  setup (props, context) {
    const { emitModelValue, emitOtherValue, ...formInput } = useFormInput(props, context)
    const getNotEmptyValue = (a, b) => {
      if (!isInputEmpty(a) && !isInputEmpty(b)) return [a, b]
      if (!isInputEmpty(a)) return [a]
      if (!isInputEmpty(b)) return [b]
      return []
    }
    // 用于比较大小
    const dateInfoToTimes = (dateInfoList) => {
      return dateInfoList.map(v => {
        if (typeof v === 'number') return v
        if (v instanceof Date) return v.getTime()
        return dayjs(v).valueOf()
      })
    }
    const config = computed(() => {
      const config = { ...props.config }
      // config.min = config.min  默认
      config.max = Math.min(...dateInfoToTimes(getNotEmptyValue(props.otherValue, props.config.max)))
      return config
    })

    const otherConfig = computed(() => {
      const config = { ...props.config }
      config.min = Math.max(...dateInfoToTimes(getNotEmptyValue(props.modelValue, props.config.otherMin ?? props.config.min)))
      if (!isInputEmpty(props.config.otherMax)) config.max = props.config.otherMax
      config.placeholder = props.config.otherPlaceholder
      return config
    })

    const formatter = computed(() => {
      return props.config?.formatter ?? (type.value === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')
    })

    // range使用date和datetime两种类型
    const type = computed(() => {
      const viewType = props.config?.viewType ?? 'date'
      return ['date', 'datetime'].includes(viewType) ? viewType : 'date'
    })

    /**
     * element plus的date-picker组件不再提供value-format属性
     * 提交val时候引入dayjs的format方法手动转换
     *
     * 时间戳时会报modelValue不能接收number
     */
    const emitDateInput = (val, withOther) => {
      let value = ''
      if (!val) {
        value = ''
      } else if (props.config?.isTimestamp) {
        value = new Date(val).getTime()
      } else {
        value = dayjs(val).format(formatter.value)
      }
      if (withOther) {
        emitOtherValue(value)
      } else {
        emitModelValue(value)
      }
    }

    return {
      ...formInput,
      emitDateInput,
      config,
      otherConfig
    }
  }
}
</script>

<style lang="less">
.cip-date-scope{
  display: flex;
  flex-grow: 1;
  width: 100%;
  align-content: center;
  .cip-date-range{
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
  }
  &__link{
    // is-success 将导致字体变色
    color: #999;
    margin: 0 8px;
  }
  .el-date-editor.el-input{
    width: 100%;
    flex-shrink: 1;
  }
  // clear图标在range时比较占用空间
  .el-input--suffix .el-input__inner{
    padding-right: 22px;
  }
  .el-input__suffix{
    right: 0;
  }
}
</style>