휴가관리 사원프로필
This commit is contained in:
parent
cfa46c0a6d
commit
e4c8b0aa1f
@ -29,68 +29,82 @@
|
|||||||
|
|
||||||
|
|
||||||
/* 휴가*/
|
/* 휴가*/
|
||||||
|
|
||||||
.half-day-buttons {
|
.half-day-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
.half-day-buttons .btn.active {
|
.half-day-buttons .btn.active {
|
||||||
border: 2px solid black;
|
border: 2px solid black;
|
||||||
}
|
}
|
||||||
.fc-daygrid-day-frame {
|
.fc-daygrid-day-frame {
|
||||||
min-height: 80px !important;
|
min-height: 80px !important;
|
||||||
max-height: 120px !important;
|
max-height: 120px !important;
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
padding-top: 25px !important;
|
padding-top: 25px !important;
|
||||||
}
|
}
|
||||||
.fc-daygrid-day-events {
|
.fc-daygrid-day-events {
|
||||||
max-height: 100px !important;
|
max-height: 100px !important;
|
||||||
overflow-y: auto !important;
|
overflow-y: auto !important;
|
||||||
}
|
}
|
||||||
.fc-daygrid-event {
|
.fc-daygrid-event {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
height: 20px !important;
|
height: 20px !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
margin: 2px 0 !important;
|
margin: 2px 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
border-radius: 2px !important;
|
border-radius: 2px !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
.fc-daygrid-event-harness {
|
.fc-daygrid-event-harness {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
gap: 22px;
|
gap: 22px;
|
||||||
}
|
}
|
||||||
.fc-daygrid-event.half-day-am {
|
.fc-daygrid-event.half-day-am {
|
||||||
width: 45% !important;
|
width: 45% !important;
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
}
|
}
|
||||||
.fc-daygrid-event.half-day-pm {
|
.fc-daygrid-event.half-day-pm {
|
||||||
width: 45% !important;
|
width: 45% !important;
|
||||||
left: auto !important;
|
left: auto !important;
|
||||||
right: 0 !important;
|
right: 0 !important;
|
||||||
}
|
}
|
||||||
.fc-daygrid-event.full-day {
|
.fc-daygrid-event.full-day {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
}
|
}
|
||||||
.fc-day-sun .fc-daygrid-day-number,
|
.fc-day-sun .fc-daygrid-day-number,
|
||||||
.fc-col-header-cell:first-child .fc-col-header-cell-cushion {
|
.fc-col-header-cell:first-child .fc-col-header-cell-cushion {
|
||||||
color: #ff4500 !important;
|
color: #ff4500 !important;
|
||||||
}
|
}
|
||||||
.fc-day-sat .fc-daygrid-day-number,
|
.fc-day-sat .fc-daygrid-day-number,
|
||||||
.fc-col-header-cell:last-child .fc-col-header-cell-cushion {
|
.fc-col-header-cell:last-child .fc-col-header-cell-cushion {
|
||||||
color: #6076e0 !important;
|
color: #6076e0 !important;
|
||||||
}
|
}
|
||||||
.fc-daygrid-day-number {
|
.fc-daygrid-day-number {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
top: 0px !important;
|
top: 0px !important;
|
||||||
left: 5px !important;
|
left: 5px !important;
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
border: 3px solid;
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
|
object-fit: cover;
|
||||||
|
background-color: white;
|
||||||
|
transition: transform 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.grayscaleImg {
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
@ -1,53 +1,54 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="users-list-wrapper">
|
<div class="card-body d-flex justify-content-center">
|
||||||
<button class="scroll-btn left" @click="scrollLeft">❮</button>
|
<ul class="list-unstyled d-flex align-items-center gap-7 mb-0 mt-2">
|
||||||
|
<li
|
||||||
<div class="users-list-container" ref="userListContainer">
|
v-for="(user, index) in sortedUserList"
|
||||||
<ul class="list-unstyled users-list d-flex align-items-center justify-content-start">
|
|
||||||
<li
|
|
||||||
v-for="(user, index) in userList"
|
|
||||||
:key="index"
|
:key="index"
|
||||||
class="avatar pull-up position-relative"
|
|
||||||
:class="{ disabled: user.disabled }"
|
:class="{ disabled: user.disabled }"
|
||||||
@click="toggleDisable(index)"
|
@click="toggleDisable(index)"
|
||||||
data-bs-toggle="tooltip"
|
data-bs-placement="top"
|
||||||
data-popup="tooltip-custom"
|
|
||||||
data-bs-placement="bottom"
|
|
||||||
:aria-label="user.MEMBERSEQ"
|
:aria-label="user.MEMBERSEQ"
|
||||||
:data-bs-original-title="getTooltipTitle(user)"
|
>
|
||||||
>
|
|
||||||
<div class="tooltip-custom">{{ getTooltipTitle(user) }}</div>
|
|
||||||
<img
|
<img
|
||||||
class="rounded-circle user-avatar"
|
class="rounded-circle user-avatar"
|
||||||
:src="getUserProfileImage(user.MEMBERPRF)"
|
:src="getUserProfileImage(user.MEMBERPRF)"
|
||||||
alt="user"
|
alt="user"
|
||||||
:style="{ borderColor: user.usercolor }"
|
:style="getDynamicStyle(user)"
|
||||||
@error="setDefaultImage"
|
@error="setDefaultImage"
|
||||||
@load="showImage"
|
@load="showImage"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="scroll-btn right" @click="scrollRight">❯</button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref, nextTick } from "vue";
|
import { onMounted, ref, computed, nextTick } from "vue";
|
||||||
import { useUserStore } from "@s/userList";
|
import { useUserStore } from "@s/useUserStore"; // 사용자 정보 스토어 사용
|
||||||
|
import { useUserStore as useUserListStore } from "@s/userList"; // 사원 리스트 스토어
|
||||||
import $api from "@api";
|
import $api from "@api";
|
||||||
|
|
||||||
const emit = defineEmits();
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
const userListStore = useUserListStore();
|
||||||
|
|
||||||
const userList = ref([]);
|
const userList = ref([]);
|
||||||
const userListContainer = ref(null);
|
const userListContainer = ref(null);
|
||||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
|
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
|
||||||
const defaultProfile = "/img/icons/icon.png";
|
const defaultProfile = "/img/icons/icon.png";
|
||||||
|
|
||||||
|
const employeeId = ref(null); // 현재 로그인한 사용자 ID
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await userStore.fetchUserList();
|
await userStore.userInfo(); // 로그인한 사용자 정보 가져오기
|
||||||
userList.value = userStore.userList;
|
await userListStore.fetchUserList(); // 사원 리스트 가져오기
|
||||||
|
|
||||||
|
userList.value = userListStore.userList;
|
||||||
|
|
||||||
|
// 로그인한 사용자의 ID 가져오기
|
||||||
|
if (userStore.user) {
|
||||||
|
employeeId.value = userStore.user.id;
|
||||||
|
}
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||||||
tooltips.forEach((tooltip) => {
|
tooltips.forEach((tooltip) => {
|
||||||
@ -56,6 +57,17 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 내 프로필을 가장 앞에 배치한 리스트 정렬
|
||||||
|
const sortedUserList = computed(() => {
|
||||||
|
if (!employeeId.value) return userList.value; // 로그인한 사용자가 없으면 기존 리스트 반환
|
||||||
|
|
||||||
|
// 내 프로필 찾기
|
||||||
|
const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
|
||||||
|
const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
|
||||||
|
|
||||||
|
return myProfile ? [myProfile, ...otherUsers] : userList.value;
|
||||||
|
});
|
||||||
|
|
||||||
const getUserProfileImage = (profilePath) => {
|
const getUserProfileImage = (profilePath) => {
|
||||||
return profilePath && profilePath.trim()
|
return profilePath && profilePath.trim()
|
||||||
? `${baseUrl}upload/img/profile/${profilePath}`
|
? `${baseUrl}upload/img/profile/${profilePath}`
|
||||||
@ -70,153 +82,26 @@
|
|||||||
event.target.style.visibility = "visible";
|
event.target.style.visibility = "visible";
|
||||||
};
|
};
|
||||||
|
|
||||||
const getTooltipTitle = (user) => {
|
// 프로필 크기 동적 조정
|
||||||
return user.MEMBERSEQ === userList.value.MEMBERSEQ ? "나" : user.MEMBERNAM;
|
const profileSize = computed(() => {
|
||||||
};
|
const totalUsers = userList.value.length;
|
||||||
|
|
||||||
const scrollAmount = 9 * 100;
|
if (totalUsers <= 7) return "120px"; // 7명 이하
|
||||||
|
if (totalUsers <= 10) return "110px"; // ~10명
|
||||||
|
if (totalUsers <= 20) return "80px"; // ~20명
|
||||||
|
return "60px"; // 20명 이상
|
||||||
|
});
|
||||||
|
|
||||||
const scrollLeft = () => {
|
// 개별 유저 스타일 적용
|
||||||
userListContainer.value.scrollBy({ left: -scrollAmount, behavior: "smooth" });
|
const getDynamicStyle = (user) => {
|
||||||
};
|
return {
|
||||||
|
width: profileSize.value,
|
||||||
const scrollRight = () => {
|
height: profileSize.value,
|
||||||
userListContainer.value.scrollBy({ left: scrollAmount, behavior: "smooth" });
|
borderWidth: "3px",
|
||||||
|
borderColor: user.usercolor || "#ccc",
|
||||||
|
};
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* ✅ 프로필 리스트 컨테이너 */
|
|
||||||
.users-list-wrapper {
|
|
||||||
margin: auto;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 990px;
|
|
||||||
margin: 0.2 auto; /* 중앙 정렬 */
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ✅ 프로필 리스트 */
|
|
||||||
.users-list-container {
|
|
||||||
overflow-x: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0px;
|
|
||||||
scrollbar-width: none;
|
|
||||||
padding-bottom: 50px;
|
|
||||||
padding-top: 30px;
|
|
||||||
left: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ✅ 스크롤바 숨기기 */
|
|
||||||
.users-list-container::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ✅ 프로필 목록 */
|
|
||||||
.users-list {
|
|
||||||
display: flex;
|
|
||||||
gap: 91px; /* 기본 간격 */
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ✅ 프로필 이미지 스타일 */
|
|
||||||
.user-avatar {
|
|
||||||
border: 3px solid;
|
|
||||||
width: 110px;
|
|
||||||
height: 110px;
|
|
||||||
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: 110%; /* 아래쪽으로 이동 */
|
|
||||||
left: 60%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background: rgba(0, 0, 0, 0.75);
|
|
||||||
color: white;
|
|
||||||
padding: 5px 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 5px;
|
|
||||||
white-space: nowrap;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ✅ 툴팁 표시 */
|
|
||||||
.avatar:hover .tooltip-custom {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ✅ 좌우 스크롤 버튼 */
|
|
||||||
.scroll-btn {
|
|
||||||
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: 0;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-btn.right {
|
|
||||||
right: 0;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-btn:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ✅ 반응형 처리 */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.users-list {
|
|
||||||
gap: 40px; /* 좁은 화면에서는 간격 축소 */
|
|
||||||
}
|
|
||||||
.user-avatar {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
.scroll-btn {
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.users-list {
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
.user-avatar {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.users-list {
|
|
||||||
gap: 40px;
|
|
||||||
}
|
|
||||||
.user-avatar {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vacation-management">
|
<div class="vacation-management">
|
||||||
<div class="container flex-grow-1">
|
<div class="container-xxl flex-grow-1 container-p-y">
|
||||||
<div class="card app-calendar-wrapper">
|
<div class="card app-calendar-wrapper">
|
||||||
<div class="row g-0">
|
<div class="row g-0">
|
||||||
<div class="col app-calendar-content">
|
<div class="col app-calendar-content">
|
||||||
@ -68,7 +68,6 @@ const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이
|
|||||||
const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
|
const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
|
||||||
const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
|
const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
|
||||||
const halfDayType = ref(null);
|
const halfDayType = ref(null);
|
||||||
const employeeId = ref(1);
|
|
||||||
|
|
||||||
// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
|
// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
|
||||||
const holidayDates = ref(new Set());
|
const holidayDates = ref(new Set());
|
||||||
@ -212,7 +211,6 @@ if (selectedDates.value.size === 0) {
|
|||||||
const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
|
const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
|
||||||
date,
|
date,
|
||||||
type,
|
type,
|
||||||
employeeId: employeeId.value,
|
|
||||||
}));
|
}));
|
||||||
try {
|
try {
|
||||||
const response = await axios.post("vacation", vacationRequests);
|
const response = await axios.post("vacation", vacationRequests);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user