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 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 });
|
||||
|
|
|
|||
Loading…
Reference in New Issue