Commit @9c2749d7e128e92cc0a3e262c85c6152f3080bb0

kimgkdud898 2023-11-09

Merge branch 'front-end' of http://210.180.118.83/yjryu/KERIS into front-end

@9c2749d7e128e92cc0a3e262c85c6152f3080bb0

7cb9ab5

9c2749d

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import AdminNoticeSelectList from "../pages/admin/notice/NoticeSelectList.vue";
 import AdminNoticeSelectOne from "../pages/admin/notice/NoticeSelectOne.vue";
 import AdminNoticeInsert from "../pages/admin/notice/NoticeInsert.vue";
+import AdminNoticeUpdate from "../pages/admin/notice/noticeUpdate.vue";
 import AdminNewsSelectList from "../pages/admin/news/NewsSelectList.vue";
 import AdminNewsSelectOne from "../pages/admin/news/NewsSelectOne.vue";
 import AdminNewsInsert from "../pages/admin/news/NewsInsert.vue";

   { path: "/adm/noticeSelectList.page", name: "AdminNoticeSelectList", component: AdminNoticeSelectList },
   { path: "/adm/noticeSelectOne.page", name: "AdminNoticeSelectOne", component: AdminNoticeSelectOne },
   { path: "/adm/noticeInsert.page", name: "AdminNoticeInsert", component: AdminNoticeInsert },
+  { path: "/adm/noticeUpdate.page", name: "AdminNoticeUpdate", component:AdminNoticeUpdate},
   { path: "/adm/newsSelectList.page", name: "AdminNewsSelectList", component: AdminNewsSelectList },
   { path: "/adm/newsSelectOne.page", name: "AdminNewsSelectOne", component: AdminNewsSelectOne },
   { path: "/adm/newsInsert.page", name: "AdminNewsInsert", component: AdminNewsInsert },

7cb9ab5

9c2749d

client/views/pages/admin/notice/NoticeInsert.vue

--- client/views/pages/admin/notice/NoticeInsert.vue

+++ client/views/pages/admin/notice/NoticeInsert.vue


                     <tbody>
                         <tr>
                             <th>제목</th>
-                            <td><input type="text" name="" id="newsTitle"></td>
+                            <td><input type="text" name="" id="newsTitle" v-model="post.post_title"></td>
                         </tr>
                         <tr>
                             <th>내용</th>

                             <th>첨부파일</th>
                             <td>
                                 <div class="btn-upload" @click="openFileInput">파일 업로드하기</div>
-                                <input type="file" name="file" id="file" style="display: none" @change="fileUpload()">
+                                <input type="file" name="file" id="file" ref="fileInput" style="display: none"
+                                    @change="fileUpload()">
+                                <ul v-for="(file, idx) in fileList" :key="idx">
+                                    <li> {{ file.name }} <button @click="fileRemove(idx)">삭제</button></li>
+                                </ul>
                             </td>
                         </tr>
                     </tbody>
                 </table>
                 <div class="btn-wrap">
