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="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>