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('attendance')">
<summary>
<p>근태현황</p>
<div class="icon"><img :src="topmenuicon" alt=""></div>
</summary>
<ul>
<li>
<router-link :to="{ name: 'myAttendance' }" 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: 'buseoAttendance' }" 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('hyuga')">
<summary>
<p>휴가</p>
<div class="icon"><img :src="topmenuicon" alt=""></div>
</summary>
<ul>
<li>
<router-link :to="{ name: 'hyugaStatue' }" 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: 'hyugaInsert' }" 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('chuljang')">
<summary>
<p>출장</p>
<div class="icon"><img :src="topmenuicon" alt=""></div>
</summary>
<ul>
<li>
<router-link :to="{ name: 'ChuljangStatue' }" 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: 'ChuljangInsert' }" 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>