File name
Commit message
Commit date
05-22
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 sch-full">
<div class="content">
<div class="scroll">
<div class="form-box">
<div class="form-box-title">
<p>기본정보</p>
</div>
<div class="form-content">
<div class="layout">
<p class="form-title">제목</p>
<p>{{ popup['popupTtl'] }}</p>
<!-- <input
type="text"
class="full-input"
v-model="popup['popupTtl']"
ref="popupTtl"
disabled
/> -->
</div>
<div class="layout">
<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 class="layout">
<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 class="layout">
<p class="form-title">업로드 형식</p>
<p>{{ popupTypeName }}</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 class="layout">
<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 class="layout">
<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 class="layout">
<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 class="layout">
<p class="form-title point-font2 mb10">팝업 노출 페이지</p>
<p>{{ pageTypeName }}</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 class="layout">
<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 class="layout">
<p class="form-title">사용 유무</p>
<p>{{ popup['popupUseYn'] }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-wrap">
<button class="btn sm tertiary" @click="fnList">목록</button>
<button
class="btn sm main"
@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 pageAuthMixin from "../../../common/pageAuthMixin.js";
// API
import { detailProc, deleteProc } from "../../../../resources/api/popup";
export default {
mixins: [pageAuthMixin],
data() {
return {
// 페이지 권한 객체
// pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
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) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// 삭제
async axiosDelete(data) {
try {
const response = await deleteProc(data);
alert(response.data.message);
if (response.status == 200) {
this.fnList();
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
//─────axios─────┘
},
watch: {},
computed: {
popupTypeName() {
// 팝업 타입
const popupTypeList = [
{ cd: "image", cdNm: "이미지" },
{ cd: "video", cdNm: "영상" },
];
const match = popupTypeList.find(item => item.cd === this.popup['popupType']);
return match ? match.cdNm : this.popup['popupType'];
},
pageTypeName() {
const match = this.codeList.find(item => item.cd === this.popup['pageType']);
return match ? match.cdNm : this.popup['pageType'];
}
},
components: {},
mounted() {},
};
</script>