fix(date-range): 调整日期边界计算及强制重渲染逻辑

- 日期边界的计算增加±1天调整,防止超过一年限制
- 添加注释说明开始和结束时间范围限制规则
- 修改日期范围变化监听,增强强制重渲染日期选择器逻辑
- 通过移除再插入元素方式,确保日期选择器正确更新显示
- 优化了判断条件,避免出现空元素操作错误
This commit is contained in:
zhouyonggao 2025-12-19 00:13:00 +08:00
parent 89436d24ed
commit c600b30b7e
1 changed files with 14 additions and 4 deletions

View File

@ -201,10 +201,13 @@ const app = createApp({
const startTime = new Date(state.exportForm.dateRange[0]); const startTime = new Date(state.exportForm.dateRange[0]);
const oneYearLater = new Date(startTime); const oneYearLater = new Date(startTime);
oneYearLater.setFullYear(startTime.getFullYear() + 1); oneYearLater.setFullYear(startTime.getFullYear() + 1);
oneYearLater.setDate(oneYearLater.getDate() - 1); // 减去一天以确保不超过一年
const oneYearEarlier = new Date(startTime); const oneYearEarlier = new Date(startTime);
oneYearEarlier.setFullYear(startTime.getFullYear() - 1); oneYearEarlier.setFullYear(startTime.getFullYear() - 1);
oneYearEarlier.setDate(oneYearEarlier.getDate() + 1); // 加上一天
// 结束时间不能早于开始时间一年前,也不能晚于开始时间一年后
return date < oneYearEarlier || date > oneYearLater; return date < oneYearEarlier || date > oneYearLater;
} }
@ -213,10 +216,13 @@ const app = createApp({
const endTime = new Date(state.exportForm.dateRange[1]); const endTime = new Date(state.exportForm.dateRange[1]);
const oneYearLater = new Date(endTime); const oneYearLater = new Date(endTime);
oneYearLater.setFullYear(endTime.getFullYear() + 1); oneYearLater.setFullYear(endTime.getFullYear() + 1);
oneYearLater.setDate(oneYearLater.getDate() - 1); // 减去一天
const oneYearEarlier = new Date(endTime); const oneYearEarlier = new Date(endTime);
oneYearEarlier.setFullYear(endTime.getFullYear() - 1); oneYearEarlier.setFullYear(endTime.getFullYear() - 1);
oneYearEarlier.setDate(oneYearEarlier.getDate() + 1); // 加上一天
// 开始时间不能晚于结束时间一年后,也不能早于结束时间一年前
return date < oneYearEarlier || date > oneYearLater; return date < oneYearEarlier || date > oneYearLater;
} }
@ -978,13 +984,17 @@ const app = createApp({
}); });
// 时间范围变化时强制重新渲染日期选择器 // 时间范围变化时强制重新渲染日期选择器
Vue.watch(() => state.exportForm.dateRange, () => { Vue.watch(() => state.exportForm.dateRange, (newVal) => {
// 触发日期选择器重新计算禁用状态 // 触发日期选择器重新计算禁用状态
if (exportFormRef.value) { if (exportFormRef.value && exportFormRef.value.$el) {
// 通过修改 key 强制组件重新渲染 // 查找日期选择器元素并强制重新渲染
const datePicker = exportFormRef.value.$el.querySelector('.el-date-editor'); const datePicker = exportFormRef.value.$el.querySelector('.el-date-editor');
if (datePicker) { if (datePicker) {
datePicker.key = Date.now(); // 通过临时移除再添加来强制重新渲染
const parent = datePicker.parentElement;
const nextSibling = datePicker.nextSibling;
parent.removeChild(datePicker);
parent.insertBefore(datePicker, nextSibling);
} }
} }
}, { deep: true }); }, { deep: true });