381 lines
12 KiB
Vue
381 lines
12 KiB
Vue
<template>
|
|
<div class="vacation-management">
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<div class="card app-calendar-wrapper">
|
|
<div class="row g-0">
|
|
<div class="col app-calendar-content">
|
|
<div class="card shadow-none border-0">
|
|
<ProfileList
|
|
@profileClick="handleProfileClick"
|
|
:remainingVacationData="remainingVacationData"
|
|
/>
|
|
<div class="card-body">
|
|
<VacationModal
|
|
v-if="isModalOpen"
|
|
:isOpen="isModalOpen"
|
|
:myVacations="myVacations"
|
|
:receivedVacations="receivedVacations"
|
|
:userColors="userColors"
|
|
@click="handleProfileClick(user)"
|
|
@close="isModalOpen = false"
|
|
/>
|
|
<VacationGrantModal
|
|
v-if="isGrantModalOpen"
|
|
:isOpen="isGrantModalOpen"
|
|
:targetUser="selectedUser"
|
|
:remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
|
|
@close="isGrantModalOpen = false"
|
|
@updateVacation="fetchRemainingVacation"
|
|
/>
|
|
<full-calendar
|
|
ref="fullCalendarRef"
|
|
:options="calendarOptions"
|
|
class="flatpickr-calendar-only"
|
|
/>
|
|
<HalfDayButtons
|
|
@toggleHalfDay="toggleHalfDay"
|
|
@addVacationRequests="addVacationRequests"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import FullCalendar from "@fullcalendar/vue3";
|
|
import dayGridPlugin from "@fullcalendar/daygrid";
|
|
import interactionPlugin from "@fullcalendar/interaction";
|
|
import "flatpickr/dist/flatpickr.min.css";
|
|
import "@/assets/css/app-calendar.css";
|
|
import { reactive, ref, onMounted, nextTick } from "vue";
|
|
import axios from "@api";
|
|
import "bootstrap-icons/font/bootstrap-icons.css";
|
|
import HalfDayButtons from "@c/button/HalfDayButtons.vue";
|
|
import ProfileList from "@c/vacation/ProfileList.vue";
|
|
import { useUserStore } from "@s/userList";
|
|
import VacationModal from "@c/modal/VacationModal.vue"
|
|
import { useUserInfoStore } from "@s/useUserInfoStore";
|
|
import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
|
|
|
|
const userStore = useUserInfoStore();
|
|
const userListStore = useUserStore();
|
|
const userList = ref([]);
|
|
const userColors = ref({});
|
|
const myVacations = ref([]); // 내가 사용한 연차 목록
|
|
const receivedVacations = ref([]); // 내가 받은 연차 목록
|
|
const isModalOpen = ref(false);
|
|
const remainingVacationData = ref({});
|
|
|
|
const isGrantModalOpen = ref(false);
|
|
const selectedUser = ref(null);
|
|
|
|
|
|
onMounted(async () => {
|
|
await userStore.userInfo();
|
|
await fetchRemainingVacation();
|
|
});
|
|
|
|
const fetchRemainingVacation = async () => {
|
|
try {
|
|
const response = await axios.get("vacation/remaining");
|
|
if (response.status === 200) {
|
|
remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
|
|
acc[vacation.employeeId] = vacation.remainingQuota;
|
|
return acc;
|
|
}, {});
|
|
}
|
|
} catch (error) {
|
|
console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
|
|
}
|
|
};
|
|
|
|
// 프로필 클릭 시 연차 내역 가져오기
|
|
const handleProfileClick = async (user) => {
|
|
try {
|
|
if (user.MEMBERSEQ === userStore.user.id) {
|
|
// 내 프로필을 클릭한 경우
|
|
const response = await axios.get(`vacation/history`);
|
|
|
|
if (response.status === 200 && response.data) {
|
|
myVacations.value = response.data.data.usedVacations || [];
|
|
receivedVacations.value = response.data.data.receivedVacations || [];
|
|
isModalOpen.value = true; // 내 연차 모달 열기
|
|
isGrantModalOpen.value = false;
|
|
} else {
|
|
console.warn("❌ 연차 내역을 불러오지 못했습니다.");
|
|
}
|
|
} else {
|
|
// 다른 사람의 프로필을 클릭한 경우
|
|
selectedUser.value = user;
|
|
isGrantModalOpen.value = true; // 연차 부여 모달 열기
|
|
isModalOpen.value = false;
|
|
}
|
|
} catch (error) {
|
|
console.error("🚨 연차 데이터 불러오기 실패:", error);
|
|
}
|
|
};
|
|
|
|
const fetchUserList = async () => {
|
|
try {
|
|
await userListStore.fetchUserList();
|
|
userList.value = userListStore.userList;
|
|
|
|
if (!userList.value.length) {
|
|
console.warn("📌 사용자 목록이 비어 있음!");
|
|
return;
|
|
}
|
|
|
|
userColors.value = {};
|
|
userList.value.forEach((user) => {
|
|
userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
|
|
});
|
|
} catch (error) {
|
|
console.error("📌 사용자 목록 불러오기 오류:", error);
|
|
}
|
|
};
|
|
|
|
// FullCalendar 관련 참조 및 데이터
|
|
const fullCalendarRef = ref(null);
|
|
const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트)
|
|
const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
|
|
const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
|
|
const halfDayType = ref(null);
|
|
const vacationCodeMap = ref({}); // 휴가 코드명 저장용
|
|
|
|
// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
|
|
const holidayDates = ref(new Set());
|
|
|
|
// FullCalendar 옵션 객체 (events에 calendarEvents를 지정)
|
|
const calendarOptions = reactive({
|
|
plugins: [dayGridPlugin, interactionPlugin],
|
|
initialView: "dayGridMonth",
|
|
headerToolbar: {
|
|
left: "today",
|
|
center: "title",
|
|
right: "prev,next",
|
|
},
|
|
locale: "ko",
|
|
selectable: false,
|
|
dateClick: handleDateClick,
|
|
datesSet: handleMonthChange,
|
|
events: calendarEvents,
|
|
});
|
|
|
|
const fetchVacationCodes = async () => {
|
|
try {
|
|
const response = await axios.get("vacation/codes");
|
|
if (response.status === 200 && response.data) {
|
|
// 배열을 객체 형태로 변환
|
|
vacationCodeMap.value = response.data.data.reduce((acc, item) => {
|
|
acc[item.code] = item.name; // code를 key로, name을 value로 설정
|
|
return acc;
|
|
}, {});
|
|
} else {
|
|
console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
|
|
}
|
|
} catch (error) {
|
|
console.error("🚨 공통 코드 API 호출 실패:", error);
|
|
}
|
|
};
|
|
|
|
// 🔹 typeCode를 통해 code명 반환
|
|
const getVacationType = (typeCode) => {
|
|
return vacationCodeMap.value[typeCode] || "기타";
|
|
};
|
|
|
|
/**
|
|
* API 이벤트(fetchedEvents)와 사용자가 선택한 날짜(selectedDates)를 병합하여
|
|
* calendarEvents를 업데이트하는 함수
|
|
* - 선택 이벤트는 display: "background" 옵션을 사용하여 배경으로 표시
|
|
* - 선택된 타입에 따라 클래스(selected-am, selected-pm, selected-full)를 부여함
|
|
*/
|
|
function updateCalendarEvents() {
|
|
const selectedEvents = Array.from(selectedDates.value).map(([date, type]) => {
|
|
return {
|
|
title: getVacationType(type),
|
|
start: date,
|
|
backgroundColor: "rgba(0, 128, 0, 0.3)",
|
|
display: "background",
|
|
classNames: [getVacationTypeClass(type)],
|
|
};
|
|
});
|
|
calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
|
|
}
|
|
|
|
/**
|
|
* ✅ 반차 유형에 따라 클래스명 지정 (색상 변경 없이 영역만 조정)
|
|
*/
|
|
const getVacationTypeClass = (type) => {
|
|
if (type === "700101") return "half-day-am"; // 오전반차 → 왼쪽 절반
|
|
if (type === "700102") return "half-day-pm"; // 오후반차 → 오른쪽 절반
|
|
return "full-day"; // 연차 → 전체 배경
|
|
};
|
|
|
|
/**
|
|
* 날짜 클릭 이벤트
|
|
* - 주말(토, 일)과 공휴일은 클릭되지 않음
|
|
* - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
|
|
*/
|
|
function handleDateClick(info) {
|
|
const clickedDateStr = info.dateStr;
|
|
const clickedDate = info.date;
|
|
|
|
// 주말 (토:6, 일:0)은 클릭 무시
|
|
if (clickedDate.getDay() === 0 || clickedDate.getDay() === 6) {
|
|
return;
|
|
}
|
|
// 공휴일이면 클릭 무시
|
|
if (holidayDates.value.has(clickedDateStr)) {
|
|
return;
|
|
}
|
|
if (!selectedDates.value.has(clickedDateStr)) {
|
|
const type = halfDayType.value
|
|
? halfDayType.value === "AM"
|
|
? "700101"
|
|
: "700102"
|
|
: "700103";
|
|
selectedDates.value.set(clickedDateStr, type);
|
|
} else {
|
|
selectedDates.value.delete(clickedDateStr);
|
|
}
|
|
halfDayType.value = null;
|
|
updateCalendarEvents();
|
|
}
|
|
|
|
/**
|
|
* 오전/오후 반차 버튼 토글
|
|
*/
|
|
function toggleHalfDay(type) {
|
|
halfDayType.value = halfDayType.value === type ? null : type;
|
|
}
|
|
|
|
/**
|
|
* 백엔드에서 휴가 데이터를 가져와 이벤트로 변환
|
|
*/
|
|
async function fetchVacationData(year, month) {
|
|
try {
|
|
const response = await axios.get(`vacation/list/${year}/${month}`);
|
|
if (response.status == 200) {
|
|
const vacationList = response.data;
|
|
const events = vacationList
|
|
.map((vac) => {
|
|
let dateStr = vac.LOCVACUDT.split("T")[0];
|
|
let className = "fc-daygrid-event";
|
|
let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
|
|
return {
|
|
title: getVacationType(vac.LOCVACTYP),
|
|
start: dateStr,
|
|
backgroundColor,
|
|
classNames: [getVacationTypeClass(vac.LOCVACTYP)],
|
|
};
|
|
})
|
|
.filter((event) => event !== null);
|
|
return events;
|
|
} else {
|
|
console.warn("📌 휴가 데이터를 불러오지 못함");
|
|
return [];
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching vacation data:", error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
|
|
*/
|
|
async function addVacationRequests() {
|
|
if (selectedDates.value.size === 0) {
|
|
alert("휴가를 선택해주세요.");
|
|
return;
|
|
}
|
|
const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
|
|
date,
|
|
type,
|
|
}));
|
|
try {
|
|
const response = await axios.post("vacation", vacationRequests);
|
|
if (response.data && response.data.status === "OK") {
|
|
alert("휴가가 저장되었습니다.");
|
|
await fetchRemainingVacation();
|
|
// 저장 후 현재 달 데이터 다시 불러오기
|
|
const currentDate = fullCalendarRef.value.getApi().getDate();
|
|
const year = currentDate.getFullYear();
|
|
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
|
|
loadCalendarData(year, month);
|
|
selectedDates.value.clear();
|
|
updateCalendarEvents();
|
|
} else {
|
|
alert("휴가 저장 중 오류가 발생했습니다.");
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert("휴가 저장에 실패했습니다.");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 공휴일 데이터 요청 및 이벤트 변환
|
|
*/
|
|
async function fetchHolidays(year, month) {
|
|
try {
|
|
const response = await axios.get(`vacation/${year}/${month}`);
|
|
const holidayEvents = response.data.map((holiday) => ({
|
|
title: holiday.name,
|
|
start: holiday.date, // "YYYY-MM-DD" 형식
|
|
backgroundColor: "#ff6666",
|
|
classNames: ["holiday-event"],
|
|
}));
|
|
return holidayEvents;
|
|
} catch (error) {
|
|
console.error("공휴일 정보를 불러오지 못했습니다.", error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 달력 월 변경 시 호출 (FullCalendar의 datesSet 옵션)
|
|
*/
|
|
function handleMonthChange(viewInfo) {
|
|
const currentDate = viewInfo.view.currentStart;
|
|
const year = currentDate.getFullYear();
|
|
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
|
|
loadCalendarData(year, month);
|
|
}
|
|
|
|
/**
|
|
* 지정한 월의 데이터를 로드 (휴가, 공휴일 데이터를 병렬 요청)
|
|
*/
|
|
async function loadCalendarData(year, month) {
|
|
fetchedEvents.value = [];
|
|
const [vacationEvents, holidayEvents] = await Promise.all([
|
|
fetchVacationData(year, month),
|
|
fetchHolidays(year, month),
|
|
]);
|
|
// 클릭 불가 처리를 위해 공휴일 날짜 Set 업데이트
|
|
holidayDates.value = new Set(holidayEvents.map((event) => event.start));
|
|
fetchedEvents.value = [...vacationEvents, ...holidayEvents];
|
|
updateCalendarEvents();
|
|
await nextTick();
|
|
fullCalendarRef.value.getApi().refetchEvents();
|
|
}
|
|
|
|
// 컴포넌트 마운트 시 현재 달의 데이터 로드
|
|
onMounted(async () => {
|
|
await fetchUserList(); // 사용자 목록 먼저 불러오기
|
|
await fetchVacationCodes();
|
|
const today = new Date();
|
|
const year = today.getFullYear();
|
|
const month = String(today.getMonth() + 1).padStart(2, "0");
|
|
await loadCalendarData(year, month);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|