| | |
| | | <script setup lang="ts"> |
| | | import { ElDatePicker } from 'element-plus'; |
| | | import { definePropType } from 'element-plus/es/utils/vue/props/runtime'; |
| | | import { ref, type PropType, computed, watch } from 'vue'; |
| | | import { ref, type PropType, computed, watch, nextTick } from 'vue'; |
| | | import type { TimeRangeParam } from '../types'; |
| | | import type { TimeRangeEnum } from './types'; |
| | | import { timeRangeEnumMapTitle, timeRangeEnumMapValue } from './types'; |
| | |
| | | }); |
| | | const emit = defineEmits(['change']); |
| | | |
| | | /** |
| | | * 需要对 dateValue 格式化,dataValue 结束时间不是23:59:59 |
| | | */ |
| | | const formatDateValue = computed({ |
| | | get: () => { |
| | | if (!dateValue.value) return null; |
| | | return [moment(dateValue.value[0]).format('YYYY-MM-DD 00:00:00'), moment(dateValue.value[1]).format('YYYY-MM-DD 23:59:59')] as [ |
| | | string, |
| | | string |
| | | ]; |
| | | }, |
| | | set: (value) => { |
| | | dateValue.value = value; |
| | | }, |
| | | }); |
| | | const dateChange = () => { |
| | | nextTick(() => { |
| | | emit('change', dateValue.value); |
| | | }); |
| | | }; |
| | | |
| | | const disabledDate = (date: Date) => { |
| | | return date > CURRENT_DAY; |
| | | }; |
| | | |
| | | const resetQuickPickValue = () =>{ |
| | | const resetQuickPickValue = () => { |
| | | quickPickValue.value = null; |
| | | } |
| | | }; |
| | | const quickPickValue = ref<TimeRangeEnum>(null); |
| | | const quickPickRangeClick = (val: TimeRangeEnum) => { |
| | | if (quickPickValue.value === val) return; |
| | | |
| | | quickPickValue.value = val; |
| | | formatDateValue.value = timeRangeEnumMapValue[val]().map((item) => formatDate(item)) as [string, string]; |
| | | dateValue.value = timeRangeEnumMapValue[val]().map((item) => formatDate(item)) as [string, string]; |
| | | dateChange(); |
| | | }; |
| | | |
| | | const offsetClickIsAllow = computed(() => !!dateValue.value && !props.disabled); |
| | | const preDayClick = () => { |
| | | if (!dateValue.value) return; |
| | | dateValue.value[0] = moment(dateValue.value[0]).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'); |
| | | dateValue.value = [...dateValue.value]; |
| | | resetQuickPickValue(); |
| | | dateChange(); |
| | | |
| | | resetQuickPickValue(); |
| | | }; |
| | | |
| | | const nextDayClick = () => { |
| | | if (!dateValue.value) return; |
| | | dateValue.value[1] = moment(dateValue.value[1]).add(1, 'day').format('YYYY-MM-DD HH:mm:ss'); |
| | | dateValue.value = [...dateValue.value]; |
| | | dateChange(); |
| | | |
| | | resetQuickPickValue(); |
| | | }; |
| | | |
| | | const datePickerChange = (va) => { |
| | | resetQuickPickValue(); |
| | | dateChange(); |
| | | }; |
| | | |
| | | watch( |
| | | () => formatDateValue.value, |
| | | (val) => { |
| | | emit('change', val); |
| | | } |
| | | ); |
| | | |
| | | defineExpose({ |
| | | formatDateValue |
| | | }) |
| | | formatDateValue: dateValue, |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | :deep(.el-date-editor .el-range__close-icon--hidden) { |