fix(date-picker): 优化日期选择禁用逻辑与重渲染
- 修改 disabledDate 函数,支持基于已选开始或结束时间的前后一年范围限制 - 增加对未选择时间范围时默认不禁用日期的判断 - 新增 watch 监听 exportForm.dateRange,强制触发日期选择器重新渲染 - 通过修改日期选择器 DOM 元素的 key 值实现强制刷新 - 确保日期选择禁用逻辑和视图状态同步更新
This commit is contained in:
parent
849e77b401
commit
89436d24ed
45
web/main.js
45
web/main.js
|
|
@ -194,11 +194,34 @@ const app = createApp({
|
|||
* @returns {boolean} 是否禁用
|
||||
*/
|
||||
const disabledDate = (date) => {
|
||||
if (!date) 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());
|
||||
return date < oneYearAgo || date > oneYearLater;
|
||||
if (!date || !state.exportForm.dateRange) return false;
|
||||
|
||||
// 如果已经选择了开始时间,计算结束时间限制
|
||||
if (state.exportForm.dateRange[0]) {
|
||||
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 = [
|
||||
|
|
@ -954,6 +977,18 @@ const app = createApp({
|
|||
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, () => {
|
||||
state.exportForm.ymtMerchantId = null;
|
||||
state.exportForm.ymtActivityId = null;
|
||||
|
|
|
|||
Loading…
Reference in New Issue