
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="container">
<div class="page-titleZone flex justify-between align-center">
<p class="main-title flex80">공지사항 관리</p>
</div>
<div class="content-wrap">
<div class="content content-box flex-column no-gutter">
<div class="row flex50">
<div class="flex100">
<div class="content-titleZone flex justify-between align-center">
<p class="box-title">공지사항 목록</p>
<div class="search-bar flex justify-end align-center">
<input
type="date"
name="start-date"
id="start-date"
class="square-date"
:class="{ 'date-placeholder': false }"
data-placeholder="날짜 선택"
v-model="search_date.value"
/>
<span class="coupler">~</span>
<input
type="date"
name="end-date"
id="end-date"
class="square-date ml5"
:class="{ 'date-placeholder': false }"
data-placeholder="날짜 선택"
v-model="search_date.value2"
/>
<select class="square-select ml5" v-model="search_data1.value">
<option :value="null">고정여부</option>
<option value="1">고정</option>
<option value="0">미고정</option>
</select>
<select class="square-select ml5" v-model="search_data2.key">
<option :value="null">전체</option>
<option value="notice_title">제목</option>
<option value="notice_content">내용</option>
</select>
<div class="search-square">
<input
type="text"
class="square-input"
placeholder="Search"
v-model="search_data2.value"
v-on:keyup.enter="fnSelectList()"
/>
<button
class="square-button blue-btn"
@click="fnSelectList()"
>
<svg-icon
type="mdi"
:path="this.$getIconPath()"
class="square-icon"
></svg-icon>
</button>
</div>
</div>
</div>
<div class="table-zone">
<table class="list-table">
<colgroup>
<col style="width: 5%" />
<col style="width: 35%" />
<col style="width: 15%" />
<col style="width: 15%" />
<col style="width: 15%" />
<col style="width: 15%" />
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>상단고정여부</th>
<th>등록자</th>
<th>등록일시</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<template v-if="list.length > 0">
<tr
v-for="(item, idx) in list"
:key="item"
@click="fnDetail(item.noticeId)"
>
<td>
{{
search.totalRows -
idx -
(search.currentPage - 1) * search.perPage
}}
</td>
<td>{{ item.noticeTitle }}</td>
<td>{{ item.noticeIsFix == 1 ? "고정" : "미고정" }}</td>
<td>{{ item.noticeInsertUserId }}</td>
<td>{{ $getFullTime(item.noticeInsertDateTime) }}</td>
<td>{{ item.noticeHits }}</td>
</tr>
</template>
<tr v-else>
<td colspan="6">등록된 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
</div>
<PaginationButton
v-model:currentPage="search.currentPage"
:perPage="search.perPage"
:totalCount="search.totalRows"
:maxRange="5"
:click="fnSelectList"
/>
<div class="flex justify-end">
<button class="blue-btn small-btn" @click="fnInsert">
공지사항 등록
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from '../../common/defaultAxios.js';
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import PaginationButton from "../../component/PaginationButton.vue";
export default {
name: "NoticeList",
components: { SvgIcon, PaginationButton },
data() {
return {
searchPath: mdiMagnify,
list: [],
search: this.$getDefaultSerchVO(),
search_date: this.$getDefaultSerchItem("notice_insert_datetime", "dates"),
search_data1: this.$getDefaultSerchItem("notice_is_fix", "string"),
search_data2: this.$getDefaultSerchItem(null, "string"),
};
},
mounted() {
this.fnSelectList();
},
methods: {
// 목록 조회
fnSelectList() {
const vm = this;
// 데이터 세팅
vm.search.searchObjectList = []; // 초기화
vm.search.searchObjectList.push(vm.search_date);
vm.search.searchObjectList.push(vm.search_data1);
vm.search.searchObjectList.push(vm.search_data2);
// 실행
axios({
url: "/notice/list",
method: "post",
data: vm.search,
})
.then((response) => {
vm.list = response.data.resultData.list;
vm.search = response.data.resultData.searchVO;
})
.catch((error) => {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
// 상세 조회
fnDetail(noticeId) {
this.$router.push({
path: "/noticeView.page",
query: { noticeId: noticeId },
});
},
// 등록
fnInsert() {
this.$router.push({
path: "/noticeInsert.page",
});
},
},
};
</script>