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="data-page page">
<div class="w1400">
<div class="data">
<div class="page-logo flex-start">
<img src="../../../../resources/jpg/data-img-text.png" alt="">
<h1>자료집</h1>
</div>
<!-- 자료집 카테고리 -->
<div class="data-b-main">
<div class="data-b">
<div class="data-banner">
<!-- 윗쪽 아이콘 -->
<button v-for="(button, index) in buttons" :key="index" :class="button.class" :style="{
'--button-bg-color': button.clicked ? button.color : button.defaultColor,
backgroundColor: button.clicked ? button.color : button.defaultColor
}" @click="clickButton(index)">
<h2><span>AI 디지털교과서</span>{{ button.name }}</h2>
<p>{{ button.content }}</p>
<p>{{ button.content2 }}</p>
</button>
</div>
</div>
</div>
</div>
<!-- 자료집 테이블 -->
<div class="data-table">
<div class="data-b">
<div class="btn-wrap data-btn-wrap">
<div class="data-bos">
<div id="data-app">
<p class="category">자료집> <span>{{ categoryName }}</span></p>
</div>
<div class="data-wrap-search">
<select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild"
class="data-table-search">
<option :value=null selected>전체</option>
<option value="title">제목</option>
<option value="content">내용</option>
<option value="writer">작성자</option>
</select>
<div class="input-group">
<input type="text" class="input" placeholder="검색어를 입력해주세요."
v-model="postListSearch.searchText" @keyup.enter="postSelectList()">
<input class="button--submit data-button-sum" value="검색" type="submit"
@click="postSelectList()">
</div>
</div>
<div class="sort-wrap" style="grid-column: 1 / span 2;">
<ul class="flex-end">
<li>최신순</li>
<li>조회수순</li>
</ul>
</div>
</div>
</div>
<div class="data-table-tr">
<table class="list-table">
<th style="width:5%">no</th>
<th style="width:15%">카테고리</th>
<th style="width:45%">제목</th>
<th style="width:10%">작성자</th>
<th style="width:15%">작성일자</th>
<th style="width:20%">조회수</th>
<tr v-for="(item, idx) in postList" :key="idx" @click="postSelectOnePage(item)">
<td :class="{ 'first-row': idx === 0 }">{{ postIdx - idx }}</td>
<td :class="{ 'first-row': idx === 0 }" v-if="item.ctgry_nm === 'policy'"><span
class="category-zone">정책자료</span></td>
<td :class="{ 'first-row': idx === 0 }" v-else-if="item.ctgry_nm === 'research'"><span
class="category-zone">연구자료</span></td>
<td :class="{ 'first-row': idx === 0 }" v-else><span class="category-zone">가이드라인</span></td>
<td :class="{ 'first-row': idx === 0 }">
<p class="board-title pen-nib-icon"> <i class="fas fa-thumbtack" v-if="idx === 0"></i>{{
item.post_title }}</p>
</td>
<td :class="{ 'first-row': idx === 0 }">{{ item.rgtr_id }}</td>
<td :class="{ 'first-row': idx === 0 }">{{ yyyymmdd(item.reg_dt) }}</td>
<td :class="{ 'first-row': idx === 0 }">{{ item.view_cnt }}</td>
</tr>
<tr v-if="postListCount == 0">
<td style="font-size: 12px;" colspan="5">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</table>
</div>
</div>
</div>
<div class="bottom-wrap">
<PaginationButton v-model:currentPage="postListSearch.currentPage" :perpage="postListSearch.perPage"
:total-count="postListCount" :max-range="5" :click="postSelectList" />
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from '../../../component/pagination/PaginationButton.vue';
import { useRoute } from 'vue-router';
export default {
data() {
return {
postListSearch: {
currentPage: 1,
perPage: 10,
searchType: null,
searchText: null,
ctgry_nm: null,
bbs_id: '0'
},
postList: [],
postListCount: 0,
postIdx: 0,
categoryName: '전체',
route: useRoute(),
// 자료실 버튼
buttons: Array(3).fill(),
activeButton: null,
buttons: [
{
name: '정책자료', content: '· 개발 지원 정책 문서', class: 'data-bos-btn1',
content2: '· 법·제도 문서 등 ', defaultColor: '#a5abb4',
color: '#dfecfc', clicked: false, value: 'policy'
},
{
name: '연구자료', content: '서비스 모델, 프로토타입 연구·보고서 등', class: 'data-bos-btn2',
defaultColor: '#87b099', color: '#e6fff1', clicked: false, value: 'research'
},
{ name: '가이드라인', content: '', class: 'data-bos-btn3', defaultColor: '#c1a984', color: '#f8e7cd', clicked: false, value: 'guide' },
],
}
},
methods: {
clickButton(index) {
this.buttons.forEach((button, idx) => {
if (idx === index) {
button.clicked = true;
this.postListSearch.ctgry_nm = button.value;
this.postSelectList();
} else {
button.clicked = false;
}
});
switch (index) {
case 0:
this.categoryName = '정책자료';
break;
case 1:
this.categoryName = '연구자료';
break;
default:
this.categoryName = '가이드라인';
break;
}
this.scrollToBottom();
},
scrollToBottom() {
window.scrollTo({
top: document.documentElement.scrollHeight,
behavior: 'smooth'
});
},
postSelectList: function () {
const vm = this;
console.log("0000", vm.postListSearch.ctgry_nm);
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.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) {
if (response.data > 0) {
vm.$router.push({ path: '/DataDtali.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
} else {
alert("자료집 상세보기 오류")
}
}).catch(function (error) {
alert("자료집 상세보기 오류, 관리자에게 문의바랍니다.");
})
},
},
watch: {
},
computed: {
},
components: {
PaginationButton: PaginationButton,
},
created() {
if (this.route.query.type != undefined) {
this.buttons[2].clicked = true;
this.categoryName = '가이드라인'
this.postListSearch.ctgry_nm = 'guide'
}
},
mounted() {
console.log('Data mounted');
this.postSelectList();
}
}
</script>