fix(date-range): 调整日期边界计算及强制重渲染逻辑
- 日期边界的计算增加±1天调整,防止超过一年限制 - 添加注释说明开始和结束时间范围限制规则 - 修改日期范围变化监听,增强强制重渲染日期选择器逻辑 - 通过移除再插入元素方式,确保日期选择器正确更新显示 - 优化了判断条件,避免出现空元素操作错误
This commit is contained in:
parent
89436d24ed
commit
c600b30b7e
18
web/main.js
18
web/main.js
|
|
@ -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 });
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue