fix(date-picker): 优化日期选择禁用逻辑与重渲染

- 修改 disabledDate 函数,支持基于已选开始或结束时间的前后一年范围限制
- 增加对未选择时间范围时默认不禁用日期的判断
- 新增 watch 监听 exportForm.dateRange,强制触发日期选择器重新渲染
- 通过修改日期选择器 DOM 元素的 key 值实现强制刷新
- 确保日期选择禁用逻辑和视图状态同步更新
This commit is contained in:
zhouyonggao 2025-12-19 00:08:01 +08:00
parent 849e77b401
commit 89436d24ed
1 changed files with 40 additions and 5 deletions

View File

@ -194,11 +194,34 @@ const app = createApp({
* @returns {boolean} 是否禁用 * @returns {boolean} 是否禁用
*/ */
const disabledDate = (date) => { const disabledDate = (date) => {
if (!date) return false; if (!date || !state.exportForm.dateRange) return false;
const today = new Date();
const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()); // 如果已经选择了开始时间,计算结束时间限制
const oneYearLater = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate()); if (state.exportForm.dateRange[0]) {
return date < oneYearAgo || date > oneYearLater; const startTime = new Date(state.exportForm.dateRange[0]);
const oneYearLater = new Date(startTime);
oneYearLater.setFullYear(startTime.getFullYear() + 1);
const oneYearEarlier = new Date(startTime);
oneYearEarlier.setFullYear(startTime.getFullYear() - 1);
return date < oneYearEarlier || date > oneYearLater;
}
// 如果已经选择了结束时间,计算开始时间限制
if (state.exportForm.dateRange[1]) {
const endTime = new Date(state.exportForm.dateRange[1]);
const oneYearLater = new Date(endTime);
oneYearLater.setFullYear(endTime.getFullYear() + 1);
const oneYearEarlier = new Date(endTime);
oneYearEarlier.setFullYear(endTime.getFullYear() - 1);
return date < oneYearEarlier || date > oneYearLater;
}
// 默认情况下不禁用任何日期
return false;
}; };
const dateShortcuts = [ const dateShortcuts = [
@ -954,6 +977,18 @@ const app = createApp({
loadResellers(); loadResellers();
}); });
// 时间范围变化时强制重新渲染日期选择器
Vue.watch(() => state.exportForm.dateRange, () => {
// 触发日期选择器重新计算禁用状态
if (exportFormRef.value) {
// 通过修改 key 强制组件重新渲染
const datePicker = exportFormRef.value.$el.querySelector('.el-date-editor');
if (datePicker) {
datePicker.key = Date.now();
}
}
}, { deep: true });
Vue.watch(() => state.exportForm.ymtCreatorId, () => { Vue.watch(() => state.exportForm.ymtCreatorId, () => {
state.exportForm.ymtMerchantId = null; state.exportForm.ymtMerchantId = null;
state.exportForm.ymtActivityId = null; state.exportForm.ymtActivityId = null;