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="content admin-style">
<div class="admin-page-title point-font2 mb30">
<p>팝업 관리</p>
</div>
<details open class="form-table-style mb30">
<summary class="point-font2">
<p class="summary-style pl10">기본정보</p>
</summary>
<div class="pt10 pb10">
<table class="form-table">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tr>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title point-font2 mb10">제목</label>
<input type="text" class="full-input" v-model="popup['popupTtl']" ref="popupTtl"
placeholder="제목을 입력하세요." />
</div>
</td>
<td>
<div class="gd-12 pr0">
<label for="" class="form-title point-font2 mb10">게시일</label>
<div class="flex justify-start align-center no-gutters">
<div class="gd-3">
<input type="date" v-model="popup['popupBgngDt']" ref="popupBgngDt" time-picker-inline placeholder="시작일" >
</div>
<div class="pd10">-</div>
<div class="gd-3">
<input type="date" v-model="popup['popupEndDt']" ref="popupEndDt" time-picker-inline placeholder="종료일" >
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title point-font2 mb10">
팝업크기
</label>
<div class="flex align-center">
<div class="gd-3 pl0">
<select class="full-input" v-model="popup['popupSizeType']">
<option value="fixed">고정값</option>
<option value="custom">사용자지정</option>
</select>
</div>
<div class="gd-9 pr0">
<!-- 고정값 -->
<div v-if="popup['popupSizeType'] == 'fixed'" class="flex align-center no-gutters">
<div v-for="(popupSize, index) of popupSizes" :key="index" class="gd-3">
<input type="radio" :id="popupSize['id']" class="mr5" v-model="popup['popupSize']"
:value="popupSize['id']" ref="popupSize" />
<label :for="popupSize['id']">
{{ popupSize["wdthLen"] }}X{{ popupSize["vrtcLen"] }}
</label>
</div>
</div>
<!-- 사용자 지정 -->
<div v-if="popup['popupSizeType'] == 'custom'" class="flex align-center no-gutters">
<div class="gd-5">
<input type="text" class="full-input" v-model="popup['wdthLen']" placeholder="가로 길이를 입력하세요." />
</div>
<div class="pd10">x</div>
<div class="gd-5">
<input type="text" class="full-input" v-model="popup['vrtcLen']" placeholder="세로 길이를 입력하세요." />
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="gd-12 pr0">
<label for="" class="form-title point-font2 mb10">
업로드 형식
</label>
<div class="flex align-center no-gutters">
<div class="gd-5">
<input type="radio" id="image" class="mr5" v-model="popup['popupTypeCd']" value="image" />
<label for="image">이미지</label>
</div>
<div class="gd-5">
<input type="radio" id="video" class="mr5" v-model="popup['popupTypeCd']" value="video" />
<label for="video">영상</label>
</div>
</div>
</div>
</td>
</tr>
<template v-if="popup['popupTypeCd'] == 'image'">
<tr>
<td colspan="2">
<div class="gd-12 pl0 pr0">
<label for="" class="form-title point-font2 mb10">
이미지 첨부파일
</label>
<div class="flex align-center">
<div class="gd-10 pl0">
<div class="filebox">
<input v-if="fileList.length < 1" class="upload-name full-input" placeholder="첨부파일이 없습니다."
disabled />
<div v-else v-for="(file, index) of this.fileList" :key="index"
class="flex justify-between align-center border pl10 pr10" style="height: 100%">
<p v-if="file['fileId'] != null">
{{ file["fileNm"] }}.{{ file["extnNm"] }}
</p>
<p v-else>{{ file.name }}</p>
<button class="icon-btn pd0" @click="fnFileDelete(file, index)">
<svg-icon type="mdi" :width="15" :height="15" :path="path"></svg-icon>
</button>
</div>
</div>
</div>
<div class="gd-2 pl0 pr0">
<label for="file" class="large-btn blue-border-btn text-ct">
파일찾기
</label>
<input type="file" id="file" ref="file" @change="fnFileInsert" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="gd-12 pl0 pr0">
<label for="" class="form-title point-font2 mb10">
링크 URL
</label>
<input type="text" class="full-input" placeholder="이미지 주소를 입력하세요." v-model="popup['linkUrlAddr']"
:disabled="popup['popupTypeCd'] != 'image'" ref="linkUrlAddr" />
</div>
</td>
</tr>
</template>
<tr v-if="popup['popupTypeCd'] == 'video'">
<td colspan="2">
<div class="gd-12 pl0 pr0">
<label for="" class="form-title point-font2 mb10">
동영상 URL
</label>
<input type="text" class="full-input" placeholder="동영상 주소를 입력하세요." v-model="popup['vdoUrlAddr']"
:disabled="popup['popupTypeCd'] != 'video'" ref="vdoUrlAddr" />
</div>
</td>
</tr>
<tr>
<td>
<div class="gd-12 pl0">
<label for="" class="form-title point-font2 mb10">순서</label>
<select class="full-input" v-model="popup['popupSeq']" ref="popupSeq">
<option value="0">순서를 선택하세요.</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</td>
<td>
</td>
</tr>
</table>
</div>
</details>
<div class="flex justify-end align-center no-gutters">
<div class="gd-1 mr10">
<button class="large-btn blue-btn" @click="fnUpsert">
<span v-if="this.$route.query.pageId == null">저장</span>
<span v-else>수정</span>
</button>
</div>
<div class="gd-1">
<button class="large-btn gray-btn" @click="fnCancel">취소</button>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import { mdiClose } from "@mdi/js";
// API
import { detailProc } from "../../../../resources/api/popup";
export default {
data() {
return {
path: mdiClose,
file: null,
// 팝업 객체
popup: {},
popupSizes: [
{ id: "PS1", wdthLen: 300, vrtcLen: 300 },
{ id: "PS2", wdthLen: 500, vrtcLen: 700 },
{ id: "PS3", wdthLen: 700, vrtcLen: 1000 },
{ id: "PS4", wdthLen: 1200, vrtcLen: 850 },
],
// 파일 업로드
files: null,
fileList: [],
deleteFileList: [],
codeList: [], // 팝업 노출 페이지
};
},
created() {
this.fnViewDetail();
},
methods: {
// 조회(상세)
fnViewDetail() {
let data = {
popupId: this.$route.query.pageId,
};
this.axiosViewDetail(data);
},
// 등록 및 수정
fnUpsert() {
// 유효성 검사
if (this.valiadtion() == false) {
return;
}
// 팝업 크기 삽입
for (let popupSize of this.popupSizes) {
if (popupSize["id"] == this.popup["popupSize"]) {
this.popup["wdthLen"] = popupSize["wdthLen"];
this.popup["vrtcLen"] = popupSize["vrtcLen"];
}
}
this.popup["popupBgngDt"] = this.dateFormat(new Date(this.popup["popupBgngDt"]));
this.popup["popupEndDt"] = this.dateFormat(new Date(this.popup["popupEndDt"]));
var formData = new FormData();
if (this.popup["popupId"] != null) {
this.popup["deleteFileList"] = this.deleteFileList;
}
const paramsToBlob = new Blob([JSON.stringify(this.popup)], {
type: "application/json; charset=UTF-8",
});
formData.append("popupVO", paramsToBlob);
if (this.fileList != null && this.fileList.length > 0) {
for (const file of this.fileList) {
if (file["fileId"] == null) {
formData.append("multipartFileList", file);
}
}
}
// URL 삽입
let url = null;
if (this.popup["popupId"] != null) {
url = "/admin/popup/updateProc.file";
} else {
url = "/admin/popup/insertProc.file";
}
this.axiosUpsert(url, formData);
},
// 취소
fnCancel() {
if (!confirm(this.$getCmmnMessage("cnf008","작성을 "))) return;
this.$router.push({
name: "admPopupManagementSelectList",
});
},
// 첨부파일 등록
fnFileInsert() {
this.files = null;
this.fileList = [];
this.files = this.$refs.file.files;
this.fileList = Array.from(this.files);
},
// 첨부파일 삭제
fnFileDelete(file, index) {
if (file["fileId"] != null) {
this.deleteFileList.push(file);
}
this.files = null;
this.fileList = [];
this.$refs.file.value = "";
},
// 날짜 형식 변경
dateFormat(date) {
return (
date.getFullYear() +
"-" +
(date.getMonth() + 1 < 9
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) +
"-" +
(date.getDate() < 9 ? "0" + date.getDate() : date.getDate())
);
},
// 유효성 검사
valiadtion() {
if (this.popup["popupTtl"] == null || this.popup["popupTtl"] == "") {
alert("제목을 입력해주세요.");
this.$refs.popupTtl.focus();
return false;
}
if (this.popup["popupBgngDt"] == null || this.popup["popupBgngDt"] == "") {
alert("시작일을 입력해주세요.");
this.$refs.popupBgngDt.focus();
return false;
}
if (this.popup["popupEndDt"] == null || this.popup["popupEndDt"] == "") {
alert("종료일을 입력해주세요.");
this.$refs.popupEndDt.focus();
return false;
}
if (
this.popup["popupSizeType"] == "null" ||
this.popup["popupSizeType"] == ""
) {
alert("팝업 크기를 선택해주세요.");
return false;
}
if (this.popup["popupSizeType"] == "fixed") {
if (this.popup["popupSize"] == null || this.popup["popupSize"] == "") {
alert("팝업 크기를 선택해주세요.");
return false;
}
} else if (this.popup["popupSizeType"] == "custom") {
if (this.popup["wdthLen"] == null || this.popup["wdthLen"] == "") {
alert("팝업 가로 크기를 선택해주세요.");
return false;
}
if (this.popup["vrtcLen"] == null || this.popup["vrtcLen"] == "") {
alert("팝업 세로 크기를 선택해주세요.");
return false;
}
}
if (this.popup["popupTypeCd"] == null || this.popup["popupTypeCd"] == "") {
alert("업로드 형식을 선택해주세요.");
return false;
}
if (this.popup["popupTypeCd"] == "image") {
if (this.fileList.length < 1) {
alert("이미지 첨부파일을 선택해주세요.");
return false;
}
if (this.popup["linkUrlAddr"] == null || this.popup["linkUrlAddr"] == "") {
alert("링크 URL을 선택해주세요.");
this.$refs.linkUrlAddr.focus();
return false;
}
} else if (this.popup["popupTypeCd"] == "video") {
if (this.popup["vdoUrlAddr"] == null || this.popup["vdoUrlAddr"] == "") {
alert("동영상 URL을 선택해주세요.");
this.$refs.vdoUrlAddr.focus();
return false;
}
}
if (this.popup["popupSeq"] == null || this.popup["popupSeq"] == "") {
alert("순서를 선택해주세요.");
this.$refs.popupSeq.focus();
return false;
}
if (this.popup["popupUseYn"] == null || this.popup["popupUseYn"] == "") {
alert("사용 유무를 선택해주세요.");
return false;
}
},
//─────axios─────┐
// 상세 조회
async axiosViewDetail(data) {
try {
const response = await detailProc(data);
this.popup = response.data["data"]["popupVO"];
this.codeList = response.data["data"]["codeList"];
this.fileList = response.data["data"]["fileList"];
if (this.popup["wdthLen"] == 0 || this.popup["vrtcLen"] == 0) {
this.popup["wdthLen"] = null;
this.popup["vrtcLen"] = null;
}
} catch (error) {
// alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
alert(this.$getCmmnMessage('err005'));
}
},
// 등록 및 수정
axiosUpsert(url, formData) {
axios({
url: url,
method: "post",
headers: {
"Content-Type": "multipart/form-data; charset=UTF-8",
Authorization: this.$store.state.authorization,
},
data: formData,
})
.then((response) => {
alert(response.data["message"]);
if (response.status == 200) {
this.$router.push({
name: "admPopupManagementSelectOne",
query: {
pageId: this.popup["popupId"]
? this.popup["popupId"]
: response.data.data["popupId"],
},
});
}
})
.catch((error) => {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
// alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
alert(this.$getCmmnMessage('err005'));
}
});
},
//─────axios─────┘
},
watch: {
// 팝업 크기 셀렉트 박스 초기화
"popup.popupSizeType"() {
if (this.popup["popupSizeType"] == "fixed") {
this.popup["wdthLen"] = null;
this.popup["vrtcLen"] = null;
}
if (this.popup["popupSizeType"] == "custom") {
this.popup["popupSize"] = "PS1";
}
},
// 업로드 형식 라디오 초기화
"popup.popupTypeCd"(oldValue, newValue) {
if (oldValue == "image" && newValue == "video") {
this.popup["vdoUrlAddr"] = null;
this.popup["linkUrlAddr"] = null;
}
if (oldValue == "video" && newValue == "image") {
this.popup["vdoUrlAddr"] = null;
this.popup["linkUrlAddr"] = null;
// 첨부파일 일괄 삭제
if (this.fileList.length > 0) {
for (let file of this.fileList) {
if (file["fileId"] != null) {
this.deleteFileList.push(file);
}
}
}
this.fileList = [];
}
},
},
computed: {},
components: {},
mounted() { },
};
</script>