-                    <button class="dark-gray-btn" @click="selectList">이전</button>
-                    <button class="blue-btn">글쓰기</button>
+                    <button class="dark-gray-btn" @click="postSelectListPage()">이전</button>
+                    <button class="blue-btn" @click="postInsertCheck()">등록</button>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script>
-import '@toast-ui/editor/dist/toastui-editor.css';
+import axios from 'axios';
+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
 
 export default {
     data() {
         return {
+            post: {
+                bbs_id: '2',
+                post_title: null,
+                post_content: null,
+                // 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
+                ctgry_nm: null,
+            },
+            fileList: [],
+            filecount: 0,
             oEditors: [], // oEditors는 스마트에디터용
         };
     },
     methods: {
-        selectList: function () {
-            this.$router.push({ path: '/adm/noticeSelectList.page' });
+        //게시글 및 첨부파일 등록
+        postInsert: function () {
+            const vm = this;
+            let formData = new FormData();
+
+            if (vm.fileList.length > 0) {
+                for (let i = 0; i < vm.fileList.length; i++) {
+                    formData.append('file', vm.fileList[i]);
+                    console.log(formData.get('file'));
+                }
+                formData.append("post", JSON.stringify(vm.post));
+
+                axios({
+                    url: '/post/postFileInsert.file',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                    data: formData
+                }).then(function (response) {
+                    console.log("qnaInsert - response : ", response);
+                    let result = response.data;
+                    if (result > 0) {
+                        alert("등록을 완료하였습니다.");
+                        vm.postSelectListPage()
+                    } else {
+                        alert("등록 실패, 관리자에게 문의해주세요.");
+                    }
+                }).catch(function (error) {
+                    console.log("qnaInsert - error : ", error);
+                    alert("등록 오류, 관리자에게 문의해주세요.");
+                });
+            } else {
+
+                axios({
+                    url: '/post/postInsert.json',
+                    method: 'post',
+                    headers: {
+                        'Content-Type': "application/json; charset=UTF-8",
+                    },
+                    data: vm.post
+                }).then(function (response) {
+                    console.log("noticeInsert - response : ", response);
+                    let result = response.data;
+                    if (result > 0) {
+                        alert("등록을 완료하였습니다.");
+                        vm.postSelectListPage()
+                    } else {
+                        alert("등록 실패, 관리자에게 문의해주세요.");
+                    }
+                }).catch(function (error) {
+                    console.log("noticeInsert - error : ", error);
+                    alert("등록 오류, 관리자에게 문의해주세요.");
+                });
+            }
         },
-        // 파일 업로드 커스텀을 위한 함수
-        openFileInput: function () {
-            this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
+
+        //등록 유효성 검사
+        postInsertCheck: function () {
+            const oEditors = this.oEditors;
+            oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
+            // 스마트에디터의 iframe에 있는 내용을 textarea로. 
+            this.post.post_content = document.getElementById("smart").value;
+            console.log(document.getElementById("smart").value);
+            console.log(this.post.post_content);
+            console.log(COMMON_UTIL.isEmpty(this.post.post_title));
+
+            if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
+                alert("제목을 입력해주세요.");
+                return false;
+            }
+
+            if (COMMON_UTIL.isEmpty(this.post.post_content) === false || this.post.post_content === "<p><br></p>") {
+                alert("내용을 입력해주세요.");
+                return false;
+            }
+
+            this.postInsert();
         },
+
+        //파일업로드
         fileUpload: function () {
             this.fileList[this.filecount] = this.$refs.fileInput.files[0]
             this.filecount += 1
             console.log("file", this.fileList);
         },
+
+        //파일업로드 중 업로드 파일 삭제
+        fileRemove(idx) {
+            this.fileList.splice(idx, 1);
+            console.log("reMove_file", this.fileList);
+            this.filecount = this.fileList.length;
+        },
+
+         //게시글 리스트로 이동
+         postSelectListPage: function () {
+            this.$router.push({ path: '/adm/noticeSelectList.page' });
+        },
+
+         // 파일 업로드 커스텀을 위한 함수
+         openFileInput: function () {
+            this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
+        }
     },
     watch: {},
     computed: {},

7cb9ab5

9c2749d

client/views/pages/admin/notice/NoticeSelectList.vue

--- client/views/pages/admin/notice/NoticeSelectList.vue

+++ client/views/pages/admin/notice/NoticeSelectList.vue


                 perPage: 10,
                 searchType: null,
                 searchText: null,
+                bbs_id : '2'
             },
             postList: [],
             postListCount: 0,

9c2749d

client/views/pages/admin/notice/NoticeUpdate.vue (added)

+++ client/views/pages/admin/notice/NoticeUpdate.vue

...	...	@@ -0,0 +1,282 @@
	1	+<template>
	2	+ <div class="notice-wrap">
	3	+ <div class="content-box">
	4	+ <div class="title-wrap">
	5	+ <div class="flex-start">
	6	+ <img src="../../../../resources/jpg/notic-logo-img.png" alt="공지사항 아이콘" class="title-icon">
	7	+ <h2 class="main-title">공지사항</h2>
	8	+ </div>
	9	+ </div>
	10	+ <div class="content-wrap">
	11	+ <table class="insert-table">
	12	+ <tbody>
	13	+ <tr>
	14	+ <th>제목</th>
	15	+ <td><input type="text" name="" id="newsTitle" v-model="post.post_title"></td>
	16	+ </tr>
	17	+ <tr>
	18	+ <th>내용</th>
	19	+ <td><textarea name="smart" id="smart" style="width:100%"></textarea></td>
	20	+ </tr>
	21	+ <tr>
	22	+ <th>등록된 첨부파일</th>
	23	+ <td colspan="6">
	24	+ <div v-if="fileList.length == 0">
	25	+ <label>첨부된 파일이 없습니다.</label>
	26	+ </div>
	27	+ <ul v-else v-for="(item, idx) in fileList" :key="idx">
	28	+ <li class="flex file-list">
	29	+ <p>{{ item.real_file_nm }}</p>
	30	+ <button class="red-btn" @click="fileRemove(item, idx)">삭제</button>
	31	+ </li>
	32	+ </ul>
	33	+ </td>
	34	+ </tr>
	35	+ <tr>
	36	+ <th>추가 첨부파일</th>
	37	+ <td colspan="6">
	38	+ <div class="btn-upload" @click="openFileInput">파일 업로드하기</div>
	39	+ <input type="file" name="file" id="file" ref="fileInput" style="display: none"
	40	+ @change="fileUpload()">
	41	+ <ul v-for="(item, idx) in insertFileList" :key="idx">
	42	+ <li v-if="insertFileList.length != 0" class="flex file-list">{{ item.name }} <button class="red-border-btn"
	43	+ @click="fileRemove(item, idx)">삭제</button></li>
	44	+ </ul>
	45	+ </td>
	46	+ </tr>
	47	+ </tbody>
	48	+ </table>
	49	+ <div class="btn-wrap">
	50	+ <button class="dark-gray-btn" @click="postSelectListPage()">이전</button>
	51	+ <button class="blue-btn" @click="postInsertCheck()">등록</button>
	52	+ </div>
	53	+ </div>
	54	+ </div>
	55	+ </div>
	56	+</template>
	57	+<script>
	58	+import axios from 'axios';
	59	+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
	60	+import { useRoute } from 'vue-router';
	61	+
	62	+export default {
	63	+ data() {
	64	+ return {
	65	+ post: {
	66	+ post_id: null,
	67	+ post_title: null,
	68	+ post_content: null,
	69	+ notice_yn: null,
	70	+ notice_start_dt: null,
	71	+ notice_end_dt: null,
	72	+ reg_dt: null,
	73	+ mdfcn_dt: null,
	74	+ link_url: null,
	75	+ view_cnt: null,
	76	+ file_id: null,
	77	+ bbs_id: null,
	78	+ rgtr_id: null,
	79	+ mdfr_id: null,
	80	+ ctgry_nm: null,
	81	+ },
	82	+ fileList: [],
	83	+ deleteFileList: [],
	84	+ insertFileList: [],
	85	+ filecount: 0,
	86	+ insertCount: 0,
	87	+ deleteCount: 0,
	88	+ oEditors: [], // oEditors는 스마트에디터용
	89	+ route: useRoute(),
	90	+ };
	91	+ },
	92	+ methods: {
	93	+ //게시글 및 첨부파일 등록
	94	+ postSelectOne: function () {
	95	+ const vm = this;
	96	+ axios({
	97	+ url: '/post/postSelectOne.json',
	98	+ method: 'post',
	99	+ hearder: {
	100	+ 'Content-Type': "application/json; charset=UTF-8",
	101	+ },
	102	+ data: { 'post_id': vm.route.query.post_id, 'file_id': vm.route.query.file_id }
	103	+ }).then(function (response) {
	104	+ vm.post = response.data.postSelectOne;
	105	+
	106	+ if (response.data.selectFileList.length != 0) {
	107	+ vm.fileList = response.data.selectFileList;
	108	+ vm.filecount = response.data.selectFileList.length;
	109	+ }
	110	+
	111	+ vm.initEditor(vm.post.post_content)
	112	+ }).catch(function (error) {
	113	+ console.log("error - ", error)
	114	+ alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
	115	+ })
	116	+ },
	117	+
	118	+ //게시글 및 첨부파일 등록
	119	+ postUpdate: function () {
	120	+ const vm = this;
	121	+ let formData = new FormData();
	122	+
	123	+ if (vm.insertFileList.length > 0 \|\| vm.deleteFileList.length > 0) {
	124	+ if (vm.insertFileList.length > 0) {
	125	+ for (let i = 0; i < vm.insertFileList.length; i++) {
	126	+ formData.append('file', vm.insertFileList[i]);
	127	+ console.log('file - ', formData.get('file'));
	128	+ }
	129	+ }
	130	+
	131	+ if (vm.deleteFileList.length > 0) {
	132	+ formData.append('deleteFile', JSON.stringify(vm.deleteFileList));
	133	+ console.log('deleteFile - ', formData.get('deleteFile'));
	134	+ }
	135	+
	136	+ formData.append("post", JSON.stringify(vm.post));
	137	+
	138	+ axios({
	139	+ url: '/post/postFileUpdate.file',
	140	+ method: 'post',
	141	+ headers: {
	142	+ 'Content-Type': 'multipart/form-data',
	143	+ },
	144	+ data: formData
	145	+ }).then(function (response) {
	146	+ console.log("qnaInsert - response : ", response);
	147	+ let result = response.data;
	148	+ if (result > 0) {
	149	+ alert("수정을 완료하였습니다.");
	150	+ vm.postSelectListPage()
	151	+ } else {
	152	+ alert("수정 실패, 관리자에게 문의해주세요.");
	153	+ }
	154	+ }).catch(function (error) {
	155	+ console.log("qnaInsert - error : ", error);
	156	+ alert("수정 오류, 관리자에게 문의해주세요.");
	157	+ });
	158	+ } else {
	159	+
	160	+ axios({
	161	+ url: '/post/postFileUpdate.json',
	162	+ method: 'post',
	163	+ headers: {
	164	+ 'Content-Type': "application/json; charset=UTF-8",
	165	+ },
	166	+ data: vm.post
	167	+ }).then(function (response) {
	168	+ console.log("noticeInsert - response : ", response);
	169	+ let result = response.data;
	170	+ if (result > 0) {
	171	+ alert("수정을 완료하였습니다.");
	172	+ vm.postSelectListPage()
	173	+ } else {
	174	+ alert("수정 실패, 관리자에게 문의해주세요.");
	175	+ }
	176	+ }).catch(function (error) {
	177	+ console.log("noticeInsert - error : ", error);
	178	+ alert("수정 오류, 관리자에게 문의해주세요.");
	179	+ });
	180	+ }
	181	+ },
	182	+
	183	+ //등록 유효성 검사
	184	+ postUpdateCheck: function () {
	185	+ const oEditors = this.oEditors;
	186	+ oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
	187	+ // 스마트에디터의 iframe에 있는 내용을 textarea로.
	188	+ this.post.post_content = document.getElementById("smart").value;
	189	+
	190	+ if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
	191	+ alert("제목을 입력해주세요.");
	192	+ return false;
	193	+ }
	194	+
	195	+ if (COMMON_UTIL.isEmpty(this.post.post_content) === false \|\| this.post.post_content === "<p><br></p>") {
	196	+ alert("내용을 입력해주세요.");
	197	+ return false;
	198	+ }
	199	+
	200	+ this.postUpdate();
	201	+ },
	202	+
	203	+ // 에디터 만들기
	204	+ initEditor: function (initData) {
	205	+ // 스마트 에디터 적용
	206	+ const oEditors = this.oEditors;
	207	+ nhn.husky.EZCreator.createInIFrame({
	208	+ oAppRef: oEditors,
	209	+ elPlaceHolder: "smart",
	210	+ sSkinURI: "/client/smarteditor2-2.8.2.3/SmartEditor2Skin.html",
	211	+ htParams: {
	212	+ bSkipXssFilter: true,
	213	+ bUseVerticalResizer: true,
	214	+ bUseModeChanger: true
	215	+ },
	216	+ fOnAppLoad: function () {
	217	+ oEditors.getById["smart"].exec("PASTE_HTML", [initData]);
	218	+ },
	219	+ fCreator: "createSEditor2"
	220	+ });
	221	+ },
	222	+ //파일업로드
	223	+ fileUpload: function () {
	224	+
	225	+ this.insertFileList[this.insertCount] = this.$refs.fileInput.files[0];
	226	+ this.insertCount += 1;
	227	+ console.log("insertFile - ", this.insertFileList);
	228	+ },
	229	+
	230	+ //파일업로드 중 업로드 파일 삭제
	231	+ fileRemove(item, idx) {
	232	+ if (item.file_path === undefined) {
	233	+ this.insertFileList.splice(idx, 1);
	234	+ this.insertCount = this.insertFileList.length;
	235	+ console.log("insertfile", this.insertFileList);
	236	+
	237	+ } else {
	238	+ this.fileList.splice(idx, 1);
	239	+ this.deleteFileList[this.deleteCount] = item
	240	+ this.deleteCount += 1
	241	+ this.filecount = this.fileList.length;
	242	+ console.log("deleteFile - ", this.deleteFileList);
	243	+ }
	244	+
	245	+ },
	246	+
	247	+ //게시글 리스트로 이동
	248	+ postSelectListPage: function () {
	249	+ this.$router.push({ path: '/adm/noticeSelectList.page' });
	250	+ },
	251	+
	252	+ // 파일 업로드 커스텀을 위한 함수
	253	+ openFileInput: function () {
	254	+ this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
	255	+ }
	256	+ },
	257	+ watch: {},
	258	+ computed: {},
	259	+ components: {},
	260	+ mounted() {
	261	+ this.postSelectOne();
	262	+ }
	263	+};
	264	+</script>
	265	+<style scoped>
	266	+.notice-wrap,
	267	+.content-box {
	268	+ width: 100%;
	269	+ height: 100%;
	270	+ font-size: 1.3rem;
	271	+}
	272	+
	273	+.insert-table {
	274	+ border-top: 3px solid #ddd;
	275	+ border-bottom: 3px solid #ddd;
	276	+}
	277	+
	278	+textarea {
	279	+ width: 100%;
	280	+ height: 450px;
	281	+}
	282	+</style>

