휴가저장장
This commit is contained in:
parent
724f0afc61
commit
4daab961cf
43
src/components/button/HalfDayButtons.vue
Normal file
43
src/components/button/HalfDayButtons.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="half-day-buttons">
|
||||
<button
|
||||
class="btn btn-info"
|
||||
:class="{ active: halfDayType === 'AM' }"
|
||||
@click="toggleHalfDay('AM')"
|
||||
>
|
||||
<i class="bi bi-sun"></i>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-warning"
|
||||
:class="{ active: halfDayType === 'PM' }"
|
||||
@click="toggleHalfDay('PM')"
|
||||
>
|
||||
<i class="bi bi-moon"></i>
|
||||
</button>
|
||||
<div class="save-button-container">
|
||||
<button class="btn btn-success" @click="addVacationRequests">
|
||||
✔
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineEmits, ref } from "vue";
|
||||
|
||||
const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
|
||||
const halfDayType = ref(null);
|
||||
|
||||
const toggleHalfDay = (type) => {
|
||||
halfDayType.value = halfDayType.value === type ? null : type;
|
||||
emit("toggleHalfDay", halfDayType.value);
|
||||
};
|
||||
|
||||
const addVacationRequests = () => {
|
||||
emit("addVacationRequests");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
187
src/components/vacation/ProfileList.vue
Normal file
187
src/components/vacation/ProfileList.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="users-list-wrapper">
|
||||
<button class="scroll-btn left" @click="scrollLeft">❮</button>
|
||||
|
||||
<div class="users-list-container" ref="userListContainer">
|
||||
<ul class="list-unstyled users-list d-flex align-items-center justify-content-start">
|
||||
<li
|
||||
v-for="(user, index) in userList"
|
||||
:key="index"
|
||||
class="avatar pull-up position-relative"
|
||||
:class="{ disabled: user.disabled }"
|
||||
@click="toggleDisable(index)"
|
||||
data-bs-toggle="tooltip"
|
||||
data-popup="tooltip-custom"
|
||||
data-bs-placement="top"
|
||||
:aria-label="user.MEMBERSEQ"
|
||||
:data-bs-original-title="getTooltipTitle(user)"
|
||||
>
|
||||
<div class="tooltip-custom">{{ getTooltipTitle(user) }}</div>
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getUserProfileImage(user.MEMBERPRF)"
|
||||
alt="user"
|
||||
:style="{ borderColor: user.usercolor }"
|
||||
@error="setDefaultImage"
|
||||
@load="showImage"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="scroll-btn right" @click="scrollRight">❯</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, nextTick } from "vue";
|
||||
import { useUserStore } from "@s/userList";
|
||||
import $api from "@api";
|
||||
|
||||
const emit = defineEmits();
|
||||
const userStore = useUserStore();
|
||||
const userList = ref([]);
|
||||
const userListContainer = ref(null); // 프로필 목록 컨테이너 참조
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
|
||||
const defaultProfile = "/img/icons/icon.png"; // 기본 이미지 경로
|
||||
|
||||
// ✅ 사용자 목록 호출
|
||||
onMounted(async () => {
|
||||
await userStore.fetchUserList();
|
||||
userList.value = userStore.userList;
|
||||
nextTick(() => {
|
||||
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||||
tooltips.forEach((tooltip) => {
|
||||
new bootstrap.Tooltip(tooltip);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ✅ 프로필 이미지 경로 반환
|
||||
const getUserProfileImage = (profilePath) => {
|
||||
return profilePath && profilePath.trim()
|
||||
? `${baseUrl}upload/img/profile/${profilePath}`
|
||||
: defaultProfile;
|
||||
};
|
||||
|
||||
// ✅ 이미지 로딩 오류 처리
|
||||
const setDefaultImage = (event) => {
|
||||
event.target.src = defaultProfile;
|
||||
};
|
||||
|
||||
// ✅ 이미지 로드 후 깜빡임 방지
|
||||
const showImage = (event) => {
|
||||
event.target.style.visibility = "visible";
|
||||
};
|
||||
|
||||
// ✅ 툴팁 타이틀 설정
|
||||
const getTooltipTitle = (user) => {
|
||||
return user.MEMBERSEQ === userList.value.MEMBERSEQ ? "나" : user.MEMBERNAM;
|
||||
};
|
||||
|
||||
// ✅ 좌우 스크롤 이동 기능 추가 (한 줄씩 이동)
|
||||
const scrollLeft = () => {
|
||||
userListContainer.value.scrollBy({ left: -userListContainer.value.clientWidth, behavior: "smooth" });
|
||||
};
|
||||
|
||||
const scrollRight = () => {
|
||||
userListContainer.value.scrollBy({ left: userListContainer.value.clientWidth, behavior: "smooth" });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ✅ 전체 프로필 목록 감싸는 영역 */
|
||||
.users-list-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1250px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* ✅ 스크롤 가능하도록 컨테이너 설정 */
|
||||
.users-list-container {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 200px; /* 한 줄 이상 넘어가지 않도록 조절 */
|
||||
padding: 50px;
|
||||
scrollbar-width: none; /* Firefox에서 스크롤바 숨김 */
|
||||
}
|
||||
|
||||
/* ✅ 스크롤바 숨기기 */
|
||||
.users-list-container::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari에서 스크롤바 숨김 */
|
||||
}
|
||||
|
||||
/* ✅ 프로필 목록 */
|
||||
.users-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px; /* 프로필 간격 */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* ✅ 프로필 이미지 스타일 */
|
||||
.user-avatar {
|
||||
border: 3px solid;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
background-color: white;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* ✅ 프로필 선택 효과 */
|
||||
.avatar:hover .user-avatar {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* ✅ 툴팁 위치 조정 */
|
||||
.tooltip-custom {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: white;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 5px;
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ✅ 툴팁 표시 */
|
||||
.avatar:hover .tooltip-custom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ✅ 좌우 스크롤 버튼 */
|
||||
.scroll-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 10px 15px;
|
||||
font-size: 20px;
|
||||
z-index: 100;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.scroll-btn.left {
|
||||
left: -40px;
|
||||
}
|
||||
|
||||
.scroll-btn.right {
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
.scroll-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
</style>
|
||||
@ -16,7 +16,6 @@ export const useUserStore = defineStore("userStore", {
|
||||
actions: {
|
||||
async fetchUserList() {
|
||||
const response = await axios.get('user/allUserList');
|
||||
console.log('response',response)
|
||||
this.userList = response.data.data.allUserList;
|
||||
this.userInfo = response.data.data.user;
|
||||
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h3>휴가 추가</h3>
|
||||
<input type="text" v-model="title" placeholder="제목" />
|
||||
<input type="date" v-model="date" />
|
||||
<button @click="addEvent">추가</button>
|
||||
<button @click="$emit('close')">닫기</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import calendarStore from '@s/calendarStore';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
date: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addEvent() {
|
||||
if (this.title && this.date) {
|
||||
calendarStore.addEvent({ title: this.title, start: this.date });
|
||||
this.$emit('close');
|
||||
} else {
|
||||
alert('모든 필드를 입력해주세요.');
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<div class="profile-list">
|
||||
<div v-for="profile in profiles" :key="profile.id" class="profile">
|
||||
<img :src="profile.avatar" alt="프로필 사진" class="avatar" />
|
||||
<div class="info">
|
||||
<p class="name">{{ profile.name }}</p>
|
||||
<p class="vacation-count">남은 휴가: {{ profile.remainingVacations }}일</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
profiles: [
|
||||
{ id: 1, name: '김철수', avatar: '/avatars/user1.png', remainingVacations: 15 },
|
||||
{ id: 2, name: '박영희', avatar: '/avatars/user2.png', remainingVacations: 11 },
|
||||
{ id: 3, name: '이민호', avatar: '/avatars/user3.png', remainingVacations: 10 },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
.avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
.vacation-count {
|
||||
color: gray;
|
||||
}
|
||||
</style>
|
||||
@ -13,27 +13,14 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="half-day-buttons">
|
||||
<button
|
||||
class="btn btn-info"
|
||||
:class="{ active: halfDayType === 'AM' }"
|
||||
@click="toggleHalfDay('AM')"
|
||||
>
|
||||
<i class="bi bi-sun"></i>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-warning"
|
||||
:class="{ active: halfDayType === 'PM' }"
|
||||
@click="toggleHalfDay('PM')"
|
||||
>
|
||||
<i class="bi bi-moon"></i>
|
||||
</button>
|
||||
<div class="save-button-container">
|
||||
<button class="btn btn-success" @click="addVacationRequests">
|
||||
✔
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProfileList />
|
||||
|
||||
<HalfDayButtons
|
||||
@toggleHalfDay="toggleHalfDay"
|
||||
@addVacationRequests="addVacationRequests"
|
||||
/>
|
||||
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
@ -48,9 +35,36 @@
|
||||
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 { reactive, ref, onMounted, nextTick, watchEffect } from "vue";
|
||||
import axios from "@api";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import HalfDayButtons from "@c/button/HalfDayButtons.vue";
|
||||
import ProfileList from "@/components/vacation/ProfileList.vue";
|
||||
import { useUserStore } from "@s/userList";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userList = ref([]);
|
||||
const userColors = ref({});
|
||||
|
||||
|
||||
const fetchUserList = async () => {
|
||||
try {
|
||||
await userStore.fetchUserList();
|
||||
userList.value = userStore.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);
|
||||
@ -153,16 +167,14 @@
|
||||
*/
|
||||
async function fetchVacationData(year, month) {
|
||||
try {
|
||||
console.log(`📌 휴가 데이터 요청: ${year}-${month}`);
|
||||
const response = await axios.get(`vacation/list/${year}/${month}`);
|
||||
if (response.status == 200) {
|
||||
const vacationList = response.data;
|
||||
console.log("📌 백엔드 응답 데이터:", vacationList);
|
||||
const events = vacationList
|
||||
.map((vac) => {
|
||||
let dateStr = vac.LOCVACUDT.split("T")[0];
|
||||
let className = "fc-daygrid-event";
|
||||
let backgroundColor = getColorByEmployeeId(vac.MEMBERSEQ);
|
||||
let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
|
||||
let title = "연차";
|
||||
if (vac.LOCVACTYP === "D") {
|
||||
title = "오전반차";
|
||||
@ -193,14 +205,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 사원 ID별 색상 반환
|
||||
*/
|
||||
function getColorByEmployeeId(employeeId) {
|
||||
const colors = ["#ade3ff", "#ffade3", "#ade3ad", "#ffadad"];
|
||||
return colors[employeeId % colors.length];
|
||||
}
|
||||
|
||||
/**
|
||||
* 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
|
||||
*/
|
||||
@ -239,9 +243,7 @@
|
||||
*/
|
||||
async function fetchHolidays(year, month) {
|
||||
try {
|
||||
console.log(`📌 공휴일 요청: ${year}-${month}`);
|
||||
const response = await axios.get(`vacation/${year}/${month}`);
|
||||
console.log("📌 공휴일 API 응답:", response.data);
|
||||
const holidayEvents = response.data.map((holiday) => ({
|
||||
title: holiday.name,
|
||||
start: holiday.date, // "YYYY-MM-DD" 형식
|
||||
@ -262,7 +264,6 @@
|
||||
const currentDate = viewInfo.view.currentStart;
|
||||
const year = currentDate.getFullYear();
|
||||
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
|
||||
console.log(`📌 월 변경 감지: ${year}-${month}`);
|
||||
loadCalendarData(year, month);
|
||||
}
|
||||
|
||||
@ -270,30 +271,26 @@
|
||||
* 지정한 월의 데이터를 로드 (휴가, 공휴일 데이터를 병렬 요청)
|
||||
*/
|
||||
async function loadCalendarData(year, month) {
|
||||
console.log(`📌 ${year}-${month} 데이터 로드 시작`);
|
||||
fetchedEvents.value = [];
|
||||
const [vacationEvents, holidayEvents] = await Promise.all([
|
||||
fetchVacationData(year, month),
|
||||
fetchHolidays(year, month),
|
||||
]);
|
||||
console.log("📌 변환된 휴가 이벤트:", vacationEvents);
|
||||
console.log("📌 변환된 공휴일 이벤트:", holidayEvents);
|
||||
// 클릭 불가 처리를 위해 공휴일 날짜 Set 업데이트
|
||||
holidayDates.value = new Set(holidayEvents.map((event) => event.start));
|
||||
fetchedEvents.value = [...vacationEvents, ...holidayEvents];
|
||||
updateCalendarEvents();
|
||||
await nextTick();
|
||||
fullCalendarRef.value.getApi().refetchEvents();
|
||||
console.log("📌 FullCalendar 데이터 업데이트 완료");
|
||||
}
|
||||
|
||||
// 컴포넌트 마운트 시 현재 달의 데이터 로드
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
await fetchUserList(); // 사용자 목록 먼저 불러오기
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
const month = String(today.getMonth() + 1).padStart(2, "0");
|
||||
console.log(`📌 초기 로드: ${year}-${month}`);
|
||||
loadCalendarData(year, month);
|
||||
await loadCalendarData(year, month);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user