实现时间日期段选择组件（vue版）

如上图，实现左侧选择时间段，右侧时间控件被动呈现时间，同时如果右侧主动更改时间，左侧取消选择

// useTools.js
export const dateFormatStr = 'YYYY-MM-DD hh:mm:ss'

export const options = [
  {
    value: 0,
    label: '全部',
  },
  {
    value: 1,
    label: '今天',
  },
  {
    value: 2,
    label: '昨天',
  },
  {
    value: 3,
    label: '近七天',
  },
  {
    value: 4,
    label: '近30天',
  },
]

const getDate = (val, dateFormatStr) => {
  const dateTime = dayjs().subtract(val, 'day').format(dateFormatStr)
  return dateTime
}

export const setDate = (val) => {
  let d = undefined
  const today = dayjs().format(dateFormatStr)

  switch (val) {
    case 1: // 今天
      d = dayjs().format(dateFormatStr)
      return [dayjs(`${d} 00:00:00`), dayjs(`${d} 23:59:59`)]
    case 2: // 昨天
      d = getDate(1, dateFormatStr)
      return [dayjs(`${d} 00:00:00`), dayjs(`${d} 23:59:59`)]
    case 3: // 近七天
      d = getDate(7, dateFormatStr)
      return [dayjs(`${d} 00:00:00`), dayjs(`${today} 23:59:59`)]
    case 4: // 近30天
      d = getDate(30, dateFormatStr)
      return [dayjs(`${d} 00:00:00`), dayjs(`${today} 23:59:59`)]
    case 0:
    default:
      return undefined
  }
}

<template>
  <div class="mr-10">
    <a-select
      :value="useVal"
      :options="options"
      placeholder="请选择"
      @change="handleChange"
      style="width: 70px"
    ></a-select>
  </div>
  <a-range-picker
    v-model:value="useFormDateVal"
    :allow-clear="false"
    format="YYYY-MM-DD"
  />
</template>

<script setup>
import dayjs from 'dayjs'
import {options, setDate } from './useTools.js'     //该vue文件与useTools.js平行同目录

const emit = defineEmits(['update:value'])

const props = defineProps({
  value: {
    type: Object,
    required: false,
  },
})

const useVal = ref(0)

const useFormDateVal = computed({
  get() {
    return props.value
  },
  set(val) {
    emit('update:value', val)
    useVal.value = undefined
  },
})

const handleChange = (val) => {
  useVal.value = val
  emit('update:value', setDate(val))
}
</script>

<style lang="sass" scoped>
    .mr-10{
        margin-right: 10px;
    }
</style>