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">
<label for="" class="form-title point-font2 mb10">제목</label>
<input
type="text"
class="full-input"
v-model="popup['popupTtl']"
ref="popupTtl"
disabled
/>
</div>
</td>
<td>
<div class="gd-12">
<label for="" class="form-title point-font2 mb10">게시일</label>
<div class="flex justify-start align-center no-gutters">
<div class="gd-3">
<input
type="datetime"
class="full-input"
v-model="popup['popupBgngDt']"
ref="popupBgngDt"
disabled
/>
</div>
<div class="pd10">-</div>
<div class="gd-3">
<input
type="datetime"
class="full-input"
v-model="popup['popupEndDt']"
ref="popupEndDt"
disabled
/>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="gd-12 pr0">
<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']"
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>
</td>
<td>
<div class="gd-12 pl0">
<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"
disabled
/>
<label for="image">이미지</label>
</div>
<div class="gd-5">
<input
type="radio"
id="video"
class="mr5"
v-model="popup['popupTypeCd']"
value="video"
disabled
/>
<label for="video">영상</label>
</div>
</div>
</div>
</td>
</tr>
<template v-if="popup['popupTypeCd'] == 'image'">
<tr>
<td colspan="2">
<div class="gd-12 pr0">
<label for="" class="form-title point-font2 mb10">
이미지 첨부파일
</label>
<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>
</td>
</tr>
<tr>
<td colspan="2">
<div class="gd-12">
<label for="" class="form-title point-font2 mb10">
링크 URL
</label>
<input
type="text"
class="full-input"
v-model="popup['linkUrlAddr']"
ref="linkUrlAddr"
disabled
/>
</div>
</td>
</tr>
</template>
<tr v-if="popup['popupTypeCd'] == 'video'">
<td colspan="2">
<div class="gd-12">
<label for="" class="form-title point-font2 mb10">
동영상 URL
</label>
<input
type="text"
class="full-input"
v-model="popup['vdoUrlAddr']"
ref="vdoUrlAddr"
disabled
/>
</div>
</td>
</tr>
<tr>
<td>
<div class="gd-12">
<label for="" class="form-title point-font2 mb10">순서</label>
<select
class="full-input"
v-model="popup['popupSeq']"
ref="popupSeq"
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>
</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 gray-btn" @click="fnList">목록</button>
</div>
<div class="gd-1 mr10">
<button
class="large-btn blue-btn"
@click="fnUpdate"
v-if="pageAuth.mdfcnAuthrtYn == 'Y'"
>
수정
</button>
</div>
<div class="gd-1">
<button
class="large-btn red-border-btn"
@click="fnDelete"
v-if="pageAuth.delAuthrtYn == 'Y'"
>
삭제
</button>
</div>
</div>
</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(this.$getCmmnMessage("cnf002"));
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시스템관리자에게 문의하세요.");
alert(this.$getCmmnMessage('err005'));
}
},
// 삭제
async axiosDelete(data) {
try {
const response = await deleteProc(data);
alert(response.data.message);
if (response.status == 200) {
this.fnList();
}
} catch (error) {
// alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
alert(this.$getCmmnMessage('err005'));
}
},
//─────axios─────┘
},
watch: {},
computed: {},
components: {},
mounted() {},
};
</script>