feat(Calendar): 添加结束营期确认和下一营期设置弹窗
添加结束营期确认弹窗和强制设置下一营期弹窗,确保结束当前营期前必须设置下一营期
This commit is contained in:
@@ -116,6 +116,74 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结束营期确认弹窗 -->
|
||||
<div v-if="showFinishConfirmModal" class="modal-overlay">
|
||||
<div class="modal-content confirm-modal" @click.stop>
|
||||
<div class="modal-header">
|
||||
<h3>确认结束营期</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="confirm-text">确定要结束当前营期吗?结束后需要立即设置下一营期。</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button @click="cancelFinishCamp" class="cancel-btn">取消</button>
|
||||
<button @click="confirmFinishCamp" class="confirm-btn">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 强制设置下一营期弹窗 -->
|
||||
<div v-if="showNextCampModal" class="modal-overlay">
|
||||
<div class="modal-content force-modal" @click.stop>
|
||||
<div class="modal-header">
|
||||
<h3>设置下一营期</h3>
|
||||
<span class="required-text">*必须完成设置才能结束当前营期</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="nextCampStartDate">下一营期开始时间:<span class="required">*</span></label>
|
||||
<input
|
||||
type="date"
|
||||
id="nextCampStartDate"
|
||||
v-model="nextCampStartDate"
|
||||
class="form-input"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nextCampDataDays">接数据时间(天数):<span class="required">*</span></label>
|
||||
<input
|
||||
type="number"
|
||||
id="nextCampDataDays"
|
||||
v-model="nextCampDataDays"
|
||||
min="1"
|
||||
max="365"
|
||||
class="form-input"
|
||||
placeholder="请输入接数据天数"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nextCampRestDays">休息时间(天数):<span class="required">*</span></label>
|
||||
<input
|
||||
type="number"
|
||||
id="nextCampRestDays"
|
||||
v-model="nextCampRestDays"
|
||||
min="1"
|
||||
max="365"
|
||||
class="form-input"
|
||||
placeholder="请输入休息天数"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button @click="forceNextCampSetting" class="cancel-btn disabled">不能取消</button>
|
||||
<button @click="saveNextCampSettings" class="save-btn">完成设置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user