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