| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <template> |
| H | 2 | <div class="flex flex-row items-center gap-2"> |
| 3 | <el-radio-group v-model="shortcutDays" @change="handleShortcutDaysChange"> | |
| 4 | <el-radio-button :label="1">昨天</el-radio-button> | |
| 5 | <el-radio-button :label="7">最近7天</el-radio-button> | |
| 6 | <el-radio-button :label="30">最近30天</el-radio-button> | |
| 7 | </el-radio-group> | |
| 8 | <el-date-picker | |
| 9 | v-model="times" | |
| 10 | value-format="YYYY-MM-DD HH:mm:ss" | |
| 11 | type="daterange" | |
| 12 | start-placeholder="开始日期" | |
| 13 | end-placeholder="结束日期" | |
| 14 | :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" | |
| 15 | :shortcuts="shortcuts" | |
| 16 | class="!w-240px" | |
| 17 | @change="emitDateRangePicker" | |
| 18 | /> | |
| 19 | <slot></slot> | |
| 20 | </div> | |
| 21 | </template> | |
| 22 | <script lang="ts" setup> | |
| 23 | import dayjs from 'dayjs' | |
| 24 | import * as DateUtil from '@/utils/formatTime' | |
| 25 | ||
| 26 | /** 快捷日期范围选择组件 */ | |
| 27 | defineOptions({ name: 'ShortcutDateRangePicker' }) | |
| 28 | ||
| 29 | const shortcutDays = ref(7) // 日期快捷天数（单选按钮组）, 默认7天 | |
| 30 | const times = ref<[string, string]>(['', '']) // 时间范围参数 | |
| 31 | defineExpose({ times }) // 暴露时间范围参数 | |
| 32 | /** 日期快捷选择 */ | |
| 33 | const shortcuts = [ | |
| 34 | { | |
| 35 | text: '昨天', | |
| 36 | value: () => DateUtil.getDayRange(new Date(), -1) | |
| 37 | }, | |
| 38 | { | |
| 39 | text: '最近7天', | |
| 40 | value: () => DateUtil.getLast7Days() | |
| 41 | }, | |
| 42 | { | |
| 43 | text: '本月', | |
| 44 | value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')] | |
| 45 | }, | |
| 46 | { | |
| 47 | text: '最近30天', | |
| 48 | value: () => DateUtil.getLast30Days() | |
| 49 | }, | |
| 50 | { | |
| 51 | text: '最近1年', | |
| 52 | value: () => DateUtil.getLast1Year() | |
| 53 | } | |
| 54 | ] | |
| 55 | ||
| 56 | /** 设置时间范围 */ | |
| 57 | function setTimes() { | |
| 58 | const beginDate = dayjs().subtract(shortcutDays.value, 'd') | |
| 59 | const yesterday = dayjs().subtract(1, 'd') | |
| 60 | times.value = DateUtil.getDateRange(beginDate, yesterday) | |
| 61 | } | |
| 62 | ||
| 63 | /** 快捷日期单选按钮选中 */ | |
| 64 | const handleShortcutDaysChange = async () => { | |
| 65 | // 设置时间范围 | |
| 66 | setTimes() | |
| 67 | // 发送时间范围选中事件 | |
| 68 | await emitDateRangePicker() | |
| 69 | } | |
| 70 | ||
| 71 | /** 触发事件：时间范围选中 */ | |
| 72 | const emits = defineEmits<{ | |
| 73 | (e: 'change', times: [dayjs.ConfigType, dayjs.ConfigType]): void | |
| 74 | }>() | |
| 75 | /** 触发时间范围选中事件 */ | |
| 76 | const emitDateRangePicker = async () => { | |
| 77 | emits('change', times.value) | |
| 78 | } | |
| 79 | ||
| 80 | /** 初始化 **/ | |
| 81 | onMounted(() => { | |
| 82 | handleShortcutDaysChange() | |
| 83 | }) | |
| 84 | </script> | |
