fix(sj_1.1.0_beta1): 修复时间范围查询组件默认值赋值问题

This commit is contained in:
xlsea 2024-06-13 10:41:36 +08:00
parent a07016214f
commit 9e1bc3c9f5

View File

@ -13,48 +13,63 @@ interface Props {
const props = defineProps<Props>();
interface Emits {
(e: 'update:beginDate', beginDate: number): void;
(e: 'update:endDate', endDate: number): void;
(e: 'update:beginDate', beginDate: number | null): void;
(e: 'update:endDate', endDate: number | null): void;
}
const emit = defineEmits<Emits>();
const dateRange = ref<[number, number]>(getDefaultDate());
const dateRange = ref<[number, number] | undefined>(getDefaultDate());
watch(
() => props.beginDate,
beginDate => {
if (typeof beginDate === 'number' && beginDate) {
dateRange.value[0] = beginDate;
() => [props.beginDate, props.endDate],
val => {
if (!val[0] && !val[1]) {
dateRange.value = undefined;
}
}
},
{ immediate: true }
);
watch(
() => props.endDate,
endDate => {
if (typeof endDate === 'number' && endDate) {
dateRange.value[1] = endDate;
}
() => dateRange.value,
val => {
emit('update:beginDate', val ? val[0] : null);
emit('update:endDate', val ? val[1] : null);
},
{ immediate: true }
);
function getDefaultDate(): [number, number] {
const currentDate = new Date();
const currentTime = currentDate.getTime();
currentDate.setMonth(currentDate.getMonth() - 1);
return [currentDate.getTime(), currentTime];
const today = new Date();
const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);
const oneMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
const startOfDayOneMonthAgo = new Date(
oneMonthAgo.getFullYear(),
oneMonthAgo.getMonth(),
oneMonthAgo.getDate(),
0,
0,
0
);
return [startOfDayOneMonthAgo.getTime(), endOfDay.getTime()];
}
function onChange(value: [number, number]) {
emit('update:beginDate', value[0]);
emit('update:endDate', value[1]);
function initDefaultDate() {
const beginDate = props.beginDate;
if (typeof beginDate === 'number' && beginDate) {
dateRange.value![0] = beginDate;
}
const endDate = props.endDate;
if (typeof endDate === 'number' && endDate) {
dateRange.value![1] = endDate;
}
}
initDefaultDate();
</script>
<template>
<NDatePicker v-model:value="dateRange" class="w-full" type="datetimerange" clearable @update:value="onChange" />
<NDatePicker v-model:value="dateRange" class="w-full" type="datetimerange" clearable />
</template>
<style scoped lang="scss"></style>