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="notice-page page">
<div class="w1400">
<div class="noti-bos">
<div class="page-logo flex-start">
<img src="../../../../resources/jpg/notic-logo-img.png" alt="공지사항">
<h1>공지사항</h1>
</div>
<div class="btn-wrap data-btn-wrap">
<select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild"
class="data-table-search">
<option v-for="(item, idx) in option" :key="idx" :value=item.value>
{{ item.name }}
</option>
</select>
<div class="notice-search">
<input type="text" class="input" placeholder="검색어를 입력해주세요." v-model="postListSearch.searchText"
@keyup.enter="postSelectList()">
<input class="button--submit" value="검색" type="submit" @click="postSelectList()">
</div>
</div>
<!-- 최신순 조회순 -->
<div class="sort-wrap" style="grid-column: 1 / span 2;">
<ul class="flex-end">
<li v-for="(item, index) in sorts" :key="index" :class="{ active: activeIndex === index }"
@click="changeColor(index)">
{{ item.name }}
</li>
</ul>
</div>
<div class="noti-sec">
<div class="noti-sec-table">
<table class="list-table user-table-list">
<th style="width:5%">no</th>
<th style="width:55%">제목</th>
<th style="width:10%">작성자</th>
<th style="width:10%">작성일자</th>
<th style="width:10%">조회수</th>
<tr v-for="(notice, nIdx) in postNoticeList" :key="nIdx" @click="postSelectOnePage(notice)">
<td class="board-title pen-nib-icon notice-box" :class="{ 'first-row': notice.notice_yn === 'Y' }" style="text-align: center; padding-left: 2.5rem;">
<i class="fas fa-thumbtack" v-if="notice.notice_yn === 'Y'"></i>
</td>
<td :class="{ 'first-row': notice.notice_yn === 'Y' }">
<p class="board-title">
{{ notice.post_title }}
</p>
</td>
<td :class="{ 'first-row': notice.notice_yn === 'Y' }">{{ notice.rgtr_id }}</td>
<td :class="{ 'first-row': notice.notice_yn === 'Y' }">{{ yyyymmdd(notice.reg_dt) }}</td>
<td :class="{ 'first-row': notice.notice_yn === 'Y' }">{{ notice.view_cnt }}</td>
</tr>
<tr v-for="(post, pIdx) in postList" :key="pIdx" @click="postSelectOnePage(post)">
<td>{{ postIdx - pIdx }}</td>
<td>
<p class="board-title">
{{ post.post_title }}
</p>
</td>
<td>{{ post.rgtr_id }}</td>
<td>{{ yyyymmdd(post.reg_dt) }}</td>
<td>{{ post.view_cnt }}</td>
</tr>
<tr v-if="postListCount == 0 && postNoticeList.length == 0">
<td colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</table>
</div>
</div>
<div class="bottom-wrap">
<PaginationButton v-model:currentPage="postListSearch.currentPage" :perPage="postListSearch.perPage"
:totalCount="postListCount" :maxRange="5" :click="postSelectList" />
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
export default {
data() {
return {
postListSearch: {
currentPage: 1,
perPage: 10,
searchType: 'all',
searchText: null,
bbs_id: '2',
sort: 'dt'
},
page_nm: '공지사항',
postList: [],
postNoticeList: [],
postListCount: 0,
postIdx: 0,
// 최신순 조회순
sorts: [{ name: '최신순', value: 'dt' },
{ name: '조회수순', value: 'view' }],
activeIndex: 0,
option: [
{ name: '전체', value: 'all' },
{ name: '제목', value: 'title' },
{ name: '내용', value: 'content' },
{ name: '작성자', value: 'writer' },
]
}
},
methods: {
// 최신순 조회순
changeColor(index) {
this.activeIndex = index;
this.postListSearch.sort = this.sorts[index].value;
this.postSelectList();
},
postSelectList: function () {
const vm = this;
axios({
url: '/post/postSelectList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.postListSearch
}).then(function (response) {
vm.postList = response.data.postSelectList;
vm.postListCount = response.data.postSelectListCount;
vm.postNoticeList = response.data.postNoticeSelectList;
vm.postIdx = vm.postListCount - (vm.postListSearch.currentPage - 1) * vm.postListSearch.perPage;
}).catch(function (error) {
alert('공지사항 목록 조회 오류, 관리자에게 문의하세요.');
})
},
//날짜 시,분,초 자르기
yyyymmdd: function (date) {
return COMMON_UTIL.yyyymmdd(date);
},
//게시글 상세조회 페이지로 이동
postSelectOnePage: function (item) {
const vm = this;
axios({
url: '/post/postViewCount.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'post_id': item.post_id, 'bbs_id': item.bbs_id }
}).then(function (response) {
vm.$router.push({ path: '/NoticeOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
}).catch(function (error) {
alert("공지사항 상세보기 오류, 관리자에게 문의바랍니다.");
})
},
/**페이지 접속 로그 등록 */
pageLogInsert: function() {
const vm = this;
axios({
url: '/statistics/pageLogInsert.json',
method: 'post',
headers: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { "page_nm": vm.page_nm }
})
}
},
watch: {
},
computed: {
},
components: {
PaginationButton: PaginationButton,
},
mounted() {
this.pageLogInsert();
this.postSelectList();
}
}
</script>