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="name-box flex sb simple">
<div class="img-area">
<div class="img"><img :src="photoicon" alt="">
</div>
</div>
<form class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
@submit.prevent="handleRegister" novalidate>
<div class="col-12">
<label for="yourName" class="form-label">아이디</label>
<input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
placeholder="admin">
</div>
<div class="col-12 ">
<div class="col-12 border-x">
<label for="youremail" class="form-label ">이름<p class="require"><img :src="require" alt=""></p></label>
<input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly>
</div>
<div class="col-12 border-x">
<label for="yourPassword" class="form-label">부서</label>
<input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
required readonly placeholder="주식회사 테이큰 소프트">
</div>
</div>
<div class="col-12 border-x">
<div class="col-12 border-x">
<label for="youremail" class="form-label">직급</label>
<input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly
placeholder="과장">
</div>
<div class="col-12 border-x">
<label for="yourPassword" class="form-label">직책</label>
<input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
required readonly placeholder="팀장">
</div>
</div>
</form>
</div>
<div class="sch-form-wrap ">
<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 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 span="">
<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>{{ 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>