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-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">
<table class="insert-table">
<tbody>
<tr>
<td class="title-zone" colspan="2">
<p class="flex detail-title">
<span class="post-title">{{ post.post_title }}</span>
<span v-if="post.ctgry_nm === 'api'" class="category-zone">API</span>
<span v-else-if="post.ctgry_nm === 'tech'" class="category-zone">기술리포트</span>
<span v-else class="category-zone">기술규격문서</span>
</p>
<p class="import-box">
<span class="import">주요내용</span>
<span>{{ post.view_import }}</span>
<span class="keword">키워드</span>
<span>{{ post.view_keword }}</span>
</p>
<p class="flex-end write-info">
<span class="ver">버전</span>
<span>{{ post.view_ver }}</span>
<span class="writer">작성자</span>
<span>{{ post.rgtr_id }}</span>
<span class="view">조회수</span>
<span>{{ post.view_cnt }}</span>
</p>
</td>
</tr>
<tr>
<td colspan="2">
<div class="tech-info">
<span class="tech-info-img">
<img src="../../../../resources/jpg/tech-img.png" alt="기술문서 이미지">
</span>
<div class="tech-txt-wrap">
<ul>
<li style="border-top: 1px solid #e5e5e5 ;">
<strong>연구책임자</strong>
<p>정종원</p>
</li>
<li>
<strong>연구진</strong>
<p> 안성훈, 최준석, 이정태, 나화정, 민예슬</p>
</li>
<li>
<strong>키워드</strong>
<p>온라인콘텐츠;선도학교;교원역량</p>
</li>
<li>
<strong>담당부서</strong>
<p>디지털교과서부</p>
</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<th style="width: 10%;">썸네일</th>
<td>
<div v-if="thumbnailFileList.length == 0">
<label>첨부된 파일이 없습니다.</label>
</div>
<ul v-else v-for="(item, idx) in thumbnailFileList" :key="idx">
<li @click="downloadFile(item)">{{ item.real_file_nm }}</li>
</ul>
</td>
</tr>
<tr class="file-zone">
<th style="width: 10%;">첨부파일명</th>
<td>
<div v-if="attachFileList.length == 0">
<label>첨부된 파일이 없습니다.</label>
</div>
<ul v-else v-for="(item, idx) in attachFileList" :key="idx">
<li @click="downloadFile(item)">{{ item.real_file_nm }}</li>
</ul>
</td>
</tr>
</tbody>
</table>
<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="btn-wrap">
<button class="red-btn" @click="postDelete()">삭제</button>
<button class="dark-gray-btn" @click="postSelectListPage()">목록</button>
<button class="blue-btn" @click="postUpdatePage()">수정</button>
</div>
</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: null,
rgtr_id: null,
mdfr_id: null,
ctgry_nm: 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: [],
};
},
methods: {
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.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 (item) {
const vm = this;
let path = item.file_path + '/' + item.file_nm + '.' + item.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, item.real_file_nm);
} else {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = item.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('에러발생');
});
},
postDelete: function () {
const vm = this;
axios({
url: "/post/postDelete.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.post
}).then(function (response) {
console.log("postDelete - response : ", response.data);
let result = response.data;
if (result > 0) {
alert("삭제가 완료 되었습니다.");
vm.postSelectListPage();
} else {
alert("삭제실패, 다시 시도 해주세요.");
}
}).catch(function (error) {
console.log("postDelete - 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("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
})
},
postSelectListPage: function () {
this.$router.push({ path: '/adm/techSelectList.page' });
},
postUpdatePage: function () {
this.$router.push({ path: '/adm/techUpdate.page', query: { 'post_id': this.post.post_id, 'file_id': this.post.file_id } });
},
},
watch: {},
computed: {},
components: {},
mounted() {
this.postSelectOne();
}
};
</script>