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="card ">
<div class="card-body">
<h2 class="card-title">나의 근태현황</h2>
<div class="sch-wrap">
<div class="sch-form-wrap title-wrap">
<div class="flex">
<div class="sub flex"><img :src="dateicon" alt=""><p class="date">{{ today }}</p></div>
<div class="buttons">
<button @click="handleStartClick"><img :src="startbtn" alt=""></button>
<button @click="handleEndClick"><img :src="stopbtn" alt=""></button>
</div>
</div>
<div class="input-group">
<select name="" id="" class="form-select">
<option :value="currentYear">{{ currentYear }}년</option>
<option value="all">전체</option>
<option v-for="year in remainingYears" :key="year" :value="year" v-if="year !== currentYear">
{{ year }}년
</option>
</select>
<select name="" id="" class="form-select">
<option :value="currentMonth">{{ currentMonth }}월</option>
<option value="all">전체</option>
<option v-for="month in remainingMonths" :key="month" :value="month" v-if="month !== currentMonth">
{{ month }}월
</option>
</select>
<select name="" id="" class="form-select">
<option value="">전체</option>
<option value="">지각</option>
<option value="">조기퇴근</option>
<option value="">결근</option>
<option value="">출장</option>
<option value="">대체휴가</option>
<option value="">휴가</option>
<option value="">공가</option>
<option value="">병가</option>
</select>
</div>
</div>
</div>
<div class=" tbl-wrap tbl2">
<table class="tbl data">
<colgroup>
<col style="width: 150px;">
<col style="width: ">
<col style="width: ">
<col style="width: ">
<col style="width: ">
<col style="width: ">
<!-- 더 많은 열 설정 -->
</colgroup>
<tbody>
<tr class="thead">
<td rowspan="2" class="th">근태 현황</td>
<td>지각</td>
<td>조기퇴근</td>
<td>결근</td>
<td>출장</td>
<td>주말출근</td>
</tr>
<tr>
<td>{{ late }}</td>
<td>{{ earlyLeave }}</td>
<td>{{ absence }}</td>
<td>{{ businessTrip }}</td>
<td>{{ weekendWork }}</td>
</tr>
</tbody>
</table>
<table class="tbl data">
<colgroup>
<col style="width: 150px;">
<col style="width: ">
<col style="width: ">
<col style="width: ">
<col style="width: ">
<!-- 더 많은 열 설정 -->
</colgroup>
<tbody>
<tr class="thead">
<td rowspan="2" class="th">휴가 현황</td>
<td>연차</td>
<td>대체휴가</td>
<td>공가</td>
<td>병가</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<colgroup>
<col style="width: 200px;">
<col style=" width: ">
</colgroup>
<thead>
<tr>
<th>구분 </th>
<th>내용</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index" >
<td>{{ item.type }}</td>
<td style="text-align: left !important;">{{ item.content }}</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>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
export default {
data() {
const today = new Date().toISOString().split('T')[0];
return {
currentMonth,
selectedMonth: currentMonth,
remainingMonths: Array.from({ length: 12 }, (_, i) => i + 1),
currentYear,
selectedYear: currentYear,
remainingYears: Array.from({ length: 10 }, (_, i) => currentYear - i),
currentPage: 1,
totalPages: 3,
late: '5', earlyLeave: '3', absence: '2', businessTrip: '1', weekendWork: '0' ,
today: new Date().toLocaleDateString('ko-KR', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
weekday: 'short',
}),
dateicon: "/client/resources/img/img.png",
startbtn: "/client/resources/img/start-sm.png",
stopbtn: "/client/resources/img/stop-sm.png",
startDate: today,
startTime: "09:00", // 기본 시작 시간 09:00
endDate: today,
endTime: "18:00", // 기본 종료 시간 18:00
category: "",
dayCount: 1,
reason: "", // 사유
listData: [
],
};
},
components:{
SearchOutlined
},
computed: {
// Pinia Store의 상태를 가져옵니다.
loginUser() {
const authStore = useAuthStore();
return authStore.getLoginUser;
},
},
methods: {
handleStartClick() {
const now = new Date();
const date = now.toLocaleDateString(); // 예: 2025. 5. 14.
const time = now.toLocaleTimeString(); // 예: 오전 9:30:01
this.listData.push({
type: '출근',
content: `${date} ${time}`,
});
},
handleEndClick() {
const now = new Date();
const date = now.toLocaleDateString(); // 예: 2025. 5. 14.
const time = now.toLocaleTimeString(); // 예: 오전 9:30:01
this.listData.push({
type: '퇴근',
content: `${date} ${time}`,
});
},
calculateDayCount() {
const start = new Date(`${this.startDate}T${this.startTime}:00`);
const end = new Date(`${this.endDate}T${this.endTime}:00`);
let totalHours = (end - start) / (1000 * 60 * 60); // 밀리초를 시간 단위로 변환
if (this.startDate !== this.endDate) {
// 시작일과 종료일이 다른경우
const startDateObj = new Date(this.startDate);
const endDateObj = new Date(this.endDate);
const daysDifference = (endDateObj - startDateObj) / (1000 * 60 * 60 * 24); // 두 날짜 사이의 차이를 일수로 계산
if (this.startTime !== "09:00" || this.endTime !== "18:00") {
this.dayCount = daysDifference + 0.5; // 시간 조건이 기준에서 벗어날 경우
} else {
this.dayCount = Math.ceil(daysDifference + 1); // 시간 조건이 기준에 맞을 경우
}
} else {
// 시작일과 종료일이 같은 경우
if (this.startTime !== "09:00" || this.endTime !== "18:00") {
this.dayCount = 0.5; // 시작 시간 또는 종료 시간이 기준과 다를 경우 0.5
} else {
this.dayCount = 1; // 기준 시간(09:00~18:00)이 맞으면 1일로 간주
}
}
},
},
};
</script>