Code - yjryu/KERIS

<template> <div class="notice-wrap"> <div class="content-box"> <div class="title-wrap"> <div class="flex-start"> <img src="../../../../resources/jpg/popup.png" alt="팝업 아이콘" class="title-icon"> <h2 class="main-title">팝업관리</h2> </div> </div> <div class="content-wrap NoticeInsert"> <table class="insert-table"> <tbody> <tr> <th>제목</th> <td colspan="2"><input type="text" name="" id="newsTitle" v-model="popup.popup_title" ref="popup_title"></td> </tr> <tr> <th>게시기간</th> <td colspan="2"><div class="period"><input type="date" name="" id="" v-model="popup.start_dt" ref="start_dt"><span>~</span><input type="date" name="" id="" v-model="popup.end_dt" ref="end_dt"></div></td> </tr> <tr> <th>공지사항 등록</th> <td colspan="2"><input type="checkbox" name="" id="" v-model="isNotice"><label>사용</label></td> </tr> <tr> <th>링크주소</th> <td colspan="2"><input type="text" name="" id="newsTitle" v-model="popup.shortcuts_url"></td> </tr>  <tr> <th>팝업내용</th> <td colspan="2"> <img v-if="popupPreview" :src="popupPreview" /> <img v-else :src="'http://localhost:8080' + file.file_path + '/' + file.file_nm + '.' + file.file_extn_nm" alt="popupImage" /> </td> </tr> <tr> <th>팝업 파일</th> <td colspan="2"> <div class="btn-upload" @click="openFileInput">파일 업로드</div> <input type="file" name="file" id="file" ref="fileInput" style="display: none" @change="popupImageUpload"> </td> </tr> </tbody> </table> <div class="btn-wrap"> <button class="dark-gray-btn" @click="popupSelectListPage()">이전</button> <button class="blue-btn" @click="popupUpdate()">수정</button> </div> </div> </div> </div> </template> <script> import axios from 'axios'; import { useRoute } from 'vue-router'; export default { data() { return { popup: { popup_id: null, popup_width: null, popup_height: null, start_dt: null, end_dt: null, popup_title: null, reg_dt: null, mdfcn_dt:null, file_id: null, shortcuts_yn: null, shortcuts_url: null, regr_id: null, mdfr_id: null, notice_yn: 'N', }, file:{}, oldFile:{}, isNotice: false, route: useRoute(), }; }, methods: { //게시글 및 첨부파일 등록 popupUpdate: function () { if(!this.validationCheck()){ return; } const vm = this; let formData = new FormData(); if (vm.file !== vm.oldFile) { formData.append('file', vm.file); formData.append('deleteFile',JSON.stringify(vm.oldFile)) formData.append("popup", JSON.stringify(vm.popup)); axios({ url: '/popup/popupFileUpdate.file', method: 'post', headers: { 'Content-Type': 'multipart/form-data', }, data: formData }).then(function (response) { let result = response.data; if (result > 0) { alert("수정을 완료하였습니다."); vm.popupSelectOnePage() } else { alert("수정 실패, 관리자에게 문의해주세요."); } }).catch(function (error) { console.log("popupUpdate - error : ", error); alert("수정 오류, 관리자에게 문의해주세요."); }); } else { axios({ url: '/popup/popupUpdate.json', method: 'post', headers: { 'Content-Type': "application/json; charset=UTF-8", }, data: vm.popup }).then(function (response) { let result = response.data; if (result > 0) { alert("수정을 완료하였습니다."); vm.popupSelectOnePage() } else { alert("수정 실패, 관리자에게 문의해주세요."); } }).catch(function (error) { console.log("popupUpdate - error : ", error); alert("수정 오류, 관리자에게 문의해주세요."); }); } }, //등록 유효성 검사 validationCheck: function () { //팝업제목 if(!this.popup.popup_title){ alert("제목을 입력하세요."); this.$refs.popup_title.focus(); return false; } //게시기간 시작일 if(!this.popup.start_dt){ alert("게시기간을 선택하세요."); this.$refs.start_dt.focus(); return false; } //게시기간 종료일 if(!this.popup.end_dt){ alert("게시기간을 선택하세요."); this.$refs.end_dt.focus() return false; } //팝업 넓이 let sizeRegex = /^[0-9]*$/; if(!this.popup.popup_width){ alert("팝업의 너비를 입력하세요.") this.$refs.popup_width.focus() return false; } else if(!sizeRegex.test(this.popup.popup_width)){ alert("팝업의 너비에는 숫자만 입력가능합니다.") this.$refs.popup_width.focus() return false; } //팝업 높이 if(!this.popup.popup_height){ alert("팝업의 높이를 입력하세요.") this.$refs.popup_height.focus() return false; } else if(!sizeRegex.test(this.popup.popup_height)){ alert("팝업의 높이에는 숫자만 입력가능합니다.") this.$refs.popup_height.focus() return false; } return true; }, //팝업 이미지 등록 popupImageUpload: function (e) { const vm = this; const file = e.target.files[0]; var reader = new FileReader(); reader.onload = function (e) { var img = new Image(); img.src = reader.result; vm.popupPreview = reader.result; vm.file = file; }; reader.readAsDataURL(file); }, //게시글 리스트로 이동 popupSelectListPage: function () { this.$router.push({ path: '/adm/popUpSelectList.page' }); }, //게시글로 이동 popupSelectOnePage: function () { this.$router.push({ path: '/adm/popUpSelectOne.page' , query: { 'post_id': this.popup.post_id, 'file_id': this.popup.file_id }}) }, // 파일 업로드 커스텀을 위한 함수 openFileInput: function () { this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭 }, popupSelectOne: function () { const vm = this; axios({ url: '/popup/popupSelectOne.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 } }).then(function (response) { vm.popup = response.data.popupSelectOne.post; vm.file = response.data.selectFileList[0]; vm.oldFile = response.data.selectFileList[0]; }).catch(function (error) { console.log("error - ", error) alert("게시글 상세보기 조회 오류, 관리자에게 문의하세요."); }) }, }, watch: { isNotice(newVal){ this.popup.notice_yn = newVal ? 'Y' : 'N' }, }, computed: {}, components: {}, mounted() { this.popupSelectOne(); } }; </script>