7cb9ab5

9c2749d

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

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

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


 
         //게시글 상세조회 페이지로 이동
         postSelectOnePage: function (item) {
-            this.$router.push({ path: '/DataDtali.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
+            const vm = this;
+
+            axios({
+                url: '/post/postViewCount.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: { 'post_id': item.post_id }
+            }).then(function (response) {
+                vm.$router.push({ path: '/DataDtali.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
+            }).catch(function (error) {
+                console.log("서버오류");
+            })
         },
     },
     watch: {

7cb9ab5

9c2749d

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

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

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


             route: useRoute(),
         };
     },
-    mounted() {
-        this.postViewCount();
-        this.postSelectOne();
-
-    },
     methods: {
         goBack() {
             this.$router.go(-1);

             }).catch(function (error) {
                 console.log("error - ", error)
                 alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
-            })
-        },
-
-        postViewCount: function () {
-            const vm = this;
-            axios({
-                url: '/post/postViewCount.json',
-                method: 'post',
-                hearder: {
-                    'Content-Type': "application/json; charset=UTF-8",
-                },
-                data: { 'post_id': vm.route.query.post_id }
-            }).then(function (response) {
-
-            }).catch(function (error) {
-                console.log("서버오류");
             })
         },
 

         yyyymmdd: function (date) {
             return COMMON_UTIL.yyyymmdd(date);
         },
-    }
+    },
+
+    mounted() {
+        this.postSelectOne();
+    },
 }
 </script>

7cb9ab5

9c2749d

client/views/pages/user/networking/Matching.vue

--- client/views/pages/user/networking/Matching.vue

+++ client/views/pages/user/networking/Matching.vue


                                     <img :src="'http://localhost:8080'+item.file_path +'\\' + item.file_nm + '.' + item.file_extn_nm" width="20px" alt="">
                                     <p>{{ company_info }}</p>
                                     <div class="matchingbox-1">
