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="page">
<div class="w1400">
<div class="tech-view">
<div class="page-logo flex-start">
<img src="../../../../resources/jpg/tech-logo.png" alt="">
<h1>기술문서</h1>
</div>
<div class="tech-report">
<h2>{{ post.post_title }}</h2>
<button @click="downloadFile()">기술문서 다운받기</button>
</div>
<div class="tech-info">
<span class="tech-info-img">
<img :src=src alt="기술문서 이미지">
</span>
<div class="tech-txt-wrap">
<table class="tech-table">
<tr style="border-top: 2px solid #e5e5e5 ;">
<th style="width: 50px;">
<p> 기술문서명</p>
</th>
<td>{{ post.tech_doc_nm }}</td>
</tr>
<tr>
<th>
<p>버전</p>
</th>
<td>{{ post.tech_doc_version }}</td>
</tr>
<tr>
<th>
<p>배포날짜</p>
</th>
<td>{{ post.tech_doc_dt }}</td>
</tr>
<tr>
<th>
<p>주요내용</p>
</th>
<td>{{ post.tech_doc_main_content }}</td>
</tr>
<tr>
<th>
<p>키워드</p>
</th>
<td>{{ post.tech_doc_keyword }}</td>
</tr>
</table>
</div>
</div>
</div>
<div>
<div colspan="2" style="border-bottom: 1px solid #007aff;">
<div id="viewer" ref="viewer" class="viewer"></div>
</div>
</div>
<div class="article-list">
<ul>
<li><span class="next">다음글</span>
<span>
<span v-if="nextPost" @click="movePost(nextPost)" class="sub-content-title">
{{ nextPost.post_title }}
</span>
<span v-else class="sub-content-title">다음글이 없습니다.</span>
</span>
</li>
<li><span class="prev">이전글</span>
<span>
<span v-if="prevPost" @click="movePost(prevPost)" class="sub-content-title">
{{ prevPost.post_title }}
</span>
<span v-else class="sub-content-title">이전글이 없습니다.</span>
</span>
</li>
</ul>
</div>
<div class="tech-btn">
<button @click="goToPage4">목록</button>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import { useRoute } from 'vue-router';
import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/i18n/ko-kr';
import * as FileSaver from 'file-saver';
export default {
data() {
return {
post: {
post_id: null,
post_title: null,
post_content: null,
notice_yn: null,
notice_start_dt: null,
notice_end_dt: null,
reg_dt: null,
mdfcn_dt: null,
link_url: null,
view_cnt: null,
file_id: null,
bbs_id: '3',
rgtr_id: null,
mdfr_id: null,
ctgry_nm: null,
tech_doc_nm: null,
tech_doc_version: null,
tech_doc_main_content: null,
tech_doc_keyword: null,
tech_doc_dt: null,
},
prevPost: {
post_id: null,
post_title: null,
file_id: null,
},
nextPost: {
post_id: null,
post_title: null,
file_id: null,
},
fileList: [],
oEditors: [], // oEditors는 스마트에디터용
route: useRoute(),
thumbnailFileList: [],
attachFileList: [],
src: null,
}
},
methods: {
goToPage4() {
this.$router.push('/Technology.page'),
window.scrollTo({
top: 0,
behavior: 'smooth'
})
},
postSelectOne: function () {
const vm = this;
axios({
url: '/post/postSelectOne.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {
'post_id': vm.route.query.post_id,
'file_id': vm.route.query.file_id,
'bbs_id': vm.route.query.bbs_id
}
}).then(function (response) {
vm.prevPost = response.data.postSelectOne.prevPost;
vm.post = response.data.postSelectOne.post;
vm.nextPost = response.data.postSelectOne.nextPost;
if (response.data.selectFileList.length != 0) {
vm.fileList = response.data.selectFileList;
vm.thumbnailFileList = [];
vm.attachFileList = [];
for (let i = 0; i < vm.fileList.length; i++) {
if (vm.fileList[i].file_ty === 'thumbnail') {
vm.thumbnailFileList.push(vm.fileList[i]);
} else {
vm.attachFileList.push(vm.fileList[i]);
}
}
vm.src = 'http://localhost:8080' + vm.thumbnailFileList[0].file_path.replace('C:', '') + '/' + vm.thumbnailFileList[0].file_nm + '.' + vm.thumbnailFileList[0].file_extn_nm
}
vm.getViewer(vm.post.post_content)
}).catch(function (error) {
console.log("error - ", error)
alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
})
},
getViewer(data) {
this.viewer = new Viewer({
el: this.$refs.viewer,
initialEditType: 'wysiwyg',
previewStyle: 'vertical',
initialValue: data,
customHTMLRenderer: {
htmlBlock: {
iframe(node) {
return [
{ type: 'openTag', tagName: 'iframe', outerNewLine: true, attributes: node.attrs },
{ type: 'html', content: node.childrenHTML },
{ type: 'closeTag', tagName: 'iframe', outerNewLine: true },
];
},
}
},
});
},
downloadFile: function () {
const vm = this;
let path = vm.attachFileList[0].file_path.replace('C:', '') + '/' + vm.attachFileList[0].file_nm + '.' + vm.attachFileList[0].file_extn_nm;
console.log(path);
axios({
url: '/file/downloadFile.json',
method: 'post',
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
responseType: 'blob',
data: `file_path=${encodeURIComponent(path)}`
}).then((response) => {
const blob = new Blob([response.data]);
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
FileSaver.saveAs(blob, vm.attachFileList[0].real_file_nm);
} else {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = vm.attachFileList[0].real_file_nm;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
this.$router.go(0);
}).catch(function (error) {
console.log('error - ', error)
alert('에러발생');
});
},
movePost: function (post1) {
const vm = this;
console.log('------------이동-----------')
console.log(vm.route)
axios({
url: '/post/postSelectOne.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {
'post_id': post1.post_id,
'file_id': post1.file_id,
'bbs_id': post1.bbs_id
}
}).then(function (response) {
vm.prevPost = response.data.postSelectOne.prevPost;
vm.post = response.data.postSelectOne.post;
vm.nextPost = response.data.postSelectOne.nextPost;
vm.fileList = response.data.selectFileList;
vm.getViewer(vm.post.post_content)
}).catch(function (error) {
console.log("error - ", error)
alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
})
},
},
watch: {
},
computed: {
},
mounted() {
console.log('Technology mounted');
this.postSelectOne();
}
}
</script>