<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 style="width:10%">제목</th> <td><input type="text" name="" id="newsTitle" v-model="popup.popup_title" ref="popup_title"> </td> </tr> <tr> <th style="width:10%">게시기간</th> <td> <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 style="width:10%">공지사항 등록</th> <td><input type="checkbox" name="" id="" v-model="isNotice"><label>사용</label></td> </tr> <tr> <th style="width:10%">링크주소</th> <td><input type="text" name="" id="newsTitle" v-model="popup.shortcuts_url"></td> </tr> <!-- <tr> <th style="width:10%">팝업 비율 설정</th> <td> <div class="flex-start"> <div> <input type="radio" name="popupSize" id="vertical" style="display:none" /><label for="vertical" class="category">세로비율</label> </div> <div> <input type="radio" name="popupSize" id="horizontal" style="display:none" /><label for="horizontal" class="category">가로비율</label> </div> <div> <input type="radio" name="popupSize" id="square" style="display:none" /><label for="square" class="category">정방향비율</label> </div> </div> </td> </tr> --> <!-- <tr class="size-zone"> <th>팝업 크기</th> <td><input type="text" name="" id="" placeholder="너비" class="half-input" v-model="popup.popup_width" ref="popup_width"/><span>픽셀</span></td> <td><input type="text" name="" id="" placeholder="높이" class="half-input" v-model="popup.popup_height" ref="popup_height"/><span>픽셀</span></td> </tr> --> <tr> <th style="width:10%">팝업내용</th> <td> <div class="popup-preview"> <img v-if="popupPreview" :src="popupPreview" style="max-height: 100%;"/> </div> </td> </tr> <tr> <th style="width:10%">팝업 파일</th> <td> <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="popupInsert()">등록</button> </div> </div> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { popup: { popup_width: null, popup_height: null, start_dt: null, end_dt: null, popup_title: null, shortcuts_url: null, notice_yn: 'N', }, file: {}, popupPreview: null, isNotice: false, }; }, methods: { //게시글 및 첨부파일 등록 popupInsert: function () { // 유효성 검사 if (!this.validationCheck()) { return; } const vm = this; let formData = new FormData(); formData.append('file', vm.file); formData.append("popup", JSON.stringify(vm.popup)); axios({ url: '/popup/popupInsert.file', method: 'post', headers: { 'Content-Type': 'multipart/form-data', }, data: formData }).then(function (response) { console.log("popupInsert - response : ", response); let result = response.data; if (result > 0) { alert("등록을 완료하였습니다."); vm.popupSelectListPage() } else { alert("등록 실패, 관리자에게 문의해주세요."); } }).catch(function (error) { console.log("popupInsert - 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; // } //팝업 파일 if (this.file.size === undefined) { alert('팝업파일 등록은 필수입니다.') 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' }); }, // 파일 업로드 커스텀을 위한 함수 openFileInput: function () { this.$refs.fileInput.click(); // 파일 업로드 input 요소를 클릭 }, }, watch: { isNotice(newVal) { this.popup.notice_yn = newVal ? 'Y' : 'N' console.log("this.popup.notice_yn", this.popup.notice_yn) } }, computed: {}, components: {}, mounted() { console.log("popupInsert mounted") } }; </script>