-                                        <p v-if="item.pick_yn === 0" @click.stop="pickModal(item)"><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> {{ item.company_pick_cnt }} </p>
+                                        <p v-if="!item.pick_yn" @click.stop="pickModal(item)"><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> {{ item.company_pick_cnt }} </p>
                                         <p v-else @click.stop="pickCancelModal(item)"><i class="fa fa-heart fa-lg" style="color: #d41515;"></i> {{ item.company_pick_cnt }} </p>
                                         <p class="matchingbox-text">조회수 <span>{{ item.view_cnt }}</span></p>
                                     </div>
                                     <div class="matching-span">
-                                        <span v-for="(item, idx) in keywordList" :key="idx">#{{ item }}</span>
+                                        <span v-for="(item, idx1) in keywordList[idx]" :key="idx1">#{{ item }}</span>
                                     </div>
                                 </div>
                             </div>

                             <div>
                                 <h5>{{ item.company_nm }}</h5>
                                 <div class="matching-span">
-                                        <span v-for="(item, idx) in keywordList" :key="idx">#{{ item }}</span>
-                                    </div>
+                                        <span v-for="(item, idx1) in keywordList[idx]" :key="idx1"> #{{ item }}</span>
+                                </div>
                                 <div class="matchingbox-2">
-                                    <p v-if="item.pick_yn === 0" @click.stop="pickModal(item)"><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> {{ item.company_pick_cnt }} </p>
+                                    <p v-if="!item.pick_yn" @click.stop="pickModal(item)"><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> {{ item.company_pick_cnt }} </p>
                                     <p v-else @click.stop="pickCancelModal(item)"><i class="fa fa-heart fa-lg" style="color: #d41515;"></i> {{ item.company_pick_cnt }} </p>
                                     <p>조회수 <span>{{ item.view_cnt }}</span> </p>
                                 </div>

             },
             bestList:[],
             companyList:[],
+            keyword:[],
             keywordList:[],
             companyTop6List:[],
             companyListCount: 0,

                 vm.companyTop6List = response.data.companyTop6;
 
                  for( let i = 0; i < vm.companyList.length; i++) {
-                    vm.keywordList = vm.companyList[i].keyword.split('#');
+                    vm.keyword = vm.companyList[i].keyword.split('#',4);
+                    vm.keyword.splice(0, 1)
+                    vm.keywordList[i] = vm.keyword
+                    console.log("keyword", vm.keywordList);
                 }
                 
-            }).then(function() {
-                vm.keywordList.splice(0, 1);
             }).catch(function(error) {
                 console.log('error - ', error)
                 alert('기업 목록 조회 오류, 관리자에게 문의하세요.');

         },
 
         companySelectOnePage: function(item) {
-            this.$router.push({ path: '/MatchingOne.page', query: {'company_id': item.company_id}});
+            const vm = this;
+            
+            axios({
+                url: '/matching/companyViewCountAdd.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: { 'company_id': item.company_id }
+            }).then(function (response) {
+                vm.$router.push({ path: '/MatchingOne.page', query: {'company_id': item.company_id}});
+            }).catch(function (error) {
+                console.log("서버오류");
+            })
         }
     },
     watch: {

7cb9ab5

9c2749d

client/views/pages/user/networking/MatchingOne.vue

--- client/views/pages/user/networking/MatchingOne.vue

+++ client/views/pages/user/networking/MatchingOne.vue


         </div>
         <div class="matDtail-sec">
             <section class="mat-sec1">
-                <h2>(주)지학사 <span>(1등급)</span></h2>
-                <div>
-                    <input type="file" id="dtaildown" style="display: none;">
+                <h2> {{ company.company_nm }}<span>(BEST기업)</span></h2>
+                <div @click="downloadProfile()">
                     <label for="dtaildown">회사소개서 다운로드</label>
                     <i class="fa-solid fa-download" style="color: #ffffff;"></i>
                 </div>

             <!-- /상세내용 -->
             <section class="mat-sec2">
                 <div>
-                    <img src="../../../../resources/jpg/matching-img.png" alt="">
-                </div>
-                <div>
-                    <p>교과서
-                        지학사는 1956년 창립이후 공교육의 핵심인 교과용 도서 개발을 근간으로 초중고 학생들을 위한 국정,검정,인정 전 과목 교과서를 발행하고 있습니다.
-                    </p>
+                    <div id="viewer" ref="viewer" class="viewer"></div>
                 </div>
                 <div class="mat-sec2-end">
                     <p>
 
                         <i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i>
-                        <span @click="openModal2">366666개</span>의 기업이 pick했습니다!
+                        <span id="pickBtn" @click="openPickListMadal">{{ company.company_pick_cnt }}개</span>의 기업이 pick했습니다!
                     </p>
-                    <p><span>조회수</span>45454</p>
+                    <p><span>조회수</span>{{ company.view_cnt }}</p>
 
                 </div>
             </section>

     </div>
 
 
-    <div v-show="showModal2" class="join-modal2">
+    <div v-show="pickModal" class="join-modal2">
         <div class="mat-modal">
 
             <h2>우리기업을 PICK한 기업</h2>
-            <button class="join-text-bt3" @click="closeModal2">X</button>
+            <button class="join-text-bt3" @click="closePickListMadal">X</button>
         </div>
-        <table class="mat-modal-img">
-            <td><img src="../../../../resources/jpg/logo/edutech.png" alt=""></td>
-            <td v-for="item in items" :key="item.id">
-                <!-- <img :src="item.image" alt="" />/ -->
-                {{ item.text }}
+        <table class="mat-modal-img" v-for="(item, idx) in pickSelectList" :key="idx">
+            <td><img :src="'http://localhost:8080'+item.file_path +'\\' + item.file_nm + '.' + item.file_extn_nm"></td>
+            <td >
+                {{ item.company_nm }}
             </td>
-            <td><button :style="{ backgroundColor: buttonColor }" @click="accept">
-                    {{ buttonText }}
-                </button></td>
+            <td>
+                <button v-if="item.pick_yn" disabled :style="{ backgroundColor: '#ccc' }">완료</button>
+                <button v-else :style="{ backgroundColor: '#3f87f7' }" @click="pick(item)"> 수락</button>
+            </td>
         </table>
     </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 {
-            showModal2: false,
+            company: {
+                company_id: null,
+                company_nm: null,
+                company_info: null,
+                company_point: null,
+                file_id: null,
+                user_id: null,
+                keyword: null,
+                company_pick_cnt: null,
+                company_technology: null,
+                company_service: null,
+                view_cnt: null,
+                file_path: null,
+                file_nm: null,
+                file_extn_nm: null,
+            },
+
+            pickSelectList:[],
+            pickModal: false,
             isAccepted: false,
             buttonText: '수락',
             buttonColor: '#3f87f7',

 
                 { id: 2, text: "oo출판사" },
 
-
             ],
-            imagePath1: require("../../../../resources/jpg/fille.png"),
+            route: useRoute(),
         }
     },
     methods: {
-        goToPage2() {
-            this.$router.push('/Matching.page')
+
+        companySelectOne: function() {
+            const vm = this;
+
+            axios({
+                url: '/matching/companySelectOne.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: { 'company_id': vm.route.query.company_id}
+            }).then(function (response) {
+                vm.company = response.data;
+                vm.userCompanyId = response.data.userCompanyId;
+                vm.getViewer(vm.company.company_info);
+            }).catch(function (error) {
+                console.log("error - ", error)
+                alert("기업 상세보기 조회 오류, 관리자에게 문의하세요.");
+            })
         },
-        openModal2() {
-            this.showModal2 = true;
+
+        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 },
+                            ];
+                        },
+                    }
+                },
+            });
         },
