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-end ">
<div class="d-flex justify-content-end ">
<button @click="onClickSubmit">api 요청하기</button>
<button type="button" class="btn btn-outline-primary" @click="registerLeave">
등록
</button>
<button type="button" class="btn btn-outline-success" @click="saveChanges">
저장
</button>
<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>인원</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in DeptData">
<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><input type="text" v-model="item.deptNM" /></td>
<td><input type="text" v-model="item.member" /></td>
</tr>
</tbody>
</table>
<!-- End Table -->
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { ref } from 'vue';
export default {
data() {
return {
// 데이터 초기화
years: [2023, 2024, 2025], // 연도 목록
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
selectedYear: '',
selectedMonth: '',
DeptData: [
{ member: '', deptNM: '', acceptTerms: false },
// 더 많은 데이터 추가...
],
filteredData: [],
};
},
computed: {
},
methods: {
async onClickSubmit() {
// `useMutation` 훅을 사용하여 mutation 함수 가져오기
const { mutate, onDone, onError } = useMutation(mygql);
try {
const result = await mutate();
console.log(result);
} catch (error) {
console.error('Mutation error:', error);
}
},
registerLeave() {
console.log("등록 버튼 클릭됨");
// Vue의 반응성 문제를 피하기 위해, 새로운 객체를 추가합니다.
this.DeptData = [
...this.DeptData,
{ member: '', deptNM: '', acceptTerms: false }
];
console.log(this.DeptData); // 배열 상태 출력
},
saveChanges() {
// 로컬스토리지에 DeptData 저장
localStorage.setItem('DeptData', JSON.stringify(this.DeptData));
console.log('데이터가 로컬스토리지에 저장되었습니다.');
},
deletePending() {
// 선택된 항목만 필터링하여 삭제
const selectedItems = this.DeptData.filter(item => item.acceptTerms);
// 승인된 항목이 없으면 삭제 진행
if (selectedItems.length > 0) {
this.DeptData = this.DeptData.filter(item => !item.acceptTerms);
alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
} else {
alert("선택된 항목이 없습니다.");
}
},
// 날짜 필터 적용
filterData() {
this.filteredData = this.DeptData.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('DeptData');
console.log(storedData);
if (storedData) {
this.DeptData = JSON.parse(storedData);
}
},
mounted() {
// 처음에는 모든 데이터를 표시
this.filteredData = this.DeptData;
},
};
</script>
<style scoped></style>