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="pagetitle">
<h2>휴가내역</h2>
</div>
<!-- End Page Title -->
<section class="section">
<div class="row">
<!-- 해당년도 연차 수 -->
<!-- 전체 -->
<div class="col-xxl-2 col-md-3 mb-2">
<button type="button" class="btn btn-secondary ">
전체 <span class="badge bg-white text-secondary">12개</span>
</button>
<button type="button" class="btn btn-success ">
사용 <span class="badge bg-white text-success">1개</span>
</button>
<button type="button" class="btn btn-warning">
미사용 <span class="badge bg-white text-warning">1개</span>
</button>
</div>
<!-- End 전체 -->
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">휴가내역</h5>
<div class="d-flex pb-3 justify-content-between ">
<div class="datatable-search d-flex gap-1 ">
<div class="col-xxl-5 col-md-3">
<select class="form-select " v-model="selectedYear">
<option value="">전체</option>
<option v-for="year in years" :key="year" :value="year">{{ year }}</option>
</select>
</div>
<div class="col-xxl-5 col-md-3">
<select class="form-select" v-model="selectedMonth">
<option value="">월</option>
<option v-for="month in months" :key="month" :value="month">{{ month }}</option>
</select>
</div>
<button type="button" class="btn btn-outline-secondary col-xxl-5 col-xl-3"
@click="filterData">조회</button>
</div>
<div class="d-flex justify-content-end ">
<button type="button" class="btn btn-outline-secondary" @click="deletePending">
삭제
</button>
</div>
</div>
<!-- Table -->
<table id="myTable" class="table datatable table-hover">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>No</th>
<th>구분</th>
<th data-type="date" data-format="YYYY/DD/MM">시작일자</th>
<th data-type="date" data-format="YYYY/DD/MM">종료일자</th>
<th>사용일</th>
<th>사유</th>
<th>승인여부</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in HyugaFormData" :key="index">
<td>
<div class="form-check">
<label class="form-check-label" for="acceptTerms">{{ index + 1 }}</label>
<input v-model="item.acceptTerms" class="form-check-input" type="checkbox" />
</div>
</td>
<td>{{ item.category }}</td>
<td>{{ item.startDate }}</td>
<td>{{ item.endDate }}</td>
<td>{{ item.dayCount }}</td>
<td>{{ item.reason }}</td>
<td>{{ item.approvalStatus ? '승인' : '대기' }}</td>
</tr>
</tbody>
</table>
<!-- End Table -->
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { DataTable } from 'simple-datatables'
export default {
data() {
return {
// 데이터 초기화
years: [2023, 2024, 2025], // 연도 목록
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
selectedYear: '',
selectedMonth: '',
filteredData: [],
};
},
computed: {
},
methods: {
deletePending() {
// 선택된 항목만 필터링하여 삭제
const selectedItems = this.vacationData.filter(item => item.acceptTerms);
// 승인된 항목인지 확인하여 삭제할 수 없으면 경고
const nonDeletableItems = selectedItems.filter(item => item.approvalStatus === true);
// 삭제할 수 없는 항목이 있으면 경고
if (nonDeletableItems.length > 0) {
alert("승인된 건은 삭제할 수 없습니다.");
return; // 승인된 항목이 있으면 삭제를 진행하지 않음
}
// 승인된 항목이 없으면 삭제 진행
if (selectedItems.length > 0) {
this.vacationData = this.vacationData.filter(item => !item.acceptTerms);
alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
} else {
alert("선택된 항목이 없습니다.");
}
},
// 날짜 필터 적용
filterData() {
// 전체 선택 시 필터링 없이 모든 데이터를 표시
if (!this.selectedYear && !this.selectedMonth) {
this.filteredData = this.vacationData;
} else {
// 선택된 연도와 월에 맞게 필터링
this.filteredData = this.vacationData.filter(item => {
const itemYear = new Date(item.startDate).getFullYear();
const itemMonth = new Date(item.startDate).getMonth() + 1; // 월은 0부터 시작하므로 1을 더해줍니다.
return (
(!this.selectedYear || itemYear === parseInt(this.selectedYear)) &&
(!this.selectedMonth || itemMonth === parseInt(this.selectedMonth))
);
});
}
},
},
created() {
// 로컬스토리지에서 기존 데이터가 있으면 불러오기
const storedData = localStorage.getItem('HyugaFormData');
console.log(storedData);
if (storedData) {
// Parse the data and wrap it in an array
const parsedData = JSON.parse(storedData);
// Ensure the data is in an array format
this.HyugaFormData = Array.isArray(parsedData) ? parsedData : [parsedData];
}
},
mounted() {
const currentYear = new Date().getFullYear();
this.selectedYear = currentYear;
// 처음에는 현재년도 데이터를 표시
},
};
</script>
<style scoped></style>