gameapi-client/src/views/components/EchartSearchDate/index.vue

<template>
   <el-form-item prop="operateTimeType">
      <el-radio-group v-model="operateTimeType" @change="timeTypeChange">
         <!-- <el-radio-button :label="t('日')" value="day" /> -->
         <el-radio-button :label="t('周')" value="week" />
         <el-radio-button :label="t('月')" value="month" />
      </el-radio-group>
   </el-form-item>

   <el-form-item prop="dateRange">
      <el-date-picker v-model="dateRange" :shortcuts="shortcuts" :style="`width: ${dateType == 'datetimerange' ? '380px' : '250px'}`"
         :editable="false" :disabledDate="disabledDate" :type="dateType" :start-placeholder="t('开始时间')"
         :end-placeholder="t('结束时间')" :format="formatType" value-format="YYYY-MM-DD" @change="dateRangeChange"
         :clearable="clearable" />
   </el-form-item>
</template>

<!-- 时间格式传递给后端，都要带上时分秒，并转化为毫秒，结束时间为当天23:59:59 -->
<script setup>
import dayjs from 'dayjs';

const props = defineProps({
   dateType: { // 选择器类型
      type: String,
      default: 'datetimerange'
   },
   clearable: { // 是否显示清除按钮
      type: Boolean,
      default: true
   }
});

const operateTimeType = defineModel('operateTimeType'), dateRange = defineModel('dateRange');
const formatType = 'YYYY-MM-DD';    // 时间格式
const emits = defineEmits(['dateChange']);
const isFirst = ref(true);  // 是否第一次加载

// 暂存，用于重置
const initData = reactive({
   operateTimeType: operateTimeType.value,
   dateRange: JSON.parse(JSON.stringify(dateRange.value))
});

// 禁用当前日期之后选择
const disabledDate = (time) => {
   return time.getTime() >= Date.now();
}

// 快捷日期区间选择
const timeTypeChange = (val) => {
   switch (val) {
      case 'day':
         dateRange.value = getTimeFn(dayjs().startOf('day'));
         break
      case 'week':
         dateRange.value = [
            dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD'),
            dayjs().endOf('day').format('YYYY-MM-DD')
         ]
         break
      case 'month':
         dateRange.value = getTimeFn(dayjs().subtract(1, 'month').startOf('day'));
         break
   }

   // 初始化时不触发父组件的查询
   if (!isFirst.value) {
      emits('dateChange');
   }
}
const shortcuts = [
  {
    text: '今日',
    value: () => {
      const start = new Date()
      start.setHours(0, 0, 0, 0)
      const end = new Date()
      end.setHours(23, 59, 59, 999)
      return [start, end]
    },
  },
  {
    text: '昨日',
    value: () => {
      const start = new Date()
      start.setDate(start.getDate() - 1)
      start.setHours(0, 0, 0, 0)
      const end = new Date()
      end.setDate(end.getDate() - 1)
      end.setHours(23, 59, 59, 999)
      return [start, end]
    },
  },
  {
    text: '本周',
    value: () => {
      const now = new Date()
      const start = new Date()
      const day = now.getDay() || 7 // 周日是0，转换成7
      start.setDate(now.getDate() - day + 1)
      start.setHours(0, 0, 0, 0)
      const end = new Date()
      end.setHours(23, 59, 59, 999)
      return [start, end]
    },
  },
  {
    text: '上周',
    value: () => {
      const end = new Date()
      end.setDate(end.getDate() - end.getDay())
      end.setHours(23, 59, 59, 999)
      const start = new Date()
      start.setDate(end.getDate() - 6)
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '本月',
    value: () => {
      const start = new Date()
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      const end = new Date()
      end.setHours(23, 59, 59, 999)
      return [start, end]
    },
  },
  {
    text: '上月',
    value: () => {
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      const end = new Date()
      end.setDate(0) // 上个月最后一天
      end.setHours(23, 59, 59, 999)
      return [start, end]
    },
  },
]
// 日期区间选择
const dateRangeChange = (dataValue) => {
   operateTimeType.value = '';

   if (dataValue) {
      const start = new Date(dataValue[0]);
      const end = new Date(dataValue[1]);

      start.setHours(0, 0, 0); // 设置开始时间为当天的00:00:00点
      end.setHours(23, 59, 59); // 设置结束时间为当天的23:59:59
      dateRange.value[0] = dayjs(start).format('YYYY-MM-DD');
      dateRange.value[1] = dayjs(end).format('YYYY-MM-DD');
   }

   // 初始化时不触发父组件的查询
   if (!isFirst.value) {
      emits('dateChange');
   }
}

// 生成日期区间
const getTimeFn = (startTime) => {
   return [startTime.format('YYYY-MM-DD'), dayjs().endOf('day').format('YYYY-MM-DD')];
}

// 父组件重置
defineExpose({
   dateResetQuery: () => {
      // 优先根据时间类型来设定时间区间
      if (initData.operateTimeType) {
         operateTimeType.value = initData.operateTimeType;     // 重置时间类型
         timeTypeChange(initData.operateTimeType);
      } else if (initData.dateRange) {
         dateRange.value = initData.dateRange;     // 重置日期区间
         dateRangeChange(initData.dateRange);
      } else {
         operateTimeType.value = '';     // 清空时间类型
         dateRange.value = [];     // 清空日期区间 
      }
   }
});

// 初始化
const init = () => {
   // 初始化时，优先根据时间类型来设定时间区间
   if (operateTimeType.value) {
      timeTypeChange(operateTimeType.value);
   } else if (dateRange.value.length) {
      dateRangeChange(dateRange.value);
   }
   isFirst.value = false;
}

init();
</script>

<style scoped lang="scss"></style>