530 lines
16 KiB
Vue
530 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<v-toolbar dark>
|
|
<v-btn
|
|
icon
|
|
@click="goBack"
|
|
>
|
|
<v-icon>mdi-arrow-left</v-icon>
|
|
</v-btn>
|
|
<v-spacer />
|
|
<v-toolbar-title>시리즈 배너 관리</v-toolbar-title>
|
|
<v-spacer />
|
|
</v-toolbar>
|
|
|
|
<v-container>
|
|
<v-row>
|
|
<v-col cols="4">
|
|
<v-btn
|
|
color="primary"
|
|
dark
|
|
@click="showAddDialog"
|
|
>
|
|
배너 추가
|
|
</v-btn>
|
|
</v-col>
|
|
<v-spacer />
|
|
</v-row>
|
|
|
|
<!-- 로딩 표시 -->
|
|
<v-row v-if="isLoading && banners.length === 0">
|
|
<v-col class="text-center">
|
|
<v-progress-circular
|
|
indeterminate
|
|
color="primary"
|
|
size="64"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- 배너 그리드 -->
|
|
<v-row>
|
|
<draggable
|
|
v-model="banners"
|
|
class="row"
|
|
style="width: 100%"
|
|
:options="{ animation: 150 }"
|
|
@end="onDragEnd"
|
|
>
|
|
<v-col
|
|
v-for="banner in banners"
|
|
:key="banner.id"
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
lg="3"
|
|
class="banner-item"
|
|
>
|
|
<v-card
|
|
class="mx-auto"
|
|
max-width="300"
|
|
>
|
|
<v-img
|
|
:src="banner.imagePath || banner.imageUrl"
|
|
height="200"
|
|
contain
|
|
/>
|
|
<v-card-text class="text-center">
|
|
<div>{{ resolveSeriesTitle(banner) }}</div>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
small
|
|
color="primary"
|
|
@click="showEditDialog(banner)"
|
|
>
|
|
수정
|
|
</v-btn>
|
|
<v-btn
|
|
small
|
|
color="error"
|
|
@click="confirmDelete(banner)"
|
|
>
|
|
삭제
|
|
</v-btn>
|
|
<v-spacer />
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-col>
|
|
</draggable>
|
|
</v-row>
|
|
|
|
<!-- 데이터가 없을 때 표시 -->
|
|
<v-row v-if="!isLoading && banners.length === 0">
|
|
<v-col class="text-center">
|
|
<p>등록된 배너가 없습니다.</p>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- 무한 스크롤 로딩 -->
|
|
<v-row v-if="isLoading && banners.length > 0">
|
|
<v-col class="text-center">
|
|
<v-progress-circular
|
|
indeterminate
|
|
color="primary"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
|
|
<!-- 배너 추가/수정 다이얼로그 -->
|
|
<v-dialog
|
|
v-model="showDialog"
|
|
max-width="600px"
|
|
persistent
|
|
>
|
|
<v-card>
|
|
<v-card-title>
|
|
<span class="headline">{{ isEdit ? '배너 수정' : '배너 추가' }}</span>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-container>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-file-input
|
|
v-model="bannerForm.image"
|
|
label="배너 이미지"
|
|
accept="image/*"
|
|
prepend-icon="mdi-camera"
|
|
show-size
|
|
truncate-length="15"
|
|
:rules="imageRules"
|
|
outlined
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="previewImage || (isEdit && bannerForm.imageUrl)">
|
|
<v-col
|
|
cols="12"
|
|
class="text-center"
|
|
>
|
|
<v-img
|
|
:src="previewImage || bannerForm.imageUrl"
|
|
max-height="200"
|
|
contain
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
v-model="searchKeyword"
|
|
label="시리즈 검색"
|
|
outlined
|
|
@keyup.enter="searchSeries"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="searchResults.length > 0">
|
|
<v-col cols="12">
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="series in searchResults"
|
|
:key="series.id"
|
|
@click="selectSeries(series)"
|
|
>
|
|
<v-list-item-avatar>
|
|
<v-img :src="series.imageUrl" />
|
|
</v-list-item-avatar>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ series.title || series.name }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="searchPerformed && searchResults.length === 0">
|
|
<v-col cols="12">
|
|
<v-alert
|
|
type="info"
|
|
outlined
|
|
>
|
|
검색결과가 없습니다.
|
|
</v-alert>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="selectedSeries">
|
|
<v-col cols="12">
|
|
<v-alert
|
|
type="info"
|
|
outlined
|
|
>
|
|
<v-row align="center">
|
|
<v-col cols="auto">
|
|
<v-avatar size="50">
|
|
<v-img :src="selectedSeries.imageUrl" />
|
|
</v-avatar>
|
|
</v-col>
|
|
<v-col>
|
|
<div class="font-weight-medium">
|
|
선택된 시리즈: {{ selectedSeries.title || selectedSeries.name }}
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-alert>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
color="blue darken-1"
|
|
text
|
|
@click="closeDialog"
|
|
>
|
|
취소
|
|
</v-btn>
|
|
<v-btn
|
|
color="blue darken-1"
|
|
text
|
|
:disabled="!isFormValid || isSubmitting"
|
|
@click="saveBanner"
|
|
>
|
|
{{ isSubmitting ? '저장중...' : (isEdit ? '수정' : '추가') }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<!-- 삭제 확인 다이얼로그 -->
|
|
<v-dialog
|
|
v-model="showDeleteDialog"
|
|
max-width="400px"
|
|
>
|
|
<v-card>
|
|
<v-card-title class="headline">
|
|
삭제 확인
|
|
</v-card-title>
|
|
<v-card-text>
|
|
이 배너를 삭제하시겠습니까?
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
color="blue darken-1"
|
|
text
|
|
@click="showDeleteDialog = false"
|
|
>
|
|
취소
|
|
</v-btn>
|
|
<v-btn
|
|
color="red darken-1"
|
|
text
|
|
:disabled="isSubmitting"
|
|
@click="deleteBanner"
|
|
>
|
|
삭제
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import draggable from 'vuedraggable'
|
|
import {
|
|
getSeriesBannerList,
|
|
createSeriesBanner,
|
|
updateSeriesBanner,
|
|
deleteSeriesBanner,
|
|
updateSeriesBannerOrder,
|
|
searchSeriesList
|
|
} from '@/api/audio_content_series'
|
|
|
|
export default {
|
|
name: 'ContentSeriesBanner',
|
|
components: { draggable },
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
isSubmitting: false,
|
|
banners: [],
|
|
page: 1,
|
|
hasMoreItems: true,
|
|
showDialog: false,
|
|
showDeleteDialog: false,
|
|
isEdit: false,
|
|
selectedBanner: null,
|
|
selectedSeries: null,
|
|
searchKeyword: '',
|
|
searchResults: [],
|
|
searchPerformed: false,
|
|
previewImage: null,
|
|
bannerForm: {
|
|
image: null,
|
|
imageUrl: '',
|
|
seriesId: null,
|
|
bannerId: null
|
|
},
|
|
imageRules: [
|
|
v => !!v || this.isEdit || '이미지를 선택하세요'
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
isFormValid() {
|
|
return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedSeries
|
|
}
|
|
},
|
|
watch: {
|
|
'bannerForm.image'(newImage) {
|
|
if (newImage) {
|
|
this.createImagePreview(newImage)
|
|
} else {
|
|
this.previewImage = null
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadBanners()
|
|
window.addEventListener('scroll', this.handleScroll)
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('scroll', this.handleScroll)
|
|
},
|
|
methods: {
|
|
notifyError(message) {
|
|
this.$dialog && this.$dialog.notify && this.$dialog.notify.error ? this.$dialog.notify.error(message) : console.error(message)
|
|
},
|
|
notifySuccess(message) {
|
|
this.$dialog && this.$dialog.notify && this.$dialog.notify.success ? this.$dialog.notify.success(message) : console.log(message)
|
|
},
|
|
goBack() {
|
|
this.$router.push('/content/series/list')
|
|
},
|
|
resolveSeriesTitle(banner) {
|
|
return banner.seriesTitle || banner.seriesName || banner.title || banner.name || '시리즈'
|
|
},
|
|
async loadBanners() {
|
|
if (this.isLoading || !this.hasMoreItems) return
|
|
this.isLoading = true
|
|
try {
|
|
const response = await getSeriesBannerList(this.page)
|
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
|
const data = response.data.data
|
|
const newBanners = (data && (data.content || data.items || data)) || []
|
|
this.banners = [...this.banners, ...newBanners]
|
|
this.hasMoreItems = newBanners.length > 0
|
|
this.page++
|
|
} else {
|
|
this.notifyError('배너 목록을 불러오는데 실패했습니다.')
|
|
}
|
|
} catch (e) {
|
|
this.notifyError('배너 목록을 불러오는데 실패했습니다.')
|
|
} finally {
|
|
this.isLoading = false
|
|
}
|
|
},
|
|
handleScroll() {
|
|
const scrollPosition = window.innerHeight + window.scrollY
|
|
const documentHeight = document.documentElement.offsetHeight
|
|
if (scrollPosition >= documentHeight - 200 && !this.isLoading && this.hasMoreItems) {
|
|
this.loadBanners()
|
|
}
|
|
},
|
|
showAddDialog() {
|
|
this.isEdit = false
|
|
this.selectedSeries = null
|
|
this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null }
|
|
this.previewImage = null
|
|
this.searchKeyword = ''
|
|
this.searchResults = []
|
|
this.searchPerformed = false
|
|
this.showDialog = true
|
|
},
|
|
showEditDialog(banner) {
|
|
this.isEdit = true
|
|
this.selectedBanner = banner
|
|
this.selectedSeries = {
|
|
id: banner.seriesId,
|
|
title: banner.seriesTitle || banner.seriesName || banner.title || banner.name,
|
|
imageUrl: banner.seriesImageUrl
|
|
}
|
|
this.bannerForm = {
|
|
image: null,
|
|
imageUrl: banner.imageUrl || banner.imagePath,
|
|
seriesId: banner.seriesId,
|
|
bannerId: banner.id
|
|
}
|
|
this.previewImage = null
|
|
this.searchKeyword = ''
|
|
this.searchResults = []
|
|
this.searchPerformed = false
|
|
this.showDialog = true
|
|
},
|
|
closeDialog() {
|
|
this.showDialog = false
|
|
this.selectedSeries = null
|
|
this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null }
|
|
this.previewImage = null
|
|
this.searchKeyword = ''
|
|
this.searchResults = []
|
|
this.searchPerformed = false
|
|
},
|
|
confirmDelete(banner) {
|
|
this.selectedBanner = banner
|
|
this.showDeleteDialog = true
|
|
},
|
|
createImagePreview(file) {
|
|
if (!file) return
|
|
const reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
this.previewImage = e.target.result
|
|
}
|
|
reader.readAsDataURL(file)
|
|
},
|
|
async searchSeries() {
|
|
if (!this.searchKeyword || this.searchKeyword.length < 2) {
|
|
this.notifyError('검색어를 2글자 이상 입력하세요.')
|
|
return
|
|
}
|
|
try {
|
|
const response = await searchSeriesList(this.searchKeyword)
|
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
|
const data = response.data.data
|
|
this.searchResults = Array.isArray(data) ? data : (data && (data.content || data.items)) || []
|
|
this.searchPerformed = true
|
|
}
|
|
} catch (error) {
|
|
console.error('시리즈 검색 오류:', error)
|
|
this.notifyError('시리즈 검색에 실패했습니다.')
|
|
}
|
|
},
|
|
selectSeries(series) {
|
|
this.selectedSeries = series
|
|
this.bannerForm.seriesId = series.id
|
|
this.searchResults = []
|
|
},
|
|
async saveBanner() {
|
|
if (!this.isFormValid || this.isSubmitting) return
|
|
this.isSubmitting = true
|
|
try {
|
|
if (this.isEdit) {
|
|
const response = await updateSeriesBanner({
|
|
image: this.bannerForm.image,
|
|
seriesId: this.selectedSeries.id,
|
|
bannerId: this.bannerForm.bannerId
|
|
})
|
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
|
this.notifySuccess('배너가 수정되었습니다.')
|
|
} else {
|
|
this.notifyError('배너 수정을 실패했습니다.')
|
|
}
|
|
} else {
|
|
const response = await createSeriesBanner({
|
|
image: this.bannerForm.image,
|
|
seriesId: this.selectedSeries.id
|
|
})
|
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
|
this.notifySuccess('배너가 추가되었습니다.')
|
|
this.closeDialog()
|
|
this.refreshBanners()
|
|
} else {
|
|
this.notifyError('배너 추가를 실패했습니다.')
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('배너 저장 오류:', error)
|
|
this.notifyError('배너 저장에 실패했습니다.')
|
|
} finally {
|
|
this.isSubmitting = false
|
|
}
|
|
},
|
|
async deleteBanner() {
|
|
if (!this.selectedBanner || this.isSubmitting) return
|
|
this.isSubmitting = true
|
|
try {
|
|
const response = await deleteSeriesBanner(this.selectedBanner.id)
|
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
|
this.notifySuccess('배너가 삭제되었습니다.')
|
|
this.showDeleteDialog = false
|
|
this.refreshBanners()
|
|
} else {
|
|
this.notifyError('배너 삭제에 실패했습니다.')
|
|
}
|
|
} catch (error) {
|
|
console.error('배너 삭제 오류:', error)
|
|
this.notifyError('배너 삭제에 실패했습니다.')
|
|
} finally {
|
|
this.isSubmitting = false
|
|
}
|
|
},
|
|
refreshBanners() {
|
|
this.banners = []
|
|
this.page = 1
|
|
this.hasMoreItems = true
|
|
this.loadBanners()
|
|
},
|
|
async onDragEnd() {
|
|
try {
|
|
const bannerIds = this.banners.map(banner => banner.id)
|
|
const response = await updateSeriesBannerOrder(bannerIds)
|
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
|
this.notifySuccess('배너 순서가 변경되었습니다.')
|
|
} else {
|
|
this.notifyError('배너 순서 변경에 실패했습니다.')
|
|
}
|
|
} catch (error) {
|
|
console.error('배너 순서 변경 오류:', error)
|
|
this.notifyError('배너 순서 변경에 실패했습니다.')
|
|
this.refreshBanners()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.banner-item {
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.banner-item:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style>
|