File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h2 class="card-title">휴가 현황</h2>
<!-- 폼그룹 -->
<div class="form-group">
<div class="form-conts">
<div class="form-conts datepicker-conts">
<div class="datepicker-input">
<input
type="date"
class="form-control datepicker cal"
:value="startDate"
style="max-width: 200px;"
/>
<mark>~</mark>
<input
type="date"
class="form-control datepicker cal"
:value="endDate"
style="max-width: 200px;"
/>
</div>
</div>
</div>
</div>
<!-- //폼그룹 -->
<div class="boxs">
<div class="color-boxs">
<div class="box ">
<h3>지각</h3>
3
</div>
<div class="box blue">
<h3>조기퇴근</h3>
3
</div>
<div class="box red">
<h3>결근</h3>
3
</div>
<div class="box green">
<h3>결근</h3>
3
</div>
<div class="box purple">
<h3>결근</h3>
3
</div>
<div class="box orange">
<h3>결근</h3>
3
</div>
</div>
</div>
<!-- Table -->
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>구분 </th>
<th>기간</th>
<th>승인자</th>
<th>신청일</th>
<th>상태</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index" @click="goToDetailPage(item)">
<td>{{ item.type }}</td>
<td>{{ item.period }}</td>
<td>{{ item.approval }}</td>
<td>{{ item.requestDate }}</td>
<td :class="getStatusClass(item.status)">{{ item.status }}</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<ul>
<!-- 왼쪽 화살표 (이전 페이지) -->
<li
class="arrow"
:class="{ disabled: currentPage === 1 }"
@click="changePage(currentPage - 1)"
>
<
</li>
<!-- 페이지 번호 -->
<li
v-for="page in totalPages"
:key="page"
:class="{ active: currentPage === page }"
@click="changePage(page)"
>
{{ page }}
</li>
<!-- 오른쪽 화살표 (다음 페이지) -->
<li
class="arrow"
:class="{ disabled: currentPage === totalPages }"
@click="changePage(currentPage + 1)"
>
>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
data() {
const today = new Date();
const formattedToday = today.toISOString().split('T')[0]; // 'YYYY-MM-DD'
return {
startDate: '2025-01-01',
endDate: formattedToday,
showOptions: false,
currentPage: 1,
totalPages: 3,
photoicon: "/client/resources/img/photo_icon.png",
// 데이터 초기화
years: [2023, 2024, 2025], // 연도 목록
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
selectedYear: '',
selectedMonth: '',
listData: [
{
type: '연차',
period: '2025-05-10 ~ 2025-15-03',
approval: '홍길동',
requestDate: '2025-04-25',
status: '대기'
}, {
type: '반차',
period: '2025-05-01 ~ 2025-05-03',
approval: '홍길동',
requestDate: '2025-04-25',
status: '승인'
}],
filteredData: [],
};
},
components:{
SearchOutlined
},
computed: {
},
methods: {
goToAttendancePage(item) {
this.$router.push({ name: 'AttendanceDetail', query: { id: item.id } });
},
changePage(page) {
if (page < 1 || page > this.totalPages) return;
this.currentPage = page;
this.$emit('page-changed', page); // 필요 시 부모에 알림
},
async onClickSubmit() {
// `useMutation` 훅을 사용하여 mutation 함수 가져오기
const { mutate, onDone, onError } = useMutation(mygql);
try {
const result = await mutate();
console.log(result);
} catch (error) {
console.error('Mutation error:', error);
}
},
goToDetailPage(item) {
this.$router.push({
name: 'HyugaDetail',
query: { id: item.id }
});
},
// 상태에 따른 클래스 반환 메소드
getStatusClass(status) {
return status === 'active' ? 'status-active' : 'status-inactive';
},
getStatusClass(status) {
if (status === '승인') return 'status-approved';
if (status === '대기') return 'status-pending';
return '';
},
isPastPeriod(period) {
// 예: '2025-05-01 ~ 2025-05-03' → 종료일 추출
const endDateStr = period.split('~')[1]?.trim();
if (!endDateStr) return false;
const endDate = new Date(endDateStr);
const today = new Date();
// 현재 날짜보다 과거면 true
return endDate < today;
}
},
created() {
},
mounted() {
},
};
</script>
<style scoped>
tr{cursor: pointer;}
</style>