ant-design-vue时间查询简写默认可以切换日月年

 <!--
 * @Date: 2023-04-23 10:08:17
-->
<template>
  <div class="HomeTimeSelect">
    <a-radio-group
      v-model:value="timeType"
      class="time-select"
      @change="handleTypeChange()"
    >
      <a-radio-button
        v-for="(item, key) in timeTypeMap"
        :key="key"
        :value="key"
        class="time-item"
        >{
    
    {
    
     item.name }}</a-radio-button
      >
    </a-radio-group>
    <a-range-picker
      v-model:value="timeValue"
      class="date-picker"
      :allowClear="false"
      @change="handleChangeType"
    >
    </a-range-picker>
  </div>
</template>

<script setup>
import {
    
     ref } from "vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import {
    
     message } from "ant-design-vue";

dayjs.locale("zh-cn");

const props = defineProps({
    
    });
const emits = defineEmits(["change"]);

const timeValue = ref([dayjs(), dayjs()]);
const timeType = ref("date");

const timeTypeMap = {
    
    
  date: {
    
     value: 1, name: "日", type: "day" },
  week: {
    
     value: 2, name: "周", type: "week" },
  month: {
    
     value: 3, name: "月", type: "month" },
  year: {
    
     value: 4, name: "年", type: "year" },
};
// 时间类型变更
const handleTypeChange = () => {
    
    
  const beginTime = dayjs()
    .startOf(timeTypeMap[timeType.value]?.type)
    .format("YYYY-MM-DD");
  const endTime = dayjs()
    .endOf(timeTypeMap[timeType.value]?.type)
    .format("YYYY-MM-DD");
  timeValue.value = [dayjs(beginTime), dayjs(endTime)];
  emits(
    "change",
    dayjs(beginTime).valueOf(),
    dayjs(endTime).valueOf(),
    timeTypeMap[timeType.value]?.value
  );
};
const handleChangeType = (val) => {
    
    
  const beginTime = dayjs(val[0]).format("YYYY-MM-DD");
  const endTime = dayjs(val[1]).format("YYYY-MM-DD");
  // 超过一年提示报错
  if (dayjs(endTime).diff(dayjs(beginTime), "years") > 1) {
    
    
    message.error("查询时间不能超过1年");
    return;
  }
  emits(
    "change",
    dayjs(beginTime).valueOf(),
    dayjs(endTime).valueOf(),
    timeTypeMap[timeType.value]?.value
  );
};
defineExpose({
    
    
  handleTypeChange,
});
</script>


<style lang="scss" scoped>
.HomeTimeSelect {
    
    
  @include fac();
  .date-picker {
    
    
    width: 200px;
  }
}
</style>