Commit @72c397e417ec2ddff8a93dade0b5e977c52360ae

Stormen123 2023-11-17

231117 사용자단 기술문서 수정

@72c397e417ec2ddff8a93dade0b5e977c52360ae

f507e9d

72c397e

client/views/pages/user/Data/Technology.vue

--- client/views/pages/user/Data/Technology.vue

+++ client/views/pages/user/Data/Technology.vue


                             <p class="date">{{ yyyymmdd(item.reg_dt) }}</p>
                         </div>
                         <div>
-                            <button class="blue-btn" @click="goToPage3">바로가기</button>
+                            <button class="blue-btn" @click="goToPage3(item)">바로가기</button>
                         </div>
                     </li>
                     <li class="tech-box-sec ">

         }
     },
     methods: {
-        goToPage3() {
+        goToPage3(item) {
             this.$router.push({ path:'/TechnologyOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id }});
         },
 

             return COMMON_UTIL.yyyymmdd(date);
         },
 
-        //게시글 상세조회 페이지로 이동
-        postSelectOnePage: function (item) {
-            this.$router.push({ path: '/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: {} })
-        },
     },
     watch: {
 

f507e9d

72c397e

client/views/pages/user/Data/TechnologyOne.vue

--- client/views/pages/user/Data/TechnologyOne.vue

+++ client/views/pages/user/Data/TechnologyOne.vue


                     <h1>기술문서</h1>
                 </div>
                 <div class="tech-report">
-                    <h2>2022년 온라인 콘텐츠 활용 교과서 선도학교 교권 역량 효과성 분석</h2>
-                    <button>기술문서 다운받기</button>
+                    <h2>{{ post.post_title }}</h2>
+                    <button @click="downloadFile()">기술문서 다운받기</button>
 
                 </div>
                 <div class="tech-info">
                     <span class="tech-info-img">
-                        <img src="../../../../resources/jpg/tech-img.png" alt="기술문서 이미지">
+                        <img :src=src alt="기술문서 이미지">
                     </span>
                     <div class="tech-txt-wrap">
                         <ul>
                             <li style="border-top: 1px solid #e5e5e5 ;">
-                                <strong>연구책임자</strong>
-                                <p>정종원</p>
+                                <strong>기술문서명</strong>
+                                <p>{{ post.tech_doc_nm }}</p>
                             </li>
                             <li>
-                                <strong>연구진</strong>
-                                <p> 안성훈, 최준석, 이정태, 나화정, 민예슬</p>
+                                <strong>버전</strong>
+                                <p> {{ post.tech_doc_version }}</p>
+                            </li>
+                            <li>
+                                <strong>주요내용</strong>
+                                <p>{{ post.tech_doc_main_content }}</p>
                             </li>
                             <li>
                                 <strong>키워드</strong>
-                                <p>온라인콘텐츠;선도학교;교원역량</p>
-                            </li>
-                            <li>
-                                <strong>담당부서</strong>
-                                <p>디지털교과서부</p>
+                                <p>{{ post.tech_doc_keyword }}</p>
                             </li>
 
                         </ul>

 
                 </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,
+            },
+            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')
-        }
+        },
+
+        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:', '') + '/thumbnail_' + 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: {
 

     },
     mounted() {
         console.log('Technology mounted');
+        this.postSelectOne();
     }
 }
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -22,7 +22,7 @@
22	22	<p class="date">{{ yyyymmdd(item.reg_dt) }}</p>
23	23	</div>
24	24	<div>
25		- <button class="blue-btn" @click="goToPage3">바로가기</button>
	25	+ <button class="blue-btn" @click="goToPage3(item)">바로가기</button>
