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>