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} 是否禁用
|
* @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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue