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="">
<select class="form-select " v-model="selectedDept">
<option value="" >이름</option>
<option v-for="dept in depts" :key="dept" :value="dept">{{ dept }}</option>
</select>
</div>
<div class="search-bar d-flex gap-2">
<form class="search-form d-flex align-items-center" method="POST" action="#"
@submit.prevent="updateMember">
<input type="text" v-model="searchQuery" name="query" placeholder="Search" title="Enter search keyword">
<button type="submit" title="Search"><i class="bi bi-search"></i></button>
</form>
</div>
<button type="button" class="btn btn-outline-secondary"
@click="filterData">조회</button>
</div>
<div class="d-flex justify-content-end ">
<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">
<colgroup>
<col width="10%">
<col width="75%">
<col width="5%">
<col width="5%">
<col width="5%">
</colgroup>
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>No </th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in filteredData" :key="item.startDate + 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><input type="text" v-model="item.theme" /></td>
<td><input type="text" v-model="item.name" /></td>
<td><input type="text" v-model="item.date" /></td>
<td><input type="text" v-model="item.views" /></td>
</tr>
</tbody>
</table>
<!-- End Table -->
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
// 데이터 초기화
depts: [2023, 2024, 2025], // 연도 목록
levels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
selectedDept: '',
selectedlevel: '',
filteredData: [],
};
},
computed: {
},
methods: {
registerLeave() {
// "NoticeInsert" 페이지로 이동
this.$router.push({ path: '/NoticeInsert' });
},
deletePending() {
// 선택된 항목만 필터링하여 삭제
const selectedItems = this.NoticegData.filter(item => item.acceptTerms);
// 승인된 항목이 없으면 삭제 진행
if (selectedItems.length > 0) {
this.NoticegData = this.NoticegData.filter(item => !item.acceptTerms);
alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
} else {
alert("선택된 항목이 없습니다.");
}
},
filterData() {
this.filteredData = this.NoticegData.filter(item => {
const matchesDept = this.selectedDept ? item.where.includes(this.selectedDept) : true;
const matchesQuery = this.searchQuery ? item.theme.includes(this.searchQuery) : true;
return matchesDept && matchesQuery;
});
},
// 페이지 변경
changePage(page) {
this.currentPage = page;
},
loadFormData() {
const savedData = localStorage.getItem('formData');
console.log(savedData)
if (savedData) {
const formData = JSON.parse(savedData);
this.NoticeData = formData.map(item => ({
...item,
acceptTerms: false, // 추가적인 필드 (체크박스)
}));
this.filteredData = [...this.NoticeData]; // 필터링된 데이터 초기화
}
},
},
created() {
// 로컬스토리지에서 UserInfoData 불러오기
const storedUserInfo = localStorage.getItem('formData');
console.log(storedUserInfo);
if (storedUserInfo) {
// 로컬스토리지에서 데이터를 가져와 UserInfoData에 설정
const parsedData = JSON.parse(storedUserInfo);
this.UserInfo = Array.isArray(parsedData) ? parsedData : [parsedData];
}
},
mounted() {
// 처음에는 모든 데이터를 표시
this.filteredData = this.NoticegData;
},
};
</script>
<style scoped></style>