153 lines
3.5 KiB
Vue
153 lines
3.5 KiB
Vue
<template>
|
|
<v-navigation-drawer
|
|
app
|
|
clipped
|
|
color="black"
|
|
dark
|
|
permanent
|
|
>
|
|
<v-layout
|
|
column
|
|
fill-height
|
|
>
|
|
<v-list
|
|
v-for="item in items"
|
|
:key="item.title"
|
|
class="py-0"
|
|
>
|
|
<div v-if="!item.items">
|
|
<v-list-item
|
|
:to="item.route"
|
|
active-class="blue white--text"
|
|
>
|
|
<v-list-item-icon>
|
|
<v-icon>{{ item.icon }}</v-icon>
|
|
</v-list-item-icon>
|
|
|
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
|
</v-list-item>
|
|
</div>
|
|
|
|
<v-list-group
|
|
v-else
|
|
:prepend-icon="item.icon"
|
|
no-action
|
|
>
|
|
<template v-slot:activator>
|
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
|
</template>
|
|
|
|
<div
|
|
v-for="childItem in item.items"
|
|
:key="childItem.title"
|
|
>
|
|
<v-list-item
|
|
:to="childItem.route"
|
|
:exact="childItem.route === '/character'"
|
|
active-class="blue white--text"
|
|
>
|
|
<v-list-item-title>{{ childItem.title }}</v-list-item-title>
|
|
</v-list-item>
|
|
</div>
|
|
</v-list-group>
|
|
</v-list>
|
|
<v-spacer />
|
|
<v-list>
|
|
<v-list-item @click="logout">
|
|
<v-list-item-icon>
|
|
<v-icon>mdi-logout</v-icon>
|
|
</v-list-item-icon>
|
|
|
|
<v-list-item-title>로그아웃</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-layout>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from '@/api/menu'
|
|
|
|
export default {
|
|
name: "SideMenu",
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
items: [],
|
|
}
|
|
},
|
|
|
|
async created() {
|
|
await this.getMenus()
|
|
},
|
|
|
|
methods: {
|
|
notifyError(message) {
|
|
this.$dialog.notify.error(message)
|
|
},
|
|
|
|
notifySuccess(message) {
|
|
this.$dialog.notify.success(message)
|
|
},
|
|
|
|
async getMenus() {
|
|
this.isLoading = true
|
|
try {
|
|
let res = await api.getMenus();
|
|
if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
|
|
this.items = res.data.data
|
|
|
|
// 캐릭터 챗봇 메뉴 추가
|
|
this.items.push({
|
|
title: '캐릭터 챗봇',
|
|
route: null,
|
|
items: [
|
|
{
|
|
title: '배너 등록',
|
|
route: '/character/banner',
|
|
items: null
|
|
},
|
|
{
|
|
title: '캐릭터 리스트',
|
|
route: '/character',
|
|
items: null
|
|
},
|
|
{
|
|
title: '큐레이션',
|
|
route: '/character/curation',
|
|
items: null
|
|
},
|
|
{
|
|
title: '정산',
|
|
route: '/character/calculate',
|
|
items: null
|
|
},
|
|
{
|
|
title: '원작',
|
|
route: '/original-work',
|
|
items: null
|
|
},
|
|
]
|
|
})
|
|
} else {
|
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
|
|
this.logout();
|
|
}
|
|
} catch (e) {
|
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
|
|
this.logout();
|
|
} finally {
|
|
this.isLoading = false
|
|
}
|
|
},
|
|
|
|
logout() {
|
|
this.$store.dispatch('accountStore/LOGOUT')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|