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="tech-wrap">
<div class="content-box">
<div class="title-wrap">
<div class="flex-start">
<img src="../../../../resources/jpg/tech-logo.png" alt="기술문서 아이콘" class="title-icon">
<h2 class="main-title">기술문서</h2>
</div>
</div>
<div class="content-wrap">
<div class="top-bar">
<div class="flex">
<div class="category-bar flex-start">
<div>
<input type="radio" name="category" id="all" :value=null style="display:none" checked
@click="ctgry($event)">
<label for="all" class="category">전체</label>
</div>
<div>
<input type="radio" name="category" id="policy" value="api" style="display:none"
@click="ctgry($event)">
<label for="policy" class="category">API</label>
</div>
<div>
<input type="radio" name="category" id="research" value="tech" style="display:none"
@click="ctgry($event)">
<label for="research" class="category">기술리포트</label>
</div>
<div>
<input type="radio" name="category" id="guide" value="standard" style="display:none"
@click="ctgry($event)">
<label for="guide" class="category">기술규격문서</label>
</div>
</div>
<div class="data-select">
<select v-model="postListSearch.searchType" name="data-table-sild" id="data-table-sild">
<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" value="검색" type="submit" @click="postSelectList()">
</div>
</div>
</div>
</div>
<div class="sort-wrap">
<ul class="flex-end">
<li>최신순</li>
<li>등록순</li>
<li>조회수순</li>
</ul>
</div>
<table class="select-table">
<thead>
<tr>
<th style="width:5%">no</th>
<th style="width:10%">카테고리</th>
<th style="width:55%">제목</th>
<th style="width:10%">작성자</th>
<th style="width:10%">작성일자</th>
<th style="width:10%">조회수</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in postList" :key="idx" @click="postSelectOnePage(item)">
<td>{{ postIdx - idx }}</td>
<td v-if="item.ctgry_nm === 'api'"><span class="category-zone">API</span></td>
<td v-else-if="item.ctgry_nm === 'tech'"><span class="category-zone">기술리포트</span></td>
<td v-else><span class="category-zone">기술규격문서</span></td>
<td>{{ item.post_title }}</td>
<td>{{ item.rgtr_id }}</td>
<td>{{ yyyymmdd(item.reg_dt) }}</td>
<td>{{ item.view_cnt }}</td>
</tr>
<tr v-if="postListCount == 0">
<td style="font-size: 20px;" colspan="6">검색조건에 해당하는 데이터가 없습니다.</td>
</tr>
</tbody>
</table>
<div class="btn-wrap">
<button class="blue-btn" @click="postInsertPage()">글쓰기</button>
</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>
</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: null,
searchText: null,
bbs_id: '3',
ctgry_nm: null
},
postList: [],
postListCount: 0,
postIdx: 0
};
},
methods: {
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.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) {
this.$router.push({ path: '/adm/techSelectOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
},
postInsertPage: function () {
this.$router.push({ path: '/adm/techInsert.page', query: {} })
},
ctgry: function (e) {
this.postListSearch.ctgry_nm = e.target.value;
if (this.postListSearch.ctgry_nm === 'on') {
this.postListSearch.ctgry_nm = null
}
this.postSelectList();
}
},
watch: {},
computed: {},
components: {
PaginationButton: PaginationButton,
},
mounted() {
this.postSelectList();
}
};
</script>