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-page page">
<div class="w1400">
<div class="tech">
<div class="page-logo flex-start">
<img src="../../../../resources/jpg/tech-logo.png" alt="">
<h1>기술문서</h1>
</div>
<div class="tech-search-box">
<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 disabled>선택</option>
<option v-for="(item, idx) in option" :key="idx" :value=item.value>
{{ item.name }}
</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">
<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>
<ul class="tech-bos">
<li class="tech-box-sec" v-for="(item, idx) in postList" :key="idx">
<div class="tech-box-sec-h3">
<h3>{{ item.post_title }}</h3>
</div>
<div v-if="item.ctgry_nm === 'api'">
<img src="../../../../resources/jpg/api.png" alt="">
</div>
<div v-if="item.ctgry_nm === 'standard'">
<img src="../../../../resources/jpg/techdocument.png" alt="">
</div>
<div v-if="item.ctgry_nm === 'tech'">
<img src="../../../../resources/jpg/tech.png" alt="">
</div>
<div v-if="item.ctgry_nm === 'service'">
<img src="../../../../resources/jpg/service.png" alt="">
</div>
<div>
<p class="keyword-zone" v-if="item.tech_doc_keyword">
<span v-for="(keyword, keywordIndex) in item.tech_doc_keyword.split(',')"
:key="keywordIndex">
{{ keyword }}
</span>
</p>
<div class="flex">
<p class="date">{{ item.tech_doc_dt }}</p>
<p>조회수 <span>{{ item.view_cnt }}</span></p>
</div>
</div>
<div>
<!-- <button class="blue-btn" @click="postSelectOnePage(item)">바로가기</button> -->
<button class="blue-btn" @click="item.ctgry_nm === 'service' ? serviceEvent(item) : postSelectOnePage(item)">바로가기</button>
</div>
</li>
<li class="tech-box-sec" v-for="(space, index) in emptySpaces" :key="index">
<div class="tech-box-fillter">
<div class="tech-box-sec-h3">
<div class="flex">
<h3> </h3>
<p> </p>
</div>
</div>
<div class="tech-box-sec-img">
<!-- 이미지자리 -->
</div>
<div>
<p class="content-detail"> </p>
<p class="date"> </p>
</div>
<div>
<button class="blue-btn" @click="showAlert">바로가기</button>
<!-- <button class="blue-btn" @click="goToPage3">바로가기</button> -->
</div>
</div>
<!-- <div class="overlay-text">준비 중 입니다.</div> -->
</li>
</ul>
<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: 9,
searchType: null,
searchText: null,
bbs_id: '3',
sort: 'doc_dt'
},
page_nm: '기술문서',
postList: [],
postListCount: 0,
postIdx: 0,
// 최신순 조회순
sorts: [{ name: '최신순', value: 'doc_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();
},
postSelectOnePage(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: '/TechnologyOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id, 'tech_doc_dt': item.tech_doc_dt } });
}).catch(function (error) {
alert("기술문서 상세보기 오류, 관리자에게 문의바랍니다.");
})
},
postSelectList: function () {
const vm = this;
axios({
// url: '/post/newsSelectList.json',
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);
},
showAlert: function () {
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 }
})
},
serviceEvent(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) {
window.location.href = item.link_url;
}).catch(function (error) {
alert("기술문서 상세보기 오류, 관리자에게 문의바랍니다.");
})
},
},
watch: {
},
computed: {
emptySpaces() {
return new Array(9 - this.postList.length).fill(0);
}
},
components: {
PaginationButton: PaginationButton,
},
mounted() {
console.log('Technology mounted');
this.pageLogInsert();
this.postSelectList();
}
}
</script>