-        closeModal2() {
-            this.showModal2 = false;
+
+        downloadProfile: function () {
+            const vm = this;
+            let path = vm.company.file_path + '\\' + vm.company.file_nm + '.' + vm.company.file_extn_nm;
+            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.company.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.company.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('에러발생');
+            });
         },
+
+        openPickListMadal() {
+            const vm = this;
+            if(this.company.company_id === this.userCompanyId) {
+                this.pickModal = true;
+
+                axios({
+                    url: '/matching/pickSelectList.json',
+                    method: 'post',
+                    hearder: {
+                        'Content-Type': "application/json; charset=UTF-8",
+                    },
+                    data: vm.company
+                }).then(function (response) {
+                    vm.pickSelectList = response.data;
+                }).catch(function (error) {
+                    console.log("error - ", error)
+                    alert("PICK 목록 조회 오류, 관리자에게 문의하세요.");
+                })
+            }
+        },
+
+        pick: function(item) {
+            const vm = this;
+
+            axios({
+                url: '/matching/pick.json',
+                method: 'post',
+                hearder: {
+                    'Content-Type': "application/json; charset=UTF-8",
+                },
+                data: item
+            }).then(function(response) {
+                alert(response.data);
+                vm.openPickListMadal();
+            }).catch(function(error) {
+                console.log('error - ', error)
+                alert('기업 목록 조회 오류, 관리자에게 문의하세요.');
+            })
+        },
+
+        closePickListMadal() {
+            this.pickModal = false;
+        },
+
         accept() {
             this.isAccepted = !this.isAccepted;
             this.buttonText = this.isAccepted ? '수락완료' : '수락';
             this.buttonColor = this.isAccepted ? '#ccc' : '#3f87f7';
+        },
+
+        goToPage2() {
+            this.$router.push('/Matching.page')
         },
     },
     watch: {

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

Add a comment

Open 0
Closed 0

List

...	...	@@ -28,6 +28,7 @@
28	28	import AdminNoticeSelectList from "../pages/admin/notice/NoticeSelectList.vue";
29	29	import AdminNoticeSelectOne from "../pages/admin/notice/NoticeSelectOne.vue";
30	30	import AdminNoticeInsert from "../pages/admin/notice/NoticeInsert.vue";
	31	+import AdminNoticeUpdate from "../pages/admin/notice/noticeUpdate.vue";
31	32	import AdminNewsSelectList from "../pages/admin/news/NewsSelectList.vue";
32	33	import AdminNewsSelectOne from "../pages/admin/news/NewsSelectOne.vue";
33	34	import AdminNewsInsert from "../pages/admin/news/NewsInsert.vue";
...	...	@@ -74,6 +75,7 @@
74	75	{ path: "/adm/noticeSelectList.page", name: "AdminNoticeSelectList", component: AdminNoticeSelectList },
75	76	{ path: "/adm/noticeSelectOne.page", name: "AdminNoticeSelectOne", component: AdminNoticeSelectOne },
76	77	{ path: "/adm/noticeInsert.page", name: "AdminNoticeInsert", component: AdminNoticeInsert },
	78	+ { path: "/adm/noticeUpdate.page", name: "AdminNoticeUpdate", component:AdminNoticeUpdate},
77	79	{ path: "/adm/newsSelectList.page", name: "AdminNewsSelectList", component: AdminNewsSelectList },
78	80	{ path: "/adm/newsSelectOne.page", name: "AdminNewsSelectOne", component: AdminNewsSelectOne },
79	81	{ path: "/adm/newsInsert.page", name: "AdminNewsInsert", component: AdminNewsInsert },

...	...	@@ -12,7 +12,7 @@
12	12	<tbody>
13	13	<tr>
14	14	<th>제목</th>
15		- <td><input type="text" name="" id="newsTitle"></td>
	15	+ <td><input type="text" name="" id="newsTitle" v-model="post.post_title"></td>
16	16	</tr>
17	17	<tr>
18	18	<th>내용</th>
...	...	@@ -22,41 +22,146 @@
22	22	<th>첨부파일</th>
23	23	<td>
24	24	<div class="btn-upload" @click="openFileInput">파일 업로드하기</div>
25		- <input type="file" name="file" id="file" style="display: none" @change="fileUpload()">
	25	+ <input type="file" name="file" id="file" ref="fileInput" style="display: none"
	26	+ @change="fileUpload()">
	27	+ <ul v-for="(file, idx) in fileList" :key="idx">
	28	+ <li> {{ file.name }} <button @click="fileRemove(idx)">삭제</button></li>
	29	+ </ul>
26	30	</td>
27	31	</tr>
28	32	</tbody>
29	33	</table>
30	34	<div class="btn-wrap">
31		- <button class="dark-gray-btn" @click="selectList">이전</button>
32		- <button class="blue-btn">글쓰기</button>
	35	+ <button class="dark-gray-btn" @click="postSelectListPage()">이전</button>
	36	+ <button class="blue-btn" @click="postInsertCheck()">등록</button>
33	37	</div>
34	38	</div>
35	39	</div>
36	40	</div>
37	41	</template>
38	42	<script>
39		-import '@toast-ui/editor/dist/toastui-editor.css';
	43	+import axios from 'axios';
	44	+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
40	45
41	46	export default {
42	47	data() {
43	48	return {
	49	+ post: {
	50	+ bbs_id: '2',
	51	+ post_title: null,
	52	+ post_content: null,
	53	+ // 카테고리가 없는 게시판에서는 null로 설정 부탁합니다!
	54	+ ctgry_nm: null,
	55	+ },
	56	+ fileList: [],
	57	+ filecount: 0,
44	58	oEditors: [], // oEditors는 스마트에디터용
45	59	};
46	60	},
47	61	methods: {
48		- selectList: function () {
49		- this.$router.push({ path: '/adm/noticeSelectList.page' });
	62	+ //게시글 및 첨부파일 등록
	63	+ postInsert: function () {
	64	+ const vm = this;
	65	+ let formData = new FormData();
	66	+
	67	+ if (vm.fileList.length > 0) {
	68	+ for (let i = 0; i < vm.fileList.length; i++) {
	69	+ formData.append('file', vm.fileList[i]);
	70	+ console.log(formData.get('file'));
	71	+ }
	72	+ formData.append("post", JSON.stringify(vm.post));
	73	+
	74	+ axios({
	75	+ url: '/post/postFileInsert.file',
	76	+ method: 'post',
	77	+ headers: {
	78	+ 'Content-Type': 'multipart/form-data',
	79	+ },
	80	+ data: formData
	81	+ }).then(function (response) {
	82	+ console.log("qnaInsert - response : ", response);
	83	+ let result = response.data;
	84	+ if (result > 0) {
	85	+ alert("등록을 완료하였습니다.");
	86	+ vm.postSelectListPage()
	87	+ } else {
	88	+ alert("등록 실패, 관리자에게 문의해주세요.");
	89	+ }
	90	+ }).catch(function (error) {
	91	+ console.log("qnaInsert - error : ", error);
	92	+ alert("등록 오류, 관리자에게 문의해주세요.");
	93	+ });
	94	+ } else {
	95	+
	96	+ axios({
	97	+ url: '/post/postInsert.json',
	98	+ method: 'post',
	99	+ headers: {
	100	+ 'Content-Type': "application/json; charset=UTF-8",
	101	+ },
	102	+ data: vm.post
	103	+ }).then(function (response) {
	104	+ console.log("noticeInsert - response : ", response);
	105	+ let result = response.data;
	106	+ if (result > 0) {
	107	+ alert("등록을 완료하였습니다.");
	108	+ vm.postSelectListPage()
	109	+ } else {
	110	+ alert("등록 실패, 관리자에게 문의해주세요.");
	111	+ }
	112	+ }).catch(function (error) {
	113	+ console.log("noticeInsert - error : ", error);
	114	+ alert("등록 오류, 관리자에게 문의해주세요.");
	115	+ });
	116	+ }
50	117	},
51		- // 파일 업로드 커스텀을 위한 함수
52		- openFileInput: function () {
53		- this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
	118	+
	119	+ //등록 유효성 검사
	120	+ postInsertCheck: function () {
	121	+ const oEditors = this.oEditors;
	122	+ oEditors.getById["smart"].exec("UPDATE_CONTENTS_FIELD", []);
	123	+ // 스마트에디터의 iframe에 있는 내용을 textarea로.
	124	+ this.post.post_content = document.getElementById("smart").value;
	125	+ console.log(document.getElementById("smart").value);
	126	+ console.log(this.post.post_content);
	127	+ console.log(COMMON_UTIL.isEmpty(this.post.post_title));
	128	+
	129	+ if (COMMON_UTIL.isEmpty(this.post.post_title) === false) {
	130	+ alert("제목을 입력해주세요.");
	131	+ return false;
	132	+ }
	133	+
	134	+ if (COMMON_UTIL.isEmpty(this.post.post_content) === false \|\| this.post.post_content === "<p><br></p>") {
	135	+ alert("내용을 입력해주세요.");
	136	+ return false;
	137	+ }
	138	+
	139	+ this.postInsert();
54	140	},
	141	+
	142	+ //파일업로드
55	143	fileUpload: function () {
56	144	this.fileList[this.filecount] = this.$refs.fileInput.files[0]
57	145	this.filecount += 1
58	146	console.log("file", this.fileList);
59	147	},
	148	+
	149	+ //파일업로드 중 업로드 파일 삭제
	150	+ fileRemove(idx) {
	151	+ this.fileList.splice(idx, 1);
	152	+ console.log("reMove_file", this.fileList);
	153	+ this.filecount = this.fileList.length;
	154	+ },
	155	+
	156	+ //게시글 리스트로 이동
	157	+ postSelectListPage: function () {
	158	+ this.$router.push({ path: '/adm/noticeSelectList.page' });
	159	+ },
	160	+
	161	+ // 파일 업로드 커스텀을 위한 함수
	162	+ openFileInput: function () {
	163	+ this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭
	164	+ }
60	165	},
61	166	watch: {},
62	167	computed: {},

...	...	@@ -65,6 +65,7 @@
65	65	perPage: 10,
66	66	searchType: null,
67	67	searchText: null,
	68	+ bbs_id : '2'
68	69	},
69	70	postList: [],
70	71	postListCount: 0,

...	...	@@ -162,7 +162,20 @@
162	162
163	163	//게시글 상세조회 페이지로 이동
164	164	postSelectOnePage: function (item) {
165		- this.$router.push({ path: '/DataDtali.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
	165	+ const vm = this;
	166	+
	167	+ axios({
	168	+ url: '/post/postViewCount.json',
	169	+ method: 'post',
	170	+ hearder: {
	171	+ 'Content-Type': "application/json; charset=UTF-8",
	172	+ },
	173	+ data: { 'post_id': item.post_id }
	174	+ }).then(function (response) {
	175	+ vm.$router.push({ path: '/DataDtali.page', query: { 'post_id': item.post_id, 'file_id': item.file_id } });
	176	+ }).catch(function (error) {
	177	+ console.log("서버오류");
	178	+ })
166	179	},
167	180	},
168	181	watch: {

...	...	@@ -84,11 +84,6 @@
84	84	route: useRoute(),
85	85	};
86	86	},
87		- mounted() {
88		- this.postViewCount();
89		- this.postSelectOne();
90		-
91		- },
92	87	methods: {
93	88	goBack() {
94	89	this.$router.go(-1);
...	...	@@ -113,22 +108,6 @@
113	108	}).catch(function (error) {
114	109	console.log("error - ", error)
115	110	alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요.");
116		- })
117		- },
118		-
119		- postViewCount: function () {
120		- const vm = this;
121		- axios({
122		- url: '/post/postViewCount.json',
123		- method: 'post',
124		- hearder: {
125		- 'Content-Type': "application/json; charset=UTF-8",
126		- },
127		- data: { 'post_id': vm.route.query.post_id }
128		- }).then(function (response) {
129		-
130		- }).catch(function (error) {
131		- console.log("서버오류");
132	111	})
133	112	},
134	113
...	...	@@ -193,6 +172,10 @@
193	172	yyyymmdd: function (date) {
194	173	return COMMON_UTIL.yyyymmdd(date);
195	174	},
196		- }
	175	+ },
	176	+
	177	+ mounted() {
	178	+ this.postSelectOne();
	179	+ },
