휴가 css 수정완
This commit is contained in:
parent
21fb66bafe
commit
6e00c338ea
@ -3,7 +3,6 @@
|
||||
|
||||
/* 휴가 */
|
||||
|
||||
|
||||
/* 이벤트 선 없게 */
|
||||
.fc-event {
|
||||
border: none;
|
||||
@ -94,8 +93,72 @@ opacity: 0.6; /* 흐려 보이게 */
|
||||
}
|
||||
|
||||
|
||||
/* 본인 모달 */
|
||||
/* 닫기 버튼 */
|
||||
/* 휴가 모달 */
|
||||
.vac-modal-dialog {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.vac-modal-content {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.vac-modal-body {
|
||||
max-height: 140px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.vac-modal-text {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.count-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.count-value {
|
||||
font-size: 23px;
|
||||
font-weight: bold;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.custom-button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
font-size: 26px;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.vac-modal-title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.vacation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
@ -108,41 +171,6 @@ opacity: 0.6; /* 흐려 보이게 */
|
||||
.close-btn:hover {
|
||||
color: #525252;
|
||||
}
|
||||
/* 모달 배경 투명하게 */
|
||||
.vac-modal-dialog {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
/* 모달 본문 스타일 */
|
||||
.vac-modal-content {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
/* 리스트 아이템 */
|
||||
.vacation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
|
||||
/* 선물하기 모달 */
|
||||
/* 연차 개수 버튼 */
|
||||
.count-btn {
|
||||
font-size: 18px;
|
||||
padding: 2px 10px;
|
||||
@ -159,29 +187,179 @@ opacity: 0.6; /* 흐려 보이게 */
|
||||
background: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* 버튼 컨테이너 (우측 정렬) */
|
||||
.custom-button-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
/* 버튼 기본 스타일 */
|
||||
.custom-button {
|
||||
background: none; /* 배경색 없음 */
|
||||
border: none; /* 테두리 없음 */
|
||||
padding: 10px; /* 크기 조정 */
|
||||
cursor: pointer; /* 클릭 가능하도록 변경 */
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 아이콘 색상 변경 (기본) */
|
||||
.custom-button i {
|
||||
color: #282538; /* 기본 아이콘 색상 */
|
||||
font-size: 25px; /* 아이콘 크기 */
|
||||
color: #282538;
|
||||
font-size: 25px;
|
||||
}
|
||||
/* 버튼 호버 효과 */
|
||||
.custom-button:hover i {
|
||||
color: #ff0800; /* 호버 시 아이콘 색상 변경 */
|
||||
color: #ff0800;
|
||||
}
|
||||
|
||||
/* 휴가 사원프로필 */
|
||||
.profile-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.profile-img {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* 오전/오후반차,저장버튼 */
|
||||
/* 버튼 기본 스타일 */
|
||||
.vac-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
line-height: 1.53;
|
||||
color: #697a8d;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
/* 마우스를 올렸을 때 */
|
||||
.vac-btn:hover {
|
||||
filter: brightness(90%);
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
/* 버튼이 눌렸을 때 */
|
||||
.vac-btn:active {
|
||||
transform: scale(0.9);
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
/* 선택된 (눌린) 버튼 */
|
||||
.vac-btn.active {
|
||||
border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
|
||||
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.vac-btn-warning{
|
||||
color: #fff;
|
||||
background-color: #ffab00;
|
||||
border-color: #ffab00;
|
||||
box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 171, 0, 0.4);
|
||||
}
|
||||
/* AM 버튼 (선택된 상태) */
|
||||
.vac-btn-warning.active {
|
||||
background-color: #ffca2c !important;
|
||||
color: black;
|
||||
}
|
||||
.vac-btn-info {
|
||||
color: #fff;
|
||||
background-color: #03c3ec;
|
||||
border-color: #03c3ec;
|
||||
box-shadow: 0 0.125rem 0.25rem 0 rgba(3, 195, 236, 0.4);
|
||||
}
|
||||
/* PM 버튼 (선택된 상태) */
|
||||
.vac-btn-info.active {
|
||||
background-color: #0b5ed7 !important;
|
||||
color: white;
|
||||
}
|
||||
/* 버튼 기본 (비활성화일 때 기본 녹색) */
|
||||
.btn-success {
|
||||
font-size: 24px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
background-color: #871919 !important;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
/* 버튼 활성화 */
|
||||
.btn-success.active {
|
||||
background-color: #ff0000 !important;
|
||||
color: white !important;
|
||||
border: 3px solid #eb9f9f !important;
|
||||
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
/* 버튼 비활성화 */
|
||||
.btn-success.disabled {
|
||||
background-color: #bbb8b8 !important;
|
||||
color: white !important;
|
||||
cursor: not-allowed !important;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 작은 화면에서 버튼 크기 조정 */
|
||||
@media (max-width: 1600px) {
|
||||
.count-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.count-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.count-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
.custom-button {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.vac-grant-modal-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.vac-modal-text {
|
||||
font-size: 11px;
|
||||
}
|
||||
.vac-modal-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.vacation-item {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.vac-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.btn-success {
|
||||
font-size: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.grayscaleImg {
|
||||
filter: grayscale(100%);
|
||||
|
||||
@ -1,30 +1,28 @@
|
||||
<template>
|
||||
<div class="menu gap-4 justify-content-center mt-5">
|
||||
<!-- 오전 반차 버튼 -->
|
||||
<button
|
||||
class="btn btn-warning"
|
||||
:class="{ active: halfDayType === 'AM' }"
|
||||
@click="toggleHalfDay('AM')"
|
||||
>
|
||||
<!-- 오전 반차 버튼 -->
|
||||
<button
|
||||
class="vac-btn vac-btn-warning"
|
||||
:class="{ active: halfDayType === 'AM' }"
|
||||
@click="toggleHalfDay('AM')"
|
||||
>
|
||||
<i class="bi bi-sun"></i>
|
||||
</button>
|
||||
|
||||
<!-- 오후 반차 버튼 -->
|
||||
<button
|
||||
class="btn btn-info"
|
||||
: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"
|
||||
:class="{ active: !isDisabled, disabled: isDisabled }">
|
||||
✔
|
||||
</button>
|
||||
</div>
|
||||
<!-- 오후 반차 버튼 -->
|
||||
<button
|
||||
class="vac-btn vac-btn-info"
|
||||
:class="{ active: halfDayType === 'PM' }"
|
||||
@click="toggleHalfDay('PM')"
|
||||
>
|
||||
<i class="bi bi-moon"></i>
|
||||
</button>
|
||||
<!-- 저장 버튼 -->
|
||||
<div class="save-button-container">
|
||||
<button class="btn-success" @click="addVacationRequests"
|
||||
:class="{ active: !isDisabled, disabled: isDisabled }">
|
||||
✔
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,113 +30,37 @@
|
||||
import { defineEmits, ref, defineProps, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
isDisabled: Boolean,
|
||||
selectedDate: String // 날짜 선택 값을 props로 받음
|
||||
isDisabled: Boolean,
|
||||
selectedDate: String // 날짜 선택 값을 props로 받음
|
||||
});
|
||||
|
||||
const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
|
||||
const halfDayType = ref(null);
|
||||
|
||||
const toggleHalfDay = (type) => {
|
||||
halfDayType.value = halfDayType.value === type ? null : type;
|
||||
emit("toggleHalfDay", halfDayType.value);
|
||||
halfDayType.value = halfDayType.value === type ? null : type;
|
||||
emit("toggleHalfDay", halfDayType.value);
|
||||
};
|
||||
|
||||
// `selectedDate`가 변경되면 반차 선택 초기화
|
||||
watch(() => props.selectedDate, (newDate) => {
|
||||
if (newDate) {
|
||||
resetHalfDay();
|
||||
}
|
||||
if (newDate) {
|
||||
resetHalfDay();
|
||||
}
|
||||
});
|
||||
|
||||
// 날짜 선택 후 반차 버튼 상태 초기화
|
||||
const resetHalfDay = () => {
|
||||
halfDayType.value = null;
|
||||
emit("resetHalfDay");
|
||||
halfDayType.value = null;
|
||||
emit("resetHalfDay");
|
||||
};
|
||||
|
||||
const addVacationRequests = () => {
|
||||
emit("addVacationRequests");
|
||||
emit("addVacationRequests");
|
||||
};
|
||||
|
||||
defineExpose({ resetHalfDay });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 버튼 기본 스타일 */
|
||||
.btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* 마우스를 올렸을 때 */
|
||||
.btn:hover {
|
||||
filter: brightness(90%);
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 버튼이 눌렸을 때 */
|
||||
.btn:active {
|
||||
transform: scale(0.9);
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 선택된 (눌린) 버튼 */
|
||||
.btn.active {
|
||||
border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
|
||||
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* AM 버튼 (선택된 상태) */
|
||||
.btn-warning.active {
|
||||
background-color: #ffca2c !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* PM 버튼 (선택된 상태) */
|
||||
.btn-info.active {
|
||||
background-color: #0b5ed7 !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ✔ 버튼 기본 (비활성화일 때 기본 녹색) */
|
||||
.btn-success {
|
||||
font-size: 24px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
background-color: #871919 !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ✔ 버튼 활성화 */
|
||||
.btn-success.active {
|
||||
background-color: #ff0000 !important;
|
||||
color: white !important;
|
||||
border: 3px solid #eb9f9f !important;
|
||||
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* ✔ 버튼 비활성화 */
|
||||
.btn-success.disabled {
|
||||
background-color: #bbb8b8 !important;
|
||||
color: white !important;
|
||||
cursor: not-allowed !important;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
<template>
|
||||
<div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
|
||||
<div class="vac-modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
|
||||
<div class="vac-modal-header">
|
||||
<h5 class="vac-grant-modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
|
||||
<button class="close-btn" @click="closeModal">✖</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p class="modal-text">선물할 연차 개수를 선택하세요.</p>
|
||||
|
||||
<div class="vac-modal-body">
|
||||
<p class="vac-modal-text">선물할 연차 개수를 선택하세요.</p>
|
||||
<div class="count-container">
|
||||
<button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
|
||||
<span class="count-value">{{ grantCount }}</span>
|
||||
<button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
|
||||
</div>
|
||||
|
||||
<div class="custom-button-container">
|
||||
<button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
|
||||
<i class="bx bx-gift"></i>
|
||||
@ -42,6 +39,7 @@ const maxQuota = 2;
|
||||
const sentCount = ref(0);
|
||||
const availableQuota = ref(2);
|
||||
|
||||
// 사원 별 남은 보내기 개수
|
||||
const fetchSentVacationCount = async () => {
|
||||
try {
|
||||
const payload = { receiverId: props.targetUser.MEMBERSEQ };
|
||||
@ -56,18 +54,20 @@ const fetchSentVacationCount = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 개수 증가
|
||||
const increaseCount = () => {
|
||||
if (grantCount.value < availableQuota.value) {
|
||||
grantCount.value++;
|
||||
}
|
||||
};
|
||||
|
||||
// 개수 감소
|
||||
const decreaseCount = () => {
|
||||
if (grantCount.value > 0) {
|
||||
grantCount.value--;
|
||||
}
|
||||
};
|
||||
|
||||
// 연차 선물하기
|
||||
const saveVacationGrant = async () => {
|
||||
try {
|
||||
const payload = [{
|
||||
@ -86,11 +86,11 @@ const saveVacationGrant = async () => {
|
||||
toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 연차 추가 실패:", error);
|
||||
toastStore.onToast(' 연차 선물 실패!!.', 'e');
|
||||
}
|
||||
};
|
||||
|
||||
// 모달 닫기기
|
||||
const closeModal = () => {
|
||||
emit("close");
|
||||
};
|
||||
@ -100,7 +100,6 @@ watch(() => props.isOpen, async (newVal) => {
|
||||
await fetchSentVacationCount();
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.targetUser, async (newUser) => {
|
||||
if (newUser?.MEMBERSEQ) {
|
||||
await fetchSentVacationCount();
|
||||
@ -115,152 +114,4 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ✅ 반응형 모달 크기 조정 */
|
||||
.vac-modal-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 9999;
|
||||
overflow: hidden; /* 풀 화면에서 스크롤 방지 */
|
||||
}
|
||||
|
||||
.vac-modal-content {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
width: 500px;
|
||||
height: auto;
|
||||
max-height: 90vh;
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ✅ 제목 스타일 */
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ✅ 본문 텍스트 스타일 */
|
||||
.modal-text {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* ✅ 숫자 선택 영역 */
|
||||
.count-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* ✅ 숫자 값 크기 증가 */
|
||||
.count-value {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ✅ 숫자 버튼 */
|
||||
.count-btn {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 22px;
|
||||
border: none;
|
||||
background: #2C3E50;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.count-btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ✅ 선물 아이콘 버튼 */
|
||||
.custom-button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
font-size: 26px;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* ✅ 작은 화면에서 버튼 크기 조정 */
|
||||
@media (max-width: 1024px) {
|
||||
.count-btn {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.count-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.count-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.count-value {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,141 +1,122 @@
|
||||
<template>
|
||||
<div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
|
||||
<div class="vac-modal-content p-5 modal-scroll">
|
||||
<h5 class="modal-title">📅 내 연차 사용 내역</h5>
|
||||
<button class="close-btn" @click="closeModal">✖</button>
|
||||
|
||||
<!-- 연차 목록 -->
|
||||
<div class="modal-body" v-if="mergedVacations.length > 0">
|
||||
<ol class="list-group-numbered px-0 mt-4">
|
||||
<li
|
||||
v-for="(vac, index) in mergedVacations"
|
||||
:key="vac._expandIndex"
|
||||
class="vacation-item"
|
||||
>
|
||||
<!-- Used 항목만 인덱스 표시 -->
|
||||
<span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
|
||||
{{ usedVacationIndexMap[vac._expandIndex] }})
|
||||
</span>
|
||||
|
||||
<span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
|
||||
{{ vac.category === 'used' ? '-' : '+' }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
:style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
|
||||
>
|
||||
{{ formatDate(vac.date) }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="vac-modal-content p-5 modal-scroll">
|
||||
<h5 class="vac-modal-title">📅 내 연차 사용 내역</h5>
|
||||
<button class="close-btn" @click="closeModal">✖</button>
|
||||
<!-- 연차 목록 -->
|
||||
<div class="vac-modal-body" v-if="mergedVacations.length > 0">
|
||||
<ol class="list-group-numbered px-0 mt-4">
|
||||
<li
|
||||
v-for="(vac, index) in mergedVacations"
|
||||
:key="vac._expandIndex"
|
||||
class="vacation-item"
|
||||
>
|
||||
<span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
|
||||
{{ usedVacationIndexMap[vac._expandIndex] }})
|
||||
</span>
|
||||
<span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
|
||||
{{ vac.category === 'used' ? '-' : '+' }}
|
||||
</span>
|
||||
<span
|
||||
:style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
|
||||
>
|
||||
{{ formatDate(vac.date) }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- 연차 데이터 없음 -->
|
||||
<p v-else class="text-sm-center mt-10 text-gray">
|
||||
🚫 사용한 연차가 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 연차 데이터 없음 -->
|
||||
<p v-else class="text-sm-center mt-10 text-gray">
|
||||
🚫 사용한 연차가 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, computed } from "vue";
|
||||
import { formatDate } from '@/common/formattedDate.js';
|
||||
|
||||
const props = defineProps({
|
||||
isOpen: Boolean,
|
||||
myVacations: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
receivedVacations: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
userColors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
isOpen: Boolean,
|
||||
myVacations: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
receivedVacations: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
userColors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
/**
|
||||
* 1) Used 휴가를 used_quota만큼 펼치기
|
||||
* - category: "used"
|
||||
* - code: 휴가 코드(예: LOCVACTYP)
|
||||
* - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
|
||||
*/
|
||||
let globalCounter = 0; // 확장 시 사용할 전역 카운터
|
||||
// 사용한 휴가(선물,연차사용)
|
||||
let globalCounter = 0;
|
||||
const usedVacations = computed(() => {
|
||||
const result = [];
|
||||
props.myVacations.forEach((v) => {
|
||||
const count = v.used_quota || 1;
|
||||
for (let i = 0; i < count; i++) {
|
||||
result.push({
|
||||
...v,
|
||||
category: "used",
|
||||
code: v.LOCVACTYP, // 휴가 코드 (700103 등)
|
||||
_expandIndex: globalCounter++,
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
const result = [];
|
||||
props.myVacations.forEach((v) => {
|
||||
const count = v.used_quota || 1;
|
||||
for (let i = 0; i < count; i++) {
|
||||
result.push({
|
||||
...v,
|
||||
category: "used",
|
||||
code: v.LOCVACTYP,
|
||||
_expandIndex: globalCounter++,
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
});
|
||||
|
||||
/**
|
||||
* 2) Received 휴가: category: "received"
|
||||
*/
|
||||
// 받은 휴가
|
||||
const receivedVacations = computed(() =>
|
||||
props.receivedVacations.map((v) => ({
|
||||
...v,
|
||||
category: "received",
|
||||
}))
|
||||
props.receivedVacations.map((v) => ({
|
||||
...v,
|
||||
category: "received",
|
||||
}))
|
||||
);
|
||||
|
||||
/**
|
||||
* 3) Used 휴가만 날짜 오름차순 정렬 → 누적 인덱스 계산
|
||||
* - type === "700103"이면 +1
|
||||
* - 그 외이면 +0.5
|
||||
*/
|
||||
// 필터링
|
||||
const sortedUsedVacationsAsc = computed(() => {
|
||||
return [...usedVacations.value].sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
|
||||
});
|
||||
return [...usedVacations.value].sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
|
||||
});
|
||||
});
|
||||
|
||||
// 누적 인덱스 계산 type === "700103"이면 +1 그 외이면 +0.5
|
||||
const usedVacationIndexMap = computed(() => {
|
||||
let cumulative = 0;
|
||||
const map = {};
|
||||
sortedUsedVacationsAsc.value.forEach((item) => {
|
||||
const increment = item.type === "700103" ? 1 : 0.5;
|
||||
cumulative += increment;
|
||||
map[item._expandIndex] = cumulative;
|
||||
});
|
||||
return map;
|
||||
let cumulative = 0;
|
||||
const map = {};
|
||||
sortedUsedVacationsAsc.value.forEach((item) => {
|
||||
const increment = item.type === "700103" ? 1 : 0.5;
|
||||
cumulative += increment;
|
||||
map[item._expandIndex] = cumulative;
|
||||
});
|
||||
return map;
|
||||
});
|
||||
|
||||
/**
|
||||
* 4) 최종 표시할 merged 리스트 (Used + Received)
|
||||
* - 날짜 내림차순 정렬 (최신 → 과거)
|
||||
*/
|
||||
// 최종 표시할 merged 리스트 (Used + Received) 날짜 내림차순 정렬 (최신 → 과거)
|
||||
const mergedVacations = computed(() => {
|
||||
const all = [...usedVacations.value, ...receivedVacations.value];
|
||||
// 날짜 내림차순 + 확장 인덱스 내림차순
|
||||
all.sort((a, b) => {
|
||||
const dateDiff = new Date(b.date) - new Date(a.date);
|
||||
if (dateDiff !== 0) return dateDiff;
|
||||
return b._expandIndex - a._expandIndex;
|
||||
});
|
||||
return all;
|
||||
const all = [...usedVacations.value, ...receivedVacations.value];
|
||||
// 날짜 내림차순 + 확장 인덱스 내림차순
|
||||
all.sort((a, b) => {
|
||||
const dateDiff = new Date(b.date) - new Date(a.date);
|
||||
if (dateDiff !== 0) return dateDiff;
|
||||
return b._expandIndex - a._expandIndex;
|
||||
});
|
||||
return all;
|
||||
});
|
||||
|
||||
|
||||
/** 모달 닫기 */
|
||||
// 모달 닫기
|
||||
const closeModal = () => {
|
||||
emit("close");
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@ -1,153 +1,115 @@
|
||||
<template>
|
||||
<div class="card-body d-flex justify-content-center m-n5">
|
||||
<ul class="list-unstyled profile-list">
|
||||
<li
|
||||
v-for="(user, index) in sortedUserList"
|
||||
:key="index"
|
||||
:class="{ disabled: user.disabled }"
|
||||
@click="$emit('profileClick', user)"
|
||||
data-bs-placement="top"
|
||||
:aria-label="user.MEMBERSEQ"
|
||||
>
|
||||
<img
|
||||
class="rounded-circle profile-img"
|
||||
:src="getUserProfileImage(user.MEMBERPRF)"
|
||||
alt="user"
|
||||
:style="getDynamicStyle(user)"
|
||||
@error="setDefaultImage"
|
||||
@load="showImage"
|
||||
/>
|
||||
<span class="remaining-vacation">
|
||||
{{ remainingVacationData[user.MEMBERSEQ] || 0 }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled profile-list">
|
||||
<li
|
||||
v-for="(user, index) in sortedUserList"
|
||||
:key="index"
|
||||
:class="{ disabled: user.disabled }"
|
||||
@click="$emit('profileClick', user)"
|
||||
data-bs-placement="top"
|
||||
:aria-label="user.MEMBERSEQ"
|
||||
>
|
||||
<img
|
||||
class="rounded-circle profile-img"
|
||||
:src="getUserProfileImage(user.MEMBERPRF)"
|
||||
alt="user"
|
||||
:style="getDynamicStyle(user)"
|
||||
@error="setDefaultImage"
|
||||
@load="showImage"
|
||||
/>
|
||||
<span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
|
||||
{{ remainingVacationData[user.MEMBERSEQ] || 0 }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, computed, nextTick } from "vue";
|
||||
import { useUserInfoStore } from "@s/useUserInfoStore";
|
||||
import { useUserStore } from "@s/userList";
|
||||
import $api from "@api";
|
||||
<script setup>
|
||||
import { onMounted, ref, computed, nextTick } from "vue";
|
||||
import { useUserInfoStore } from "@s/useUserInfoStore";
|
||||
import { useUserStore } from "@s/userList";
|
||||
import $api from "@api";
|
||||
|
||||
defineEmits(["profileClick"]);
|
||||
defineProps({ remainingVacationData: Object });
|
||||
defineEmits(["profileClick"]);
|
||||
defineProps({ remainingVacationData: Object });
|
||||
|
||||
const userStore = useUserInfoStore();
|
||||
const userListStore = useUserStore();
|
||||
const userStore = useUserInfoStore();
|
||||
const userListStore = useUserStore();
|
||||
|
||||
const userList = ref([]);
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
|
||||
const defaultProfile = "/img/icons/icon.png";
|
||||
const employeeId = ref(null);
|
||||
const userColors = ref({});
|
||||
const windowWidth = ref(window.innerWidth);
|
||||
const userList = ref([]);
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
|
||||
const defaultProfile = "/img/icons/icon.png";
|
||||
const employeeId = ref(null);
|
||||
const userColors = ref({});
|
||||
const windowWidth = ref(window.innerWidth);
|
||||
|
||||
const updateWindowWidth = () => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
};
|
||||
const updateWindowWidth = () => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
window.addEventListener("resize", updateWindowWidth);
|
||||
onMounted(async () => {
|
||||
window.addEventListener("resize", updateWindowWidth);
|
||||
|
||||
await userStore.userInfo();
|
||||
employeeId.value = userStore.user?.id ?? null;
|
||||
await userStore.userInfo();
|
||||
employeeId.value = userStore.user?.id ?? null;
|
||||
|
||||
await userListStore.fetchUserList();
|
||||
userList.value = userListStore.userList;
|
||||
await userListStore.fetchUserList();
|
||||
userList.value = userListStore.userList;
|
||||
|
||||
userList.value.forEach(user => {
|
||||
userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
|
||||
userList.value.forEach(user => {
|
||||
userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
|
||||
});
|
||||
|
||||
nextTick(() => {
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
nextTick(() => {
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip);
|
||||
});
|
||||
});
|
||||
});
|
||||
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 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) =>
|
||||
profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
|
||||
|
||||
const getUserProfileImage = (profilePath) =>
|
||||
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 setDefaultImage = (event) => (event.target.src = defaultProfile);
|
||||
const showImage = (event) => (event.target.style.visibility = "visible");
|
||||
// 화면 크기에 따라 프로필 크기 동적 조정
|
||||
const profileSize = computed(() => {
|
||||
const totalUsers = userList.value.length;
|
||||
|
||||
// ✅ 화면 크기에 따라 프로필 크기 동적 조정
|
||||
const profileSize = computed(() => {
|
||||
const totalUsers = userList.value.length;
|
||||
if (windowWidth.value >= 1650) {
|
||||
if (totalUsers <= 10) return "68px";
|
||||
if (totalUsers <= 15) return "55px";
|
||||
return "45px";
|
||||
} else if (windowWidth.value >= 1300) {
|
||||
if (totalUsers <= 10) return "45px";
|
||||
if (totalUsers <= 15) return "40px";
|
||||
return "30px";
|
||||
} else if (windowWidth.value >= 1024) {
|
||||
if (totalUsers <= 10) return "40px";
|
||||
if (totalUsers <= 15) return "30px";
|
||||
return "20px";
|
||||
} else {
|
||||
return "20px";
|
||||
}
|
||||
});
|
||||
|
||||
if (windowWidth.value >= 1650) {
|
||||
if (totalUsers <= 10) return "68px";
|
||||
if (totalUsers <= 15) return "55px";
|
||||
return "45px";
|
||||
} else if (windowWidth.value >= 1300) {
|
||||
if (totalUsers <= 10) return "45px";
|
||||
if (totalUsers <= 15) return "40px";
|
||||
return "30px";
|
||||
} else if (windowWidth.value >= 1024) {
|
||||
if (totalUsers <= 10) return "40px";
|
||||
if (totalUsers <= 15) return "30px";
|
||||
return "20px";
|
||||
} else {
|
||||
return "20px"; // 모바일 최소 크기
|
||||
}
|
||||
});
|
||||
const getDynamicStyle = (user) => ({
|
||||
width: profileSize.value,
|
||||
height: profileSize.value,
|
||||
borderWidth: "4px",
|
||||
borderColor: user.usercolor || "#ccc",
|
||||
borderStyle: "solid",
|
||||
});
|
||||
</script>
|
||||
|
||||
const getDynamicStyle = (user) => ({
|
||||
width: profileSize.value,
|
||||
height: profileSize.value,
|
||||
borderWidth: "4px",
|
||||
borderColor: user.usercolor || "#ccc",
|
||||
borderStyle: "solid",
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ✅ 프로필 리스트 반응형 정렬 */
|
||||
.profile-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ✅ 프로필 이미지 반응형 스타일 */
|
||||
.profile-img {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* ✅ 남은 연차 개수 스타일 */
|
||||
.remaining-vacation {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* ✅ 작은 화면에서 프로필 크기 조정 */
|
||||
@media (max-width: 1024px) {
|
||||
.remaining-vacation {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.profile-list {
|
||||
gap: 4px; /* 작은 화면에서는 간격 축소 */
|
||||
}
|
||||
.remaining-vacation {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@ -15,24 +15,24 @@
|
||||
/>
|
||||
</div>
|
||||
<ProfileList
|
||||
@profileClick="handleProfileClick"
|
||||
:remainingVacationData="remainingVacationData"
|
||||
@profileClick="handleProfileClick"
|
||||
:remainingVacationData="remainingVacationData"
|
||||
/>
|
||||
<VacationModal
|
||||
v-if="isModalOpen"
|
||||
:isOpen="isModalOpen"
|
||||
:myVacations="filteredMyVacations"
|
||||
:receivedVacations="filteredReceivedVacations"
|
||||
:userColors="userColors"
|
||||
@close="isModalOpen = false"
|
||||
v-if="isModalOpen"
|
||||
:isOpen="isModalOpen"
|
||||
:myVacations="filteredMyVacations"
|
||||
:receivedVacations="filteredReceivedVacations"
|
||||
:userColors="userColors"
|
||||
@close="isModalOpen = false"
|
||||
/>
|
||||
<VacationGrantModal
|
||||
v-if="isGrantModalOpen"
|
||||
:isOpen="isGrantModalOpen"
|
||||
:targetUser="selectedUser"
|
||||
:remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
|
||||
@close="isGrantModalOpen = false"
|
||||
@updateVacation="fetchRemainingVacation"
|
||||
v-if="isGrantModalOpen"
|
||||
:isOpen="isGrantModalOpen"
|
||||
:targetUser="selectedUser"
|
||||
:remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
|
||||
@close="isGrantModalOpen = false"
|
||||
@updateVacation="fetchRemainingVacation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -554,8 +554,8 @@ onMounted(async () => {
|
||||
const dpEl = calendarDatepicker.value;
|
||||
dpEl.style.display = 'block';
|
||||
dpEl.style.position = 'fixed';
|
||||
dpEl.style.top = '22%';
|
||||
dpEl.style.left = '66%';
|
||||
dpEl.style.top = '25%';
|
||||
dpEl.style.left = '50%';
|
||||
dpEl.style.transform = 'translate(-50%, -50%)';
|
||||
dpEl.style.zIndex = '9999';
|
||||
dpEl.style.border = 'none';
|
||||
@ -568,11 +568,4 @@ onMounted(async () => {
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
/* 모달 본문 스크롤 */
|
||||
.modal-body {
|
||||
max-height: 140px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user