diff --git a/my-vue-app/src/views/secondTop/components/Calendar.vue b/my-vue-app/src/views/secondTop/components/Calendar.vue index b8a667a..f9432f1 100644 --- a/my-vue-app/src/views/secondTop/components/Calendar.vue +++ b/my-vue-app/src/views/secondTop/components/Calendar.vue @@ -116,6 +116,74 @@ + + +
+ + + @@ -139,6 +207,13 @@ const campStartDate = ref(''); const campDays = ref(); const isCampFinished = ref(false); +// 结束营期确认弹框相关 +const showFinishConfirmModal = ref(false); +const showNextCampModal = ref(false); +const nextCampStartDate = ref(''); +const nextCampDataDays = ref(); +const nextCampRestDays = ref(); + // 获取本地时区的今日日期字符串 const getTodayString = () => { const now = new Date(); @@ -378,17 +453,60 @@ const shouldShowFinishCamp = () => { // 方法:结束营期 const finishCamp = async () => { + // 显示确认弹框 + showFinishConfirmModal.value = true; +}; + +// 确认结束营期并进入下一营期设置 +const confirmFinishCamp = () => { + showFinishConfirmModal.value = false; + showNextCampModal.value = true; +}; + +// 取消结束营期 +const cancelFinishCamp = () => { + showFinishConfirmModal.value = false; +}; + +// 保存下一营期设置并结束当前营期 +const saveNextCampSettings = async () => { + if (!nextCampStartDate.value || !nextCampDataDays.value || !nextCampRestDays.value) { + alert('请填写完整的下一营期信息'); + return; + } + try { + // 先结束当前营期 isCampFinished.value = true; await CenterCampPeriodAdmin({ is_camp_finish: "11" }); + + // 设置下一营期 + await CenterCampPeriodAdmin({ + receipt_data_start_time: nextCampStartDate.value, + receipt_data_time: nextCampDataDays.value.toString() + }); + + // 关闭弹框并重置数据 + showNextCampModal.value = false; + nextCampStartDate.value = ''; + nextCampDataDays.value = null; + nextCampRestDays.value = null; + + alert('营期设置成功!'); } catch (error) { - console.error('结束营期失败:', error); + console.error('营期设置失败:', error); isCampFinished.value = false; + alert('营期设置失败,请重试'); } }; +// 强制要求设置下一营期(不允许取消) +const forceNextCampSetting = () => { + alert('必须设置下一营期才能结束当前营期'); +}; + // 路由实例 const router = useRouter(); @@ -964,4 +1082,101 @@ onMounted(async () => { padding: 1px 3px; line-height: 1; } + +/* 确认弹框样式 */ +.confirm-modal { + max-width: 420px; +} + +.confirm-text { + font-size: 16px; + color: #495057; + text-align: center; + margin: 0; + line-height: 1.5; +} + +.confirm-btn { + padding: 10px 20px; + border: none; + border-radius: 6px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + background: linear-gradient(135deg, #e74c3c, #c0392b); + color: white; +} + +.confirm-btn:hover { + background: linear-gradient(135deg, #c0392b, #a93226); + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3); +} + +/* 强制设置弹框样式 */ +.force-modal { + max-width: 500px; +} + +.force-modal .modal-header { + background: linear-gradient(135deg, #ff6b6b, #ee5a52); + color: white; + flex-direction: column; + align-items: flex-start; + gap: 8px; +} + +.force-modal .modal-header h3 { + color: white; + margin: 0; +} + +.required-text { + font-size: 12px; + color: rgba(255, 255, 255, 0.9); + font-weight: 400; + background: rgba(255, 255, 255, 0.2); + padding: 4px 8px; + border-radius: 4px; +} + +.required { + color: #e74c3c; + margin-left: 2px; +} + +.cancel-btn.disabled { + background: #adb5bd; + color: #6c757d; + cursor: not-allowed; + opacity: 0.6; +} + +.cancel-btn.disabled:hover { + background: #adb5bd; + transform: none; + box-shadow: none; +} + +/* 表单验证样式 */ +.form-input:invalid { + border-color: #e74c3c; +} + +.form-input:invalid:focus { + border-color: #e74c3c; + box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1); +} + +/* 强制弹框的保存按钮 */ +.force-modal .save-btn { + background: linear-gradient(135deg, #28a745, #20c997); +} + +.force-modal .save-btn:hover { + background: linear-gradient(135deg, #218838, #1ea085); + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3); +} \ No newline at end of file