fix(Calendar): 添加保存按钮防抖并移除营期开始时间字段

添加isSaving状态防止重复提交保存请求
移除不再需要的campStartDate字段及相关逻辑
保存按钮在提交时显示加载状态
This commit is contained in:
2025-08-28 15:34:51 +08:00
parent 6d22aecc29
commit 0627caf37c

View File

@@ -120,8 +120,11 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button @click="showCampModal = false" class="cancel-btn">取消</button> <button @click="showCampModal = false" class="cancel-btn" :disabled="isSaving">取消</button>
<button @click="saveCampSettings" class="save-btn">保存</button> <button @click="saveCampSettings" class="save-btn" :disabled="isSaving">
<span v-if="isSaving">保存中...</span>
<span v-else>保存</span>
</button>
</div> </div>
</div> </div>
</div> </div>
@@ -262,9 +265,9 @@ const tooltipPosition = ref({ x: 0, y: 0 });
// 营期设置相关 // 营期设置相关
const showCampModal = ref(false); const showCampModal = ref(false);
const campStartDate = ref('');
const campDays = ref(); const campDays = ref();
const restDays = ref(); const restDays = ref();
const isSaving = ref(false);
const isCampFinished = ref(false); const isCampFinished = ref(false);
// 结束营期确认弹框相关 // 结束营期确认弹框相关
@@ -435,10 +438,11 @@ const loadHistoryPeriods = async () => {
// 方法:保存营期设置 // 方法:保存营期设置
const saveCampSettings = async () => { const saveCampSettings = async () => {
if (!campStartDate.value) { // 防抖:如果正在保存中,直接返回
alert('请选择营期开始时间'); if (isSaving.value) {
return; return;
} }
if (!campDays.value || campDays.value < 1) { if (!campDays.value || campDays.value < 1) {
alert('请输入有效的接数据天数'); alert('请输入有效的接数据天数');
return; return;
@@ -448,10 +452,11 @@ const saveCampSettings = async () => {
return; return;
} }
isSaving.value = true;
try { try {
// 调用API设置营期参数并获取营期安排 // 调用API设置营期参数并获取营期安排
const result = await CenterCampPeriodAdmin({ const result = await CenterCampPeriodAdmin({
receipt_data_start_time: campStartDate.value,
receipt_data_time: campDays.value.toString(), receipt_data_time: campDays.value.toString(),
rest_days: restDays.value.toString() rest_days: restDays.value.toString()
}); });
@@ -459,7 +464,6 @@ const saveCampSettings = async () => {
if (result && result.data) { if (result && result.data) {
showCampModal.value = false; showCampModal.value = false;
// 重置表单数据 // 重置表单数据
campStartDate.value = '';
campDays.value = null; campDays.value = null;
restDays.value = null; restDays.value = null;
alert('营期设置成功!'); alert('营期设置成功!');
@@ -467,59 +471,12 @@ const saveCampSettings = async () => {
} catch (error) { } catch (error) {
console.error('保存营期设置失败:', error); console.error('保存营期设置失败:', error);
alert('保存营期设置失败,请重试'); alert('保存营期设置失败,请重试');
} finally {
isSaving.value = false;
} }
}; };
// 方法:生成营期日程安排
const generateCampSchedule = () => {
const startDate = new Date(campStartDate.value);
const dataDays = campDays.value || 2; // 接数据天数默认2天
let currentDate = new Date(startDate);
let eventId = events.value.length + 1;
// 清除之前的营期相关事件
events.value = events.value.filter(event => !event.isCampEvent);
// 添加接数据日程
for (let i = 0; i < dataDays; i++) {
const dateStr = formatDateToString(currentDate);
events.value.push({
id: eventId++,
date: dateStr,
title: `接数据 第${i + 1}`,
description: '营期数据接收阶段',
isCampEvent: true,
type: 'data'
});
currentDate.setDate(currentDate.getDate() + 1);
}
// 添加课程日程
const courses = ['课1', '课2', '课3', '课4'];
courses.forEach((course, index) => {
const dateStr = formatDateToString(currentDate);
events.value.push({
id: eventId++,
date: dateStr,
title: course,
description: `${course}`,
isCampEvent: true,
type: 'course'
});
currentDate.setDate(currentDate.getDate() + 1);
});
// 添加休息日程
const restDateStr = formatDateToString(currentDate);
events.value.push({
id: eventId++,
date: restDateStr,
title: '休息',
description: '营期休息日',
isCampEvent: true,
type: 'rest'
});
};
// 辅助方法:格式化日期为字符串 // 辅助方法:格式化日期为字符串
const formatDateToString = (date) => { const formatDateToString = (date) => {
@@ -689,9 +646,8 @@ async function CenterCampPeriodAdmin(data = {}) {
// 兼容原有逻辑,使用全局变量 // 兼容原有逻辑,使用全局变量
if (isCampFinished.value) { if (isCampFinished.value) {
Finsh.is_camp_finish = isCampFinished.value Finsh.is_camp_finish = isCampFinished.value
} else if (campStartDate.value && campDays.value) { } else if (campDays.value) {
// 只有在有营期设置数据时才传递参数 // 只有在有营期设置数据时才传递参数
Finsh.receipt_data_start_time = campStartDate.value
Finsh.receipt_data_time = campDays.value.toString() Finsh.receipt_data_time = campDays.value.toString()
if (restDays.value) { if (restDays.value) {
Finsh.rest_days = restDays.value.toString() Finsh.rest_days = restDays.value.toString()