96 lines
2.8 KiB
Vue
96 lines
2.8 KiB
Vue
<template>
|
|
<div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
|
|
<div class="modal-content">
|
|
<h5 class="modal-title">📅 {{ targetUser.name }}님의 연차 부여</h5>
|
|
<button class="close-btn" @click="closeModal">✖</button>
|
|
|
|
<div class="modal-body">
|
|
<p>해당 직원에게 부여할 연차 개수를 선택하세요. (최대 2개)</p>
|
|
|
|
<div class="vacation-item">
|
|
<button @click="decreaseCount" :disabled="grantCount <= 0">-</button>
|
|
<span>{{ grantCount }}</span>
|
|
<button @click="increaseCount" :disabled="grantCount >= maxQuota">+</button>
|
|
</div>
|
|
|
|
<p class="">현재 보유 연차: <strong>{{ remainingQuota }}</strong></p>
|
|
</div>
|
|
|
|
<div class="">
|
|
<button class="save-btn" @click="saveVacationGrant" :disabled="grantCount === 0">
|
|
✅ 저장
|
|
</button>
|
|
<button class="cancel-btn" @click="closeModal">취소</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineProps, defineEmits, watch } from "vue";
|
|
import axios from "@api";
|
|
|
|
const props = defineProps({
|
|
isOpen: Boolean, // 모달 상태
|
|
targetUser: Object, // 선택한 사용자 정보
|
|
remainingQuota: Number, // 현재 부여된 연차 개수
|
|
});
|
|
|
|
const emit = defineEmits(["close", "updateVacation"]);
|
|
|
|
const grantCount = ref(0);
|
|
const maxQuota = 2; // 최대 부여 가능 개수
|
|
|
|
// ✅ 연차 개수 증가
|
|
const increaseCount = () => {
|
|
if (grantCount.value < maxQuota) {
|
|
grantCount.value++;
|
|
}
|
|
};
|
|
|
|
// ✅ 연차 개수 감소
|
|
const decreaseCount = () => {
|
|
if (grantCount.value > 0) {
|
|
grantCount.value--;
|
|
}
|
|
};
|
|
|
|
// ✅ 연차 부여 저장 요청
|
|
const saveVacationGrant = async () => {
|
|
try {
|
|
const response = await axios.post("vacation/grant", {
|
|
senderId: props.targetUser.senderId, // 로그인한 사용자 ID
|
|
receiverId: props.targetUser.MEMBERSEQ, // 대상 사용자 ID
|
|
type: "700103", // 연차 (반차 없음)
|
|
count: grantCount.value, // 선택한 개수
|
|
});
|
|
|
|
if (response.data && response.data.status === "OK") {
|
|
alert("✅ 연차가 부여되었습니다.");
|
|
emit("updateVacation"); // ✅ 연차 정보 갱신 요청
|
|
closeModal();
|
|
} else {
|
|
alert("🚨 연차 추가 중 오류가 발생했습니다.");
|
|
}
|
|
} catch (error) {
|
|
console.error("🚨 연차 추가 실패:", error);
|
|
alert("연차 추가에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
// ✅ 모달 닫기
|
|
const closeModal = () => {
|
|
emit("close");
|
|
};
|
|
|
|
// ✅ 모달이 열릴 때 초기 값 설정
|
|
watch(() => props.isOpen, (newVal) => {
|
|
if (newVal) {
|
|
grantCount.value = 0; // 초기화
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|