26	26	</div>
27	27	</li>
28	28	<li class="tech-box-sec ">
...	...	@@ -248,7 +248,7 @@
248	248	}
249	249	},
250	250	methods: {
251		- goToPage3() {
	251	+ goToPage3(item) {
252	252	this.$router.push({ path:'/TechnologyOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id }});
253	253	},
254	254
...	...	@@ -276,14 +276,6 @@
276	276	return COMMON_UTIL.yyyymmdd(date);
277	277	},
278	278
279		- //게시글 상세조회 페이지로 이동
280		- postSelectOnePage: function (item) {
281		- this.$router.push({ path: '/TechSelectOne.page', query: { 'post_id': item.post_id, 'file_id': item.file_id, 'bbs_id': item.bbs_id } });
282		- },
283		-
284		- postInsertPage: function () {
285		- this.$router.push({ path: '/adm/techInsert.page', query: {} })
286		- },
287	279	},
288	280	watch: {
289	281

...	...	@@ -8,31 +8,31 @@
8	8	<h1>기술문서</h1>
9	9	</div>
10	10	<div class="tech-report">
11		- <h2>2022년 온라인 콘텐츠 활용 교과서 선도학교 교권 역량 효과성 분석</h2>
12		- <button>기술문서 다운받기</button>
	11	+ <h2>{{ post.post_title }}</h2>
	12	+ <button @click="downloadFile()">기술문서 다운받기</button>
13	13
14	14	</div>
15	15	<div class="tech-info">
16	16	<span class="tech-info-img">
17		- <img src="../../../../resources/jpg/tech-img.png" alt="기술문서 이미지">
	17	+ <img :src=src alt="기술문서 이미지">
18	18	</span>
19	19	<div class="tech-txt-wrap">
20	20	<ul>
21	21	<li style="border-top: 1px solid #e5e5e5 ;">
22		- <strong>연구책임자</strong>
23		- <p>정종원</p>
	22	+ <strong>기술문서명</strong>
	23	+ <p>{{ post.tech_doc_nm }}</p>
24	24	</li>
25	25	<li>
26		- <strong>연구진</strong>
27		- <p> 안성훈, 최준석, 이정태, 나화정, 민예슬</p>
	26	+ <strong>버전</strong>
	27	+ <p> {{ post.tech_doc_version }}</p>
	28	+ </li>
	29	+ <li>
	30	+ <strong>주요내용</strong>
	31	+ <p>{{ post.tech_doc_main_content }}</p>
28	32	</li>
29	33	<li>
30	34	<strong>키워드</strong>
31		- <p>온라인콘텐츠;선도학교;교원역량</p>
32		- </li>
33		- <li>
34		- <strong>담당부서</strong>
35		- <p>디지털교과서부</p>
	35	+ <p>{{ post.tech_doc_keyword }}</p>
36	36	</li>
37	37
38	38	</ul>
...	...	@@ -40,23 +40,215 @@
40	40
41	41	</div>
42	42	</div>
	43	+ <div>
	44	+ <div colspan="2" style="border-bottom: 1px solid #007aff;">
	45	+ <div id="viewer" ref="viewer" class="viewer"></div>
	46	+ </div>
	47	+ </div>
	48	+ <div class="article-list">
	49	+ <ul>
	50	+ <li><span class="next">다음글</span>
	51	+ <span>
	52	+ <span v-if="nextPost" @click="movePost(nextPost)" class="sub-content-title">
	53	+ {{ nextPost.post_title }}
	54	+ </span>
	55	+ <span v-else class="sub-content-title">다음글이 없습니다.</span>
	56	+ </span>
	57	+ </li>
	58	+ <li><span class="prev">이전글</span>
	59	+ <span>
	60	+ <span v-if="prevPost" @click="movePost(prevPost)" class="sub-content-title">
	61	+ {{ prevPost.post_title }}
	62	+ </span>
	63	+ <span v-else class="sub-content-title">이전글이 없습니다.</span>
	64	+ </span>
	65	+ </li>
	66	+ </ul>
	67	+ </div>
43	68	<div class="tech-btn">
44	69	<button @click="goToPage4">목록</button>
45	70	</div>
46	71	</div>
47	72	</div>
48	73	</template>
49		-
50	74	<script>
	75	+import axios from 'axios';
	76	+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
	77	+import { useRoute } from 'vue-router';
	78	+import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
	79	+import '@toast-ui/editor/dist/toastui-editor.css';
	80	+import '@toast-ui/editor/dist/i18n/ko-kr';
	81	+import * as FileSaver from 'file-saver';
	82	+
51	83	export default {
52	84	data() {
53	85	return {
	86	+ post: {
	87	+ post_id: null,
	88	+ post_title: null,
	89	+ post_content: null,
	90	+ notice_yn: null,
	91	+ notice_start_dt: null,
	92	+ notice_end_dt: null,
	93	+ reg_dt: null,
	94	+ mdfcn_dt: null,
	95	+ link_url: null,
	96	+ view_cnt: null,
	97	+ file_id: null,
	98	+ bbs_id: '3',
	99	+ rgtr_id: null,
	100	+ mdfr_id: null,
	101	+ ctgry_nm: null,
	102	+ tech_doc_nm: null,
	103	+ tech_doc_version: null,
	104	+ tech_doc_main_content: null,
	105	+ tech_doc_keyword: null,
	106	+ },
	107	+ prevPost: {
	108	+ post_id: null,
	109	+ post_title: null,
	110	+ file_id: null,
	111	+ },
	112	+ nextPost: {
	113	+ post_id: null,
	114	+ post_title: null,
	115	+ file_id: null,
	116	+ },
	117	+ fileList: [],
	118	+ oEditors: [], // oEditors는 스마트에디터용
	119	+ route: useRoute(),
	120	+ thumbnailFileList: [],
	121	+ attachFileList: [],
	122	+ src: null,
54	123	}
55	124	},
56	125	methods: {
57	126	goToPage4() {
58	127	this.$router.push('/Technology.page')
59		- }
	128	+ },
	129	+
	130	+ postSelectOne: function () {
	131	+ const vm = this;
	132	+ axios({
	133	+ url: '/post/postSelectOne.json',
	134	+ method: 'post',
	135	+ hearder: {
	136	+ 'Content-Type': "application/json; charset=UTF-8",
	137	+ },
	138	+ data: {
	139	+ 'post_id': vm.route.query.post_id,
	140	+ 'file_id': vm.route.query.file_id,
	141	+ 'bbs_id': vm.route.query.bbs_id
	142	+ }
	143	+ }).then(function (response) {
	144	+ vm.prevPost = response.data.postSelectOne.prevPost;
	145	+ vm.post = response.data.postSelectOne.post;
	146	+ vm.nextPost = response.data.postSelectOne.nextPost;
	147	+ if (response.data.selectFileList.length != 0) {
	148	+ vm.fileList = response.data.selectFileList;
	149	+ vm.thumbnailFileList = [];
	150	+ vm.attachFileList = [];
	151	+ for (let i = 0; i < vm.fileList.length; i++) {
	152	+ if (vm.fileList[i].file_ty === 'thumbnail') {
	153	+ vm.thumbnailFileList.push(vm.fileList[i]);
	154	+ } else {
	155	+ vm.attachFileList.push(vm.fileList[i]);
	156	+ }
	157	+ }
	158	+ vm.src = 'http://localhost:8080' + vm.thumbnailFileList[0].file_path.replace('C:', '') + '/thumbnail_' + vm.thumbnailFileList[0].file_nm + '.' + vm.thumbnailFileList[0].file_extn_nm
	159	+ }
	160	+ vm.getViewer(vm.post.post_content)
	161	+ }).catch(function (error) {
	162	+ console.log("error - ", error)
	163	+ alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
	164	+ })
	165	+ },
	166	+ getViewer(data) {
	167	+ this.viewer = new Viewer({
	168	+ el: this.$refs.viewer,
	169	+ initialEditType: 'wysiwyg',
	170	+ previewStyle: 'vertical',
	171	+ initialValue: data,
	172	+ customHTMLRenderer: {
	173	+ htmlBlock: {
	174	+ iframe(node) {
	175	+ return [
	176	+ { type: 'openTag', tagName: 'iframe', outerNewLine: true, attributes: node.attrs },
	177	+ { type: 'html', content: node.childrenHTML },
	178	+ { type: 'closeTag', tagName: 'iframe', outerNewLine: true },
	179	+ ];
	180	+ },
	181	+ }
	182	+ },
	183	+ });
	184	+ },
	185	+
	186	+ downloadFile: function () {
	187	+ const vm = this;
	188	+ let path = vm.attachFileList[0].file_path.replace('C:', '') + '/' + vm.attachFileList[0].file_nm + '.' + vm.attachFileList[0].file_extn_nm;
	189	+ console.log(path);
	190	+ axios({
	191	+ url: '/file/downloadFile.json',
	192	+ method: 'post',
	193	+ headers: {
	194	+ "Content-Type": "application/x-www-form-urlencoded",
	195	+ },
	196	+ responseType: 'blob',
	197	+ data: `file_path=${encodeURIComponent(path)}`
	198	+ }).then((response) => {
	199	+ const blob = new Blob([response.data]);
	200	+
	201	+ const isSafari = /^((?!chrome\|android).)*safari/i.test(navigator.userAgent);
	202	+
	203	+ if (isSafari) {
	204	+ FileSaver.saveAs(blob, vm.attachFileList[0].real_file_nm);
	205	+ } else {
	206	+ const url = window.URL.createObjectURL(blob);
	207	+ const a = document.createElement('a');
	208	+ a.style.display = 'none';
	209	+ a.href = url;
	210	+ a.download = vm.attachFileList[0].real_file_nm;
	211	+ document.body.appendChild(a);
	212	+ a.click();
	213	+ window.URL.revokeObjectURL(url);
	214	+ }
	215	+
	216	+ this.$router.go(0);
	217	+
	218	+ }).catch(function (error) {
	219	+ console.log('error - ', error)
	220	+ alert('에러발생');
	221	+ });
	222	+ },
	223	+
	224	+ movePost: function (post1) {
	225	+ const vm = this;
	226	+ console.log('------------이동-----------')
	227	+ console.log(vm.route)
	228	+ axios({
	229	+ url: '/post/postSelectOne.json',
	230	+ method: 'post',
	231	+ hearder: {
	232	+ 'Content-Type': "application/json; charset=UTF-8",
	233	+ },
	234	+ data: {
	235	+ 'post_id': post1.post_id,
	236	+ 'file_id': post1.file_id,
	237	+ 'bbs_id': post1.bbs_id
	238	+ }
	239	+ }).then(function (response) {
	240	+ vm.prevPost = response.data.postSelectOne.prevPost;
	241	+ vm.post = response.data.postSelectOne.post;
	242	+ vm.nextPost = response.data.postSelectOne.nextPost;
	243	+ vm.fileList = response.data.selectFileList;
	244	+
	245	+
	246	+ vm.getViewer(vm.post.post_content)
	247	+ }).catch(function (error) {
	248	+ console.log("error - ", error)
	249	+ alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
	250	+ })
	251	+ },
60	252	},
61	253	watch: {
62	254
...	...	@@ -66,6 +258,7 @@
66	258	},
67	259	mounted() {
68	260	console.log('Technology mounted');
	261	+ this.postSelectOne();
69	262	}
70	263	}
71	264	</script>

Delete comment