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
File name
Commit message
Commit date
<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');
console.log(storedData);
if (storedData) {
this.DeptData = JSON.parse(storedData);
}
},
mounted() {
// 처음에는 모든 데이터를 표시
this.filteredData = this.DeptData;
},
};
</script>
<style scoped></style>