<template> <div class="sidemenu"> <div class="myinfo simple"> <div class="name-box"> <div class="img-area"> <div><img :src="photoicon" alt=""> <p class="name">OOO과장</p> </div> <div class="info"> <p>솔루션 개발팀</p> <i class="fa-bars"></i> <p>팀장</p> </div> </div> </div> <details class="menu-box" :open="$route.name.toLowerCase().includes('vhcle')"> <summary> <p>법인차량</p> <div class="icon"><img :src="topmenuicon" alt=""></div> </summary> <ul> <li> <router-link :to="{ name: 'VhcleList' }" exact-active-class="active-link" v-slot="{ isExactActive }"> <p>사용현황</p> <div class="icon" v-if="isExactActive"> <img :src="menuicon" alt=""> </div> </router-link></li> <li> <router-link :to="{ name: 'VhcleInfoManagement' }" exact-active-class="active-link" v-slot="{ isExactActive }"> <p>차량정보 관리</p> <div class="icon" v-if="isExactActive"> <img :src="menuicon" alt=""> </div> </router-link> </li> </ul> </details> <details class="menu-box" :open="$route.name.toLowerCase().includes('card')"> <summary> <p>법인카드</p> <div class="icon"><img :src="topmenuicon" alt=""></div> </summary> <ul> <li> <router-link :to="{ name: 'CardList' }" exact-active-class="active-link" v-slot="{ isExactActive }"> <p>사용현황</p> <div class="icon" v-if="isExactActive"> <img :src="menuicon" alt=""> </div> </router-link></li> <li> <router-link :to="{ name: 'CardInfoManagement' }" exact-active-class="active-link" v-slot="{ isExactActive }"> <p>카드정보 관리</p> <div class="icon" v-if="isExactActive"> <img :src="menuicon" alt=""> </div> </router-link></li> </ul> </details> </div> </div> <!-- End Page Title --> <div class="content"> <router-view></router-view> </div> </template> <script> import { ref } from 'vue'; export default { data() { return { photoicon: "/client/resources/img/photo_icon.png", menuicon: "/client/resources/img/menuicon.png", topmenuicon: "/client/resources/img/topmenuicon.png", // 데이터 초기화 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'); if (storedData) { this.DeptData = JSON.parse(storedData); } }, mounted() { // 처음에는 모든 데이터를 표시 this.filteredData = this.DeptData; }, }; </script> <style scoped></style>