his/openhis-ui-vue3/src/components/TableLayout/QuickDateRange.vue

<template>
  <div class="quick-date-range">
    <el-select v-model="quickType" class="quick-select" @change="handleQuickChange">
      <el-option label="自定义时间段" value="custom" />
      <el-option label="今天" value="today" />
      <el-option label="昨天" value="yesterday" />
      <el-option label="本周" value="thisWeek" />
      <el-option label="上周" value="lastWeek" />
      <el-option label="最近30日" value="last30Days" />
    </el-select>
    <el-date-picker
      v-model="innerValue"
      type="daterange"
      range-separator="-"
      :start-placeholder="startPlaceholder || '开始日期'"
      :end-placeholder="endPlaceholder || '结束日期'"
      :value-format="valueFormat"
      :clearable="clearable"
      :style="datePickerStyle"
      v-bind="attrs"
      @change="handleDateChange"
    />
  </div>
</template>

<script setup lang="ts">
import {computed, ref, watch} from 'vue';
import type {QuickDateRangeProps} from '../types/QuickDateRange.d';

defineOptions({
  name: 'QuickDateRange'
});

const props = withDefaults(defineProps<QuickDateRangeProps>(), {
  modelValue: () => [],
  startPlaceholder: '',
  endPlaceholder: '',
  valueFormat: 'YYYY-MM-DD',
  clearable: true,
  datePickerStyle: () => ({}),
  attrs: () => ({}),
});

const emit = defineEmits<{
  'update:modelValue': [value: string[]];
  change: [value: string[]];
}>();

const innerValue = ref<string[]>(props.modelValue && props.modelValue.length ? [...props.modelValue] : []);
const quickType = ref<string>('custom');

watch(
  () => props.modelValue,
  (val) => {
    if (!val || !val.length) {
      innerValue.value = [];
      quickType.value = 'custom';
    } else {
      innerValue.value = [...val];
    }
  },
  { deep: true }
);

const datePickerStyle = computed(() => {
  return Object.assign({ width: '300px' }, props.datePickerStyle || {});
});

function formatDate(date) {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  return `${y}-${m}-${d}`;
}

function getToday() {
  const today = new Date();
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate());
  const s = formatDate(d);
  return [s, s];
}

function getYesterday() {
  const today = new Date();
  const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
  const s = formatDate(d);
  return [s, s];
}

function getThisWeek() {
  const today = new Date();
  const day = today.getDay() || 7; // 周日返回 7
  const monday = new Date(today);
  monday.setDate(today.getDate() - day + 1);
  const sunday = new Date(monday);
  sunday.setDate(monday.getDate() + 6);
  return [formatDate(monday), formatDate(sunday)];
}

function getLastWeek() {
  const today = new Date();
  const day = today.getDay() || 7;
  const lastMonday = new Date(today);
  lastMonday.setDate(today.getDate() - day - 6);
  const lastSunday = new Date(lastMonday);
  lastSunday.setDate(lastMonday.getDate() + 6);
  return [formatDate(lastMonday), formatDate(lastSunday)];
}

function getLast30Days() {
  const today = new Date();
  const end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
  const start = new Date(end);
  start.setDate(end.getDate() - 29);
  return [formatDate(start), formatDate(end)];
}

function handleQuickChange(val: string) {
  if (val === 'custom') {
    // 自定义时间段，清空日期值
    innerValue.value = [];
    emit('update:modelValue', []);
    emit('change', []);
    return;
  }
  let range: string[] = [];
  switch (val) {
    case 'today':
      range = getToday();
      break;
    case 'yesterday':
      range = getYesterday();
      break;
    case 'thisWeek':
      range = getThisWeek();
      break;
    case 'lastWeek':
      range = getLastWeek();
      break;
    case 'last30Days':
      range = getLast30Days();
      break;
    default:
      range = [];
  }
  innerValue.value = range;
  emit('update:modelValue', range);
  emit('change', range);
}

function handleDateChange(val: string[] | null) {
  // 用户手动选择时间段时，将预设切换为自定义
  quickType.value = 'custom';
  innerValue.value = val || [];
  emit('update:modelValue', innerValue.value);
  emit('change', innerValue.value);
}
</script>

<style scoped lang="scss">
.quick-date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  .quick-select {
    width: 130px;
  }
}
</style>