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="pagetitle">
<h2>출장내역</h2>
</div>
<!-- End Page Title -->
<section class="section">
<div class="row">
<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 sm 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 sm btn-outline-primary" @click="registerLeave">
등록
</button>
<button type="button" class="btn sm btn-outline-success" @click="saveChanges">
저장
</button>
<button type="button" class="btn sm btn-outline-secondary" @click="deletePending">
삭제
</button>
</div>
</div>
<!-- Table -->
<table id="myTable" class="table datatable table-hover">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>No </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 ChuljangFormData" :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.startDate }}</td>
<td>{{ item.endDate }}</td>
<td>{{ item.where }}</td>
<td>{{ item.purpose }}</td>
<td >{{ item.selectedMember }}
</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: {
registerLeave() {
console.log("등록 버튼 클릭됨");
// Vue의 반응성 문제를 피하기 위해, 새로운 객체를 추가합니다.
this.ChuljangData = [
...this.ChuljangData,
{ startDate: '', endDate: '', where: '', acceptTerms: false }
];
console.log(this.ChuljangData); // 배열 상태 출력
},
saveChanges() {
console.log("저장된 데이터:", this.ChuljangData);
alert("저장되었습니다.");
},
deletePending() {
// 선택된 항목만 필터링하여 삭제
const selectedItems = this.ChuljangData.filter(item => item.acceptTerms);
// 승인된 항목이 없으면 삭제 진행
if (selectedItems.length > 0) {
this.ChuljangData = this.ChuljangData.filter(item => !item.acceptTerms);
alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
} else {
alert("선택된 항목이 없습니다.");
}
},
// 날짜 필터 적용
filterData() {
this.filteredData = this.ChuljangData.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))
);
});
},
// 페이지 변경
changePage(page) {
this.currentPage = page;
},
},
created() {
// 로컬스토리지에서 기존 데이터가 있으면 불러오기
const storedData = localStorage.getItem('ChuljangFormData');
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.ChuljangFormData = Array.isArray(parsedData) ? parsedData : [parsedData];
}
},
mounted() {
// 처음에는 모든 데이터를 표시
this.filteredData = this.ChuljangData;
},
};
</script>
<style scoped></style>