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

<template>
  <div :class="['cip-date-scope',{'is-focus': isFocus, 'is-separate': isSeparate}]" :style="{width}">
      <basic-date-picker
        class="cip-date-range"
        v-model="proxyValue"
        :config="config"
        :disabled="disabled"
        @focus="onValueFocus"
        @blur="onValueBlur"
     />
    <span class="cip-date-scope__link"> — </span>
<!--    此处验证由上级处理-->
      <basic-date-picker
        class="cip-date-range"
        v-model="proxyOtherValue[0].value"
        :config="otherConfig"
        :disabled="disabled"
        @focus="onOtherValueFocus"
        @blur="onOtherValueBlur"
      />
  </div>
</template>

<script>
import BasicDatePicker from '../../basic/date-picker'
import { computed } from 'vue'
import { useFormInput } from '@cip/components/hooks/form-input'
import { formInputProps, fromInputEmits } from '../../form-input-props'
import { dateInfoToTimes, getNotEmptyValue } from './util'
import { getUsingConfig, isInputEmpty } from '@cip/utils/util'
import { useFocusInput } from './use-focus-input'
import { useCipConfig } from '@cip/components/hooks/use-cip-config'
export default {
  components: { BasicDatePicker },
  props: formInputProps,
  emits: [...fromInputEmits],
  setup (props, context) {
    const {
      proxyValue,
      proxyOtherValue,
      securityConfig,
      ...formInput
    } = useFormInput(props, context, {
      maxOtherKey: 1
    })
    const cipConfig = useCipConfig()
    const isSeparate = computed(() => getUsingConfig(securityConfig.value.separate, cipConfig.range?.separate, false))

    const config = computed(() => {
      const config = { ...props.config }
      config.max = Math.min(...dateInfoToTimes(getNotEmptyValue(proxyOtherValue[0].value, props.config.max)))
      config.noIcon = !isSeparate.value // true
      return config
    })

    const otherConfig = computed(() => {
      const config = { ...props.config }
      config.min = Math.max(...dateInfoToTimes(getNotEmptyValue(proxyValue.value, securityConfig.value.otherMin ?? securityConfig.value.min)))
      if (!isInputEmpty(securityConfig.value.otherMax)) config.max = securityConfig.value.otherMax
      config.placeholder = securityConfig.value.otherPlaceholder
      // viewType为date或默认的时候，启用otherDate标记，返回值修改时分秒为23:59:59
      if (['date', undefined].includes(config.viewType)) config.isOtherDate = true
      return config
    })

    const [isValueFocus, onValueFocus, onValueBlur] = useFocusInput()
    const [isOtherValueFocus, onOtherValueFocus, onOtherValueBlur] = useFocusInput()
    const isFocus = computed(() => {
      return isValueFocus.value || isOtherValueFocus.value
    })

    return {
      ...formInput,
      onValueFocus,
      onValueBlur,
      onOtherValueFocus,
      onOtherValueBlur,
      isFocus,
      isSeparate,
      config,
      otherConfig,
      proxyValue,
      proxyOtherValue
    }
  }
}
</script>

<style lang="less">
.cip-date-scope{
  display: flex;
  width: 100%;
  align-items: center;
  &.is-separate{
    .cip-date-scope__link{
      // is-success 将导致字体变色
      color: var(~'--@{elNamespace}-input-text-color');
      font-size: 16px;
      zoom: 0.625;
      margin: 0 4px;
    }
  }
}
// 教研错误时的颜色变化
.@{elNamespace}-form-item.is-error .cip-date-scope:not(.is-separate){
  box-shadow: 0 0 0 1px var(~'--@{elNamespace}-color-danger') inset;
}

.cip-date-scope:not(.is-separate){
  padding: 1px 1px;
  box-shadow: 0 0 0 1px var(~'--@{elNamespace}-input-border-color',var(~'--@{elNamespace}-border-color')) inset;
  border-radius: var(~'--@{elNamespace}-input-border-radius',var(~'--@{elNamespace}-border-radius-base'));
  &:hover{
    box-shadow: 0 0 0 1px var(~'--@{elNamespace}-border-color-hover',var(~'--@{elNamespace}-border-color')) inset;
  }
  &.is-focus{
    box-shadow: 0 0 0 1px @primary inset;
  }
  .cip-date-range.cip-form-picker{
    line-height: var(~'--@{elNamespace}-component-size');
    flex-grow: 2;
    flex-basis: 0;
    display: flex;
    .@{elNamespace}-input__wrapper{
      box-shadow: none;
      padding-top: 0;
      padding-bottom: 0;
      .@{elNamespace}-input__inner{
        text-align: center;
      }
    }
  }
  .cip-date-scope__link{
    // is-success 将导致字体变色
    color: var(~'--@{elNamespace}-input-text-color');
    font-size: 16px;
    zoom: 0.625;
    margin: 0 4px;
  }
  .@{elNamespace}-date-editor.@{elNamespace}-input{
    width: 100%;
    flex-shrink: 1;
  }

  .@{elNamespace}-input__suffix{
    right: 0;
  }
}
</style>