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-zone">
<div class="content">
<div class="scroll">
<div class="title-zone">
<div class="page-title">
<p>팝업 관리</p>
</div>
</div>
<div class="form-box">
<div class="form-box-title">
<p>기본정보</p>
</div>
<div class="form-content">
<div>
<p class="form-title">제목</p>
<p>{{ popup['popupTtl'] }}</p>
<!-- <input
type="text"
class="full-input"
v-model="popup['popupTtl']"
ref="popupTtl"
disabled
/> -->
</div>
<div>
<p class="form-title">게시일</p>
<p>{{ popup['bgngDt'] +"-"+ popup['endDt'] }}</p>
<!-- <input
type="datetime"
class="full-input"
v-model="popup['bgngDt']"
ref="bgngDt"
disabled
/>
<div class="pd10">-</div>
<input
type="datetime"
class="full-input"
v-model="popup['endDt']"
ref="endDt"
disabled
/> -->
</div>
<div>
<p class="form-title">팝업크기</p>
<p>{{ popup['wdthLen'] + "X" + popup['vrtcLen']}}</p>
<!-- <div class="flex align-center">
<div class="gd-3 pl0">
<select
class="full-input"
v-model="popup['popupSizeType']"
disabled
>
<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"
disabled
/>
<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']"
disabled
/>
</div>
<div class="pd10">x</div>
<div class="gd-5">
<input
type="text"
class="full-input"
v-model="popup['vrtcLen']"
disabled
/>
</div>
</div>
</div>
</div> -->
</div>
<div>
<p class="form-title">업로드 형식 </p>
<p>{{ popup['popupType'] }}</p>
<!-- <div class="flex align-center no-gutters">
<div class="gd-5">
<input
type="radio"
id="image"
class="mr5"
v-model="popup['popupType']"
value="image"
disabled
/>
<label for="image">이미지</label>
</div>
<div class="gd-5">
<input
type="radio"
id="video"
class="mr5"
v-model="popup['popupType']"
value="video"
disabled
/>
<label for="video">영상</label>
</div>
</div> -->
</div>
<template v-if="popup['popupType'] == 'image'">
<div>
<p class="form-title">이미지 첨부파일</p>
<p v-if="fileList.length < 1">첨부파일이 없습니다.</p>
<p v-else>{{ fileList[0]['fileNm'] + '.' + fileList[0]['extnNm'] }}</p>
<!-- <div class="flex align-center">
<div class="gd-10 pl0">
<div class="filebox">
<input
class="upload-name full-input"
:placeholder="
fileList.length < 1
? '첨부파일이 없습니다.'
: fileList[0]['fileNm'] +
'.' +
fileList[0]['extnNm']
"
disabled
/>
</div>
</div>
<div class="gd-2 pl0 pr0">
<button
for="file"
class="large-btn gray-border-btn text-ct"
disabled
>
파일찾기
</button>
</div>
</div> -->
</div>
<div>
<p class="form-title">링크 URL</p>
<p v-if="popup['linkUrl'] != null || popup['linkUrl'] != ''">{{ popup['linkUrl'] }}</p>
<p v-else>링크가 없습니다.</p>
<!-- <input
type="text"
class="full-input"
v-model="popup['linkUrl']"
ref="linkUrl"
disabled
/> -->
</div>
</template>
<template v-if="popup['popupType'] == 'video'">
<div>
<p class="form-title">동영상 URL</p>
<p>{{ popup['vdoUrl'] }}</p>
<!-- <input
type="text"
class="full-input"
v-model="popup['vdoUrl']"
ref="vdoUrl"
disabled
/> -->
</div>
</template>
<div>
<p class="form-title point-font2 mb10"> 팝업 노출 페이지</p>
<p>{{ popup['pageType'] }}</p>
<!-- <select
class="full-input"
v-model="popup['pageType']"
ref="pageType"
disabled
>
<option value="">팝업을 노출할 페이지를 선택하세요.</option>
<option
v-for="(item, index) of codeList"
:key="index"
:value="item.cd"
>
{{ item.cdNm }}
</option>
</select> -->
</div>
<div>
<p class="form-title">순서</p>
<p>{{ popup['sn'] }}</p>
<!-- <select
class="full-input"
v-model="popup['sn']"
ref="sn"
disabled
>
<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>
</div>
</div>
</div>
</div>
</div>
<div class="btn-wrap">
<button class="btn sm tertiary" @click="fnList">목록</button>
<button
class="btn sm primary"
@click="fnUpdate"
v-if="pageAuth.mdfcnAuthrt == 'Y'"
>
수정
</button>
<button
class="btn sm red"
@click="fnDelete"
v-if="pageAuth.delAuthrt == 'Y'"
>
삭제
</button>
</div>
</template>
<script>
import { mdiClose, mdiTrayArrowDown } from "@mdi/js";
// API
import { detailProc, deleteProc } from "../../../../resources/api/popup";
export default {
data() {
return {
// 페이지 권한 객체
pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
path: mdiClose,
downPath: mdiTrayArrowDown,
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);
},
// 수정
fnUpdate() {
this.$router.push({
name: "admPopupManagementInsert",
query: { pageId: this.$route.query.pageId },
});
},
// 삭제
fnDelete() {
const isDelete = confirm("삭제하시겠습니까?");
if (isDelete) {
let data = this.popup;
this.axiosDelete(data);
}
},
// 목록
fnList() {
this.$router.push({
name: "admPopupManagementSelectList",
});
},
//─────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"];
// 팝업 크기 삽입
for (let popupSize of this.popupSizes) {
if (
popupSize["wdthLen"] == this.popup["wdthLen"] &&
popupSize["vrtcLen"] == this.popup["vrtcLen"]
) {
this.popup["popupSize"] = popupSize["id"];
}
}
} catch (error) {
alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
}
},
// 삭제
async axiosDelete(data) {
try {
const response = await deleteProc(data);
alert(response.data.message);
if (response.status == 200) {
this.fnList();
}
} catch (error) {
alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
}
},
//─────axios─────┘
},
watch: {},
computed: {},
components: {},
mounted() {},
};
</script>