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="d-flex">
<div class="img-area">
<div class="img"><img :src="photoicon" alt="">
</div>
</div>
<div class="tbl-wrap" style="width: calc(100% - 310px);">
<table class="tbl data radius-table">
<tbody>
<tr>
<th>아이디</th>
<td colspan="3">
<input v-model="name" type="text" name="name" class="form-control sm" id="yourName" required readonly placeholder="admin" />
</td>
</tr>
<tr>
<th >이름</th>
<td>
<input v-model="email" type="text" name="username" class="form-control sm" id="youremail" required readonly />
</td>
<th>부서</th>
<td>
<input v-model="password" type="password" name="password" class="form-control sm" id="yourPassword" required readonly placeholder="주식회사 테이큰 소프트" />
</td>
</tr>
<tr>
<th>직급</th>
<td>
<input v-model="email" type="text" name="username" class="form-control sm" id="youremail2" required readonly placeholder="과장" />
</td>
<th>직책</th>
<td>
<input v-model="password" type="password" name="password" class="form-control sm" id="yourPassword2" required readonly placeholder="팀장" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sch-form-wrap">
<div class="input-group d-flex justify-end">
<select name="" id="" class="form-select sm">
<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 sm">
<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 sm">
<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 class="tbl-wrap">
<table class="tbl data">
<tbody>
<tr>
<th rowspan="2">근태 현황</th>
<th>지각</th>
<th>조기퇴근</th>
<th>결근</th>
<th>출장</th>
<th>주말출근</th>
</tr>
<tr>
<td>{{ late }}</td>
<td>{{ earlyLeave }}</td>
<td>{{ absence }}</td>
<td>{{ businessTrip }}</td>
<td>{{ weekendWork }}</td>
</tr>
</tbody>
</table>
</div>
<div class="tbl-wrap">
<table class="tbl data">
<tbody>
<tr>
<th rowspan="2">휴가 현황</th>
<th>연차</th>
<th>대체휴가</th>
<th>공가</th>
<th>병가</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th>연차 </th>
<th>내용</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index">
<td>{{ item.type }}</td>
<td>{{ 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),
photoicon: "/client/resources/img/img1.png",
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: [
{
type: '연차',
content: '결재',
}, {
type: '반차',
content: '전결',
}],
};
},
components: {
SearchOutlined
},
computed: {
},
methods: {
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>