197	180	}
198	181	</script>

...	...	@@ -40,12 +40,12 @@
40	40	<img :src="'http://localhost:8080'+item.file_path +'\\' + item.file_nm + '.' + item.file_extn_nm" width="20px" alt="">
41	41	<p>{{ company_info }}</p>
42	42	<div class="matchingbox-1">
43		- <p v-if="item.pick_yn === 0" @click.stop="pickModal(item)"><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> {{ item.company_pick_cnt }} </p>
	43	+ <p v-if="!item.pick_yn" @click.stop="pickModal(item)"><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> {{ item.company_pick_cnt }} </p>
44	44	<p v-else @click.stop="pickCancelModal(item)"><i class="fa fa-heart fa-lg" style="color: #d41515;"></i> {{ item.company_pick_cnt }} </p>
45	45	<p class="matchingbox-text">조회수 <span>{{ item.view_cnt }}</span></p>
46	46	</div>
47	47	<div class="matching-span">
48		- <span v-for="(item, idx) in keywordList" :key="idx">#{{ item }}</span>
	48	+ <span v-for="(item, idx1) in keywordList[idx]" :key="idx1">#{{ item }}</span>
49	49	</div>
50	50	</div>
51	51	</div>
...	...	@@ -64,10 +64,10 @@
64	64	<div>
65	65	<h5>{{ item.company_nm }}</h5>
66	66	<div class="matching-span">
67		- <span v-for="(item, idx) in keywordList" :key="idx">#{{ item }}</span>
68		- </div>
	67	+ <span v-for="(item, idx1) in keywordList[idx]" :key="idx1"> #{{ item }}</span>
	68	+ </div>
69	69	<div class="matchingbox-2">
70		- <p v-if="item.pick_yn === 0" @click.stop="pickModal(item)"><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> {{ item.company_pick_cnt }} </p>
	70	+ <p v-if="!item.pick_yn" @click.stop="pickModal(item)"><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> {{ item.company_pick_cnt }} </p>
71	71	<p v-else @click.stop="pickCancelModal(item)"><i class="fa fa-heart fa-lg" style="color: #d41515;"></i> {{ item.company_pick_cnt }} </p>
72	72	<p>조회수 <span>{{ item.view_cnt }}</span> </p>
73	73	</div>
...	...	@@ -96,6 +96,7 @@
96	96	},
97	97	bestList:[],
98	98	companyList:[],
	99	+ keyword:[],
99	100	keywordList:[],
100	101	companyTop6List:[],
101	102	companyListCount: 0,
...	...	@@ -122,11 +123,12 @@
122	123	vm.companyTop6List = response.data.companyTop6;
123	124
124	125	for( let i = 0; i < vm.companyList.length; i++) {
125		- vm.keywordList = vm.companyList[i].keyword.split('#');
	126	+ vm.keyword = vm.companyList[i].keyword.split('#',4);
	127	+ vm.keyword.splice(0, 1)
	128	+ vm.keywordList[i] = vm.keyword
	129	+ console.log("keyword", vm.keywordList);
126	130	}
127	131
128		- }).then(function() {
129		- vm.keywordList.splice(0, 1);
130	132	}).catch(function(error) {
131	133	console.log('error - ', error)
132	134	alert('기업 목록 조회 오류, 관리자에게 문의하세요.');
...	...	@@ -189,7 +191,20 @@
189	191	},
190	192
191	193	companySelectOnePage: function(item) {
192		- this.$router.push({ path: '/MatchingOne.page', query: {'company_id': item.company_id}});
	194	+ const vm = this;
	195	+
	196	+ axios({
	197	+ url: '/matching/companyViewCountAdd.json',
	198	+ method: 'post',
	199	+ hearder: {
	200	+ 'Content-Type': "application/json; charset=UTF-8",
	201	+ },
	202	+ data: { 'company_id': item.company_id }
	203	+ }).then(function (response) {
	204	+ vm.$router.push({ path: '/MatchingOne.page', query: {'company_id': item.company_id}});
	205	+ }).catch(function (error) {
	206	+ console.log("서버오류");
	207	+ })
193	208	}
194	209	},
195	210	watch: {

...	...	@@ -32,9 +32,8 @@
32	32	</div>
33	33	<div class="matDtail-sec">
34	34	<section class="mat-sec1">
35		- <h2>(주)지학사 <span>(1등급)</span></h2>
36		- <div>
37		- <input type="file" id="dtaildown" style="display: none;">
	35	+ <h2> {{ company.company_nm }}<span>(BEST기업)</span></h2>
	36	+ <div @click="downloadProfile()">
38	37	<label for="dtaildown">회사소개서 다운로드</label>
39	38	<i class="fa-solid fa-download" style="color: #ffffff;"></i>
40	39	</div>
...	...	@@ -43,20 +42,15 @@
43	42	<!-- /상세내용 -->
44	43	<section class="mat-sec2">
45	44	<div>
46		- <img src="../../../../resources/jpg/matching-img.png" alt="">
47		- </div>
48		- <div>
49		- <p>교과서
50		- 지학사는 1956년 창립이후 공교육의 핵심인 교과용 도서 개발을 근간으로 초중고 학생들을 위한 국정,검정,인정 전 과목 교과서를 발행하고 있습니다.
51		- </p>
	45	+ <div id="viewer" ref="viewer" class="viewer"></div>
52	46	</div>
53	47	<div class="mat-sec2-end">
54	48	<p>
55	49
56	50	<i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i>
57		- <span @click="openModal2">366666개</span>의 기업이 pick했습니다!
	51	+ <span id="pickBtn" @click="openPickListMadal">{{ company.company_pick_cnt }}개</span>의 기업이 pick했습니다!
58	52	</p>
59		- <p><span>조회수</span>45454</p>
	53	+ <p><span>조회수</span>{{ company.view_cnt }}</p>
60	54
61	55	</div>
62	56	</section>
...	...	@@ -68,30 +62,56 @@
68	62	</div>
69	63
70	64
71		- <div v-show="showModal2" class="join-modal2">
	65	+ <div v-show="pickModal" class="join-modal2">
72	66	<div class="mat-modal">
73	67
74	68	<h2>우리기업을 PICK한 기업</h2>
75		- <button class="join-text-bt3" @click="closeModal2">X</button>
	69	+ <button class="join-text-bt3" @click="closePickListMadal">X</button>
76	70	</div>
77		- <table class="mat-modal-img">
78		- <td><img src="../../../../resources/jpg/logo/edutech.png" alt=""></td>
79		- <td v-for="item in items" :key="item.id">
80		- <!-- <img :src="item.image" alt="" />/ -->
81		- {{ item.text }}
	71	+ <table class="mat-modal-img" v-for="(item, idx) in pickSelectList" :key="idx">
	72	+ <td><img :src="'http://localhost:8080'+item.file_path +'\\' + item.file_nm + '.' + item.file_extn_nm"></td>
	73	+ <td >
	74	+ {{ item.company_nm }}
82	75	</td>
83		- <td><button :style="{ backgroundColor: buttonColor }" @click="accept">
84		- {{ buttonText }}
85		- </button></td>
	76	+ <td>
	77	+ <button v-if="item.pick_yn" disabled :style="{ backgroundColor: '#ccc' }">완료</button>
	78	+ <button v-else :style="{ backgroundColor: '#3f87f7' }" @click="pick(item)"> 수락</button>
	79	+ </td>
86	80	</table>
87	81	</div>
88	82	</template>
89	83
90	84	<script>
	85	+import axios from 'axios';
	86	+import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
	87	+import { useRoute } from 'vue-router';
	88	+import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
	89	+import '@toast-ui/editor/dist/toastui-editor.css';
	90	+import '@toast-ui/editor/dist/i18n/ko-kr';
	91	+import * as FileSaver from 'file-saver';
	92	+
91	93	export default {
92	94	data() {
93	95	return {
94		- showModal2: false,
	96	+ company: {
	97	+ company_id: null,
	98	+ company_nm: null,
	99	+ company_info: null,
	100	+ company_point: null,
	101	+ file_id: null,
	102	+ user_id: null,
	103	+ keyword: null,
	104	+ company_pick_cnt: null,
	105	+ company_technology: null,
	106	+ company_service: null,
	107	+ view_cnt: null,
	108	+ file_path: null,
	109	+ file_nm: null,
	110	+ file_extn_nm: null,
	111	+ },
	112	+
	113	+ pickSelectList:[],
	114	+ pickModal: false,
95	115	isAccepted: false,
96	116	buttonText: '수락',
97	117	buttonColor: '#3f87f7',
...	...	@@ -99,25 +119,141 @@
99	119
100	120	{ id: 2, text: "oo출판사" },
101	121
102		-
103	122	],
104		- imagePath1: require("../../../../resources/jpg/fille.png"),
	123	+ route: useRoute(),
105	124	}
106	125	},
107	126	methods: {
108		- goToPage2() {
109		- this.$router.push('/Matching.page')
	127	+
	128	+ companySelectOne: function() {
	129	+ const vm = this;
	130	+
	131	+ axios({
	132	+ url: '/matching/companySelectOne.json',
	133	+ method: 'post',
	134	+ hearder: {
	135	+ 'Content-Type': "application/json; charset=UTF-8",
	136	+ },
	137	+ data: { 'company_id': vm.route.query.company_id}
	138	+ }).then(function (response) {
	139	+ vm.company = response.data;
	140	+ vm.userCompanyId = response.data.userCompanyId;
	141	+ vm.getViewer(vm.company.company_info);
	142	+ }).catch(function (error) {
	143	+ console.log("error - ", error)
	144	+ alert("기업 상세보기 조회 오류, 관리자에게 문의하세요.");
	145	+ })
110	146	},
111		- openModal2() {
112		- this.showModal2 = true;
	147	+
	148	+ getViewer(data) {
	149	+ this.viewer = new Viewer({
	150	+ el: this.$refs.viewer,
	151	+ initialEditType: 'wysiwyg',
	152	+ previewStyle: 'vertical',
	153	+ initialValue: data,
	154	+ customHTMLRenderer: {
	155	+ htmlBlock: {
	156	+ iframe(node) {
	157	+ return [
	158	+ { type: 'openTag', tagName: 'iframe', outerNewLine: true, attributes: node.attrs },
	159	+ { type: 'html', content: node.childrenHTML },
	160	+ { type: 'closeTag', tagName: 'iframe', outerNewLine: true },
	161	+ ];
	162	+ },
	163	+ }
	164	+ },
	165	+ });
113	166	},
114		- closeModal2() {
115		- this.showModal2 = false;
	167	+
	168	+ downloadProfile: function () {
	169	+ const vm = this;
	170	+ let path = vm.company.file_path + '\\' + vm.company.file_nm + '.' + vm.company.file_extn_nm;
	171	+ axios({
	172	+ url: '/file/downloadFile.json',
	173	+ method: 'post',
	174	+ headers: {
	175	+ "Content-Type": "application/x-www-form-urlencoded",
	176	+ },
	177	+ responseType: 'blob',
	178	+ data: `file_path=${encodeURIComponent(path)}`
	179	+ }).then((response) => {
	180	+ const blob = new Blob([response.data]);
	181	+
	182	+ const isSafari = /^((?!chrome\|android).)*safari/i.test(navigator.userAgent);
	183	+
	184	+ if (isSafari) {
	185	+ FileSaver.saveAs(blob, vm.company.real_file_nm);
	186	+ } else {
	187	+ const url = window.URL.createObjectURL(blob);
	188	+ const a = document.createElement('a');
	189	+ a.style.display = 'none';
	190	+ a.href = url;
	191	+ a.download = vm.company.real_file_nm;
	192	+ document.body.appendChild(a);
	193	+ a.click();
	194	+ window.URL.revokeObjectURL(url);
	195	+ }
	196	+
	197	+ this.$router.go(0);
	198	+
	199	+ }).catch(function (error) {
	200	+ console.log('error - ', error)
	201	+ alert('에러발생');
	202	+ });
116	203	},
	204	+
	205	+ openPickListMadal() {
	206	+ const vm = this;
	207	+ if(this.company.company_id === this.userCompanyId) {
	208	+ this.pickModal = true;
	209	+
	210	+ axios({
	211	+ url: '/matching/pickSelectList.json',
	212	+ method: 'post',
	213	+ hearder: {
	214	+ 'Content-Type': "application/json; charset=UTF-8",
	215	+ },
	216	+ data: vm.company
	217	+ }).then(function (response) {
	218	+ vm.pickSelectList = response.data;
	219	+ }).catch(function (error) {
	220	+ console.log("error - ", error)
	221	+ alert("PICK 목록 조회 오류, 관리자에게 문의하세요.");
	222	+ })
	223	+ }
	224	+ },
	225	+
	226	+ pick: function(item) {
	227	+ const vm = this;
	228	+
	229	+ axios({
	230	+ url: '/matching/pick.json',
	231	+ method: 'post',
	232	+ hearder: {
	233	+ 'Content-Type': "application/json; charset=UTF-8",
	234	+ },
	235	+ data: item
	236	+ }).then(function(response) {
	237	+ alert(response.data);
	238	+ vm.openPickListMadal();
	239	+ }).catch(function(error) {
	240	+ console.log('error - ', error)
	241	+ alert('기업 목록 조회 오류, 관리자에게 문의하세요.');
	242	+ })
	243	+ },
	244	+
	245	+ closePickListMadal() {
	246	+ this.pickModal = false;
	247	+ },
	248	+
117	249	accept() {
118	250	this.isAccepted = !this.isAccepted;
119	251	this.buttonText = this.isAccepted ? '수락완료' : '수락';
120	252	this.buttonColor = this.isAccepted ? '#ccc' : '#3f87f7';
	253	+ },
	254	+
	255	+ goToPage2() {
	256	+ this.$router.push('/Matching.page')
121	257	},
122	258	},
123	259	watch: {
...	...	@@ -128,6 +264,7 @@
128	264	},
129	265	mounted() {
130	266	console.log('Matching mounted');
	267	+ this.companySelectOne();
131	268	}
132	269	}
133	270	</script>

Delete comment