시리즈 장르 - 등록/삭제 페이지 추가
This commit is contained in:
		
							
								
								
									
										24
									
								
								src/api/audio_content_series.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										24
									
								
								src/api/audio_content_series.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,24 @@ | |||||||
|  | import Vue from 'vue'; | ||||||
|  |  | ||||||
|  | async function getAudioContentSeriesGenreList() { | ||||||
|  |     return Vue.axios.get('/admin/audio-content/series/genre'); | ||||||
|  | } | ||||||
|  |  | ||||||
|  | async function createAudioContentSeriesGenre(genre, is_adult) { | ||||||
|  |     return Vue.axios.post('/admin/audio-content/series/genre', {genre: genre, isAdult: is_adult}) | ||||||
|  | } | ||||||
|  |  | ||||||
|  | async function updateAudioContentSeriesGenre(request) { | ||||||
|  |     return Vue.axios.put('/admin/audio-content/series/genre', request) | ||||||
|  | } | ||||||
|  |  | ||||||
|  | async function updateAudioContentSeriesGenreOrders(ids) { | ||||||
|  |     return Vue.axios.put('/admin/audio-content/series/genre/orders', {ids: ids}) | ||||||
|  | } | ||||||
|  |  | ||||||
|  | export { | ||||||
|  |     getAudioContentSeriesGenreList, | ||||||
|  |     createAudioContentSeriesGenre, | ||||||
|  |     updateAudioContentSeriesGenre, | ||||||
|  |     updateAudioContentSeriesGenreOrders | ||||||
|  | } | ||||||
| @@ -80,6 +80,11 @@ const routes = [ | |||||||
|                 name: 'ContentCuration', |                 name: 'ContentCuration', | ||||||
|                 component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentCuration.vue') |                 component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentCuration.vue') | ||||||
|             }, |             }, | ||||||
|  |             { | ||||||
|  |                 path: '/content/series/genre', | ||||||
|  |                 name: 'ContentSeriesGenre', | ||||||
|  |                 component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentSeriesGenre.vue') | ||||||
|  |             }, | ||||||
|             { |             { | ||||||
|                 path: '/promotion/event', |                 path: '/promotion/event', | ||||||
|                 name: 'EventView', |                 name: 'EventView', | ||||||
|   | |||||||
							
								
								
									
										330
									
								
								src/views/Content/ContentSeriesGenre.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										330
									
								
								src/views/Content/ContentSeriesGenre.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,330 @@ | |||||||
|  | <template> | ||||||
|  |   <div> | ||||||
|  |     <v-toolbar dark> | ||||||
|  |       <v-spacer /> | ||||||
|  |       <v-toolbar-title>시리즈 장르 관리</v-toolbar-title> | ||||||
|  |       <v-spacer /> | ||||||
|  |     </v-toolbar> | ||||||
|  |  | ||||||
|  |     <br> | ||||||
|  |  | ||||||
|  |     <v-container> | ||||||
|  |       <v-row> | ||||||
|  |         <v-col cols="10" /> | ||||||
|  |         <v-col> | ||||||
|  |           <v-btn | ||||||
|  |             block | ||||||
|  |             color="#9970ff" | ||||||
|  |             dark | ||||||
|  |             depressed | ||||||
|  |             @click="showWriteDialog" | ||||||
|  |           > | ||||||
|  |             시리즈 장르 등록 | ||||||
|  |           </v-btn> | ||||||
|  |         </v-col> | ||||||
|  |       </v-row> | ||||||
|  |  | ||||||
|  |       <v-row> | ||||||
|  |         <v-col> | ||||||
|  |           <v-data-table | ||||||
|  |             :headers="headers" | ||||||
|  |             :items="series_genre_list" | ||||||
|  |             :loading="is_loading" | ||||||
|  |             item-key="id" | ||||||
|  |             class="elevation-1" | ||||||
|  |             hide-default-footer | ||||||
|  |             disable-pagination | ||||||
|  |           > | ||||||
|  |             <template v-slot:body="props"> | ||||||
|  |               <draggable | ||||||
|  |                 v-model="props.items" | ||||||
|  |                 tag="tbody" | ||||||
|  |                 @end="onDropCallback(props.items)" | ||||||
|  |               > | ||||||
|  |                 <tr | ||||||
|  |                   v-for="(item, index) in props.items" | ||||||
|  |                   :key="index" | ||||||
|  |                 > | ||||||
|  |                   <td> | ||||||
|  |                     {{ item.genre }} | ||||||
|  |                   </td> | ||||||
|  |                   <td> | ||||||
|  |                     <h3 v-if="item.isAdult"> | ||||||
|  |                       O | ||||||
|  |                     </h3> | ||||||
|  |                     <h3 v-else> | ||||||
|  |                       X | ||||||
|  |                     </h3> | ||||||
|  |                   </td> | ||||||
|  |                   <td> | ||||||
|  |                     <v-row> | ||||||
|  |                       <v-col /> | ||||||
|  |                       <v-col> | ||||||
|  |                         <v-btn | ||||||
|  |                           :disabled="is_loading" | ||||||
|  |                           @click="deleteConfirm(item)" | ||||||
|  |                         > | ||||||
|  |                           삭제 | ||||||
|  |                         </v-btn> | ||||||
|  |                       </v-col> | ||||||
|  |                       <v-col /> | ||||||
|  |                     </v-row> | ||||||
|  |                   </td> | ||||||
|  |                 </tr> | ||||||
|  |               </draggable> | ||||||
|  |             </template> | ||||||
|  |           </v-data-table> | ||||||
|  |         </v-col> | ||||||
|  |       </v-row> | ||||||
|  |     </v-container> | ||||||
|  |  | ||||||
|  |     <v-dialog | ||||||
|  |       v-model="show_write_dialog" | ||||||
|  |       max-width="1000px" | ||||||
|  |       persistent | ||||||
|  |     > | ||||||
|  |       <v-card> | ||||||
|  |         <v-card-title> | ||||||
|  |           시리즈 장르 등록 | ||||||
|  |         </v-card-title> | ||||||
|  |         <v-card-text> | ||||||
|  |           <v-row align="center"> | ||||||
|  |             <v-col cols="4"> | ||||||
|  |               장르 | ||||||
|  |             </v-col> | ||||||
|  |             <v-col cols="8"> | ||||||
|  |               <v-text-field | ||||||
|  |                 v-model="series_genre.genre" | ||||||
|  |                 label="장르" | ||||||
|  |                 required | ||||||
|  |               /> | ||||||
|  |             </v-col> | ||||||
|  |           </v-row> | ||||||
|  |         </v-card-text> | ||||||
|  |         <v-card-text> | ||||||
|  |           <v-row> | ||||||
|  |             <v-col cols="4"> | ||||||
|  |               19금 | ||||||
|  |             </v-col> | ||||||
|  |             <v-col cols="8"> | ||||||
|  |               <input | ||||||
|  |                 v-model="series_genre.is_adult" | ||||||
|  |                 type="checkbox" | ||||||
|  |               > | ||||||
|  |             </v-col> | ||||||
|  |           </v-row> | ||||||
|  |         </v-card-text> | ||||||
|  |         <v-card-actions v-show="!is_loading"> | ||||||
|  |           <v-spacer /> | ||||||
|  |           <v-btn | ||||||
|  |             color="blue darken-1" | ||||||
|  |             text | ||||||
|  |             @click="cancel" | ||||||
|  |           > | ||||||
|  |             취소 | ||||||
|  |           </v-btn> | ||||||
|  |           <v-btn | ||||||
|  |             color="blue darken-1" | ||||||
|  |             text | ||||||
|  |             @click="submit" | ||||||
|  |           > | ||||||
|  |             등록 | ||||||
|  |           </v-btn> | ||||||
|  |         </v-card-actions> | ||||||
|  |       </v-card> | ||||||
|  |     </v-dialog> | ||||||
|  |  | ||||||
|  |     <v-dialog | ||||||
|  |       v-model="show_delete_confirm_dialog" | ||||||
|  |       max-width="400px" | ||||||
|  |       persistent | ||||||
|  |     > | ||||||
|  |       <v-card> | ||||||
|  |         <v-card-text /> | ||||||
|  |         <v-card-text> | ||||||
|  |           "{{ selected_series_genre.genre }}"을 삭제하시겠습니까? | ||||||
|  |         </v-card-text> | ||||||
|  |         <v-card-actions v-show="!is_loading"> | ||||||
|  |           <v-spacer /> | ||||||
|  |           <v-btn | ||||||
|  |             color="blue darken-1" | ||||||
|  |             text | ||||||
|  |             @click="deleteCancel" | ||||||
|  |           > | ||||||
|  |             취소 | ||||||
|  |           </v-btn> | ||||||
|  |           <v-btn | ||||||
|  |             color="blue darken-1" | ||||||
|  |             text | ||||||
|  |             @click="deleteSeriesGenre" | ||||||
|  |           > | ||||||
|  |             확인 | ||||||
|  |           </v-btn> | ||||||
|  |         </v-card-actions> | ||||||
|  |       </v-card> | ||||||
|  |     </v-dialog> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  |  | ||||||
|  | <script> | ||||||
|  | import Draggable from 'vuedraggable'; | ||||||
|  | import * as api from '@/api/audio_content_series'; | ||||||
|  |  | ||||||
|  | export default { | ||||||
|  |   name: "ContentSeriesGenre", | ||||||
|  |   components: {Draggable}, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       is_loading: false, | ||||||
|  |       show_delete_confirm_dialog: false, | ||||||
|  |       show_write_dialog: false, | ||||||
|  |       selected_series_genre: {}, | ||||||
|  |       series_genre: {is_adult: false}, | ||||||
|  |       series_genre_list: [], | ||||||
|  |       headers: [ | ||||||
|  |         { | ||||||
|  |           text: '장르', | ||||||
|  |           align: 'center', | ||||||
|  |           sortable: false, | ||||||
|  |           value: 'genre', | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           text: '19금', | ||||||
|  |           align: 'center', | ||||||
|  |           sortable: false, | ||||||
|  |           value: 'isAdult', | ||||||
|  |         }, | ||||||
|  |         { | ||||||
|  |           text: '관리', | ||||||
|  |           align: 'center', | ||||||
|  |           sortable: false, | ||||||
|  |           value: 'management' | ||||||
|  |         }, | ||||||
|  |       ], | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |  | ||||||
|  |   async created() { | ||||||
|  |     await this.getSeriesGenreList(); | ||||||
|  |   }, | ||||||
|  |  | ||||||
|  |   methods: { | ||||||
|  |     notifyError(message) { | ||||||
|  |       this.$dialog.notify.error(message) | ||||||
|  |     }, | ||||||
|  |  | ||||||
|  |     notifySuccess(message) { | ||||||
|  |       this.$dialog.notify.success(message) | ||||||
|  |     }, | ||||||
|  |  | ||||||
|  |     showWriteDialog() { | ||||||
|  |       this.show_write_dialog = true | ||||||
|  |     }, | ||||||
|  |  | ||||||
|  |     cancel() { | ||||||
|  |       this.series_genre = {is_adult: false} | ||||||
|  |       this.selected_series_genre = {} | ||||||
|  |       this.show_write_dialog = false | ||||||
|  |     }, | ||||||
|  |  | ||||||
|  |     deleteConfirm(series_genre) { | ||||||
|  |       this.selected_series_genre = series_genre | ||||||
|  |       this.show_delete_confirm_dialog = true | ||||||
|  |     }, | ||||||
|  |  | ||||||
|  |     deleteCancel() { | ||||||
|  |       this.selected_series_genre = {} | ||||||
|  |       this.show_delete_confirm_dialog = false | ||||||
|  |     }, | ||||||
|  |  | ||||||
|  |     async submit() { | ||||||
|  |       if (this.is_loading) return; | ||||||
|  |       this.isLoading = true | ||||||
|  |  | ||||||
|  |       try { | ||||||
|  |         const res = await api.createAudioContentSeriesGenre(this.series_genre.genre, this.series_genre.is_adult) | ||||||
|  |         if (res.status === 200 && res.data.success === true) { | ||||||
|  |           this.cancel() | ||||||
|  |           this.notifySuccess('등록되었습니다.') | ||||||
|  |  | ||||||
|  |           this.series_genre_list = [] | ||||||
|  |           await this.getSeriesGenreList() | ||||||
|  |         } else { | ||||||
|  |           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||||
|  |         } | ||||||
|  |       } catch (e) { | ||||||
|  |         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||||
|  |       } finally { | ||||||
|  |         this.is_loading = false | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |  | ||||||
|  |     async getSeriesGenreList() { | ||||||
|  |       this.is_loading = true | ||||||
|  |  | ||||||
|  |       try { | ||||||
|  |         const res = await api.getAudioContentSeriesGenreList() | ||||||
|  |         if (res.status === 200 && res.data.success === true) { | ||||||
|  |           this.series_genre_list = res.data.data | ||||||
|  |         } else { | ||||||
|  |           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||||
|  |         } | ||||||
|  |       } catch (e) { | ||||||
|  |         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||||
|  |       } finally { | ||||||
|  |         this.is_loading = false | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |  | ||||||
|  |     async onDropCallback(items) { | ||||||
|  |       this.series_genre_list = items | ||||||
|  |       const ids = items.map((item) => { | ||||||
|  |         return item.id | ||||||
|  |       }) | ||||||
|  |  | ||||||
|  |       try { | ||||||
|  |         this.is_loading = true | ||||||
|  |         const res = await api.updateAudioContentSeriesGenreOrders(ids) | ||||||
|  |         if (res.status === 200 && res.data.success === true) { | ||||||
|  |           this.notifySuccess(res.data.message) | ||||||
|  |         } else { | ||||||
|  |           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||||
|  |         } | ||||||
|  |       } catch (e) { | ||||||
|  |         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||||
|  |       } finally { | ||||||
|  |         this.is_loading = false | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |  | ||||||
|  |     async deleteSeriesGenre() { | ||||||
|  |       if (this.is_loading) return; | ||||||
|  |       this.is_loading = true | ||||||
|  |  | ||||||
|  |       try { | ||||||
|  |         let request = {id: this.selected_series_genre.id, isActive: false} | ||||||
|  |  | ||||||
|  |         const res = await api.updateAudioContentSeriesGenre(request) | ||||||
|  |         if (res.status === 200 && res.data.success === true) { | ||||||
|  |           this.show_delete_confirm_dialog = false | ||||||
|  |           this.cancel() | ||||||
|  |           this.notifySuccess('삭제되었습니다.') | ||||||
|  |  | ||||||
|  |           this.series_genre_list = [] | ||||||
|  |           await this.getSeriesGenreList() | ||||||
|  |         } else { | ||||||
|  |           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||||
|  |         } | ||||||
|  |       } catch (e) { | ||||||
|  |         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||||
|  |       } finally { | ||||||
|  |         this.is_loading = false | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  |  | ||||||
|  | <style scoped> | ||||||
|  |  | ||||||
|  | </style> | ||||||
		Reference in New Issue
	
	Block a user
	 Yu Sung
					Yu Sung