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>
<nav class="top-menu">
<ul class="main-menu">
<li v-for="(mainMenu, idx) in menuList" :key="idx" @mouseover="showAllSubMenus" @mouseout="hideAllSubMenus">
<p class="depth1" :class="{ active: isMainMenuActive(mainMenu) }">{{ mainMenu.pathName }}</p>
<ul v-if="mainMenu.subMenu" class="sub-menu" :style="subShow ? 'max-height:500px; opacity:1' : 'max-height:0px; opacity:0'">
<li v-for="(subMenu, idx) in mainMenu.subMenu" :key="idx" :class="{ active: isSubMenuActive(subMenu) }">
<router-link :to="subMenu.path">{{ subMenu.pathName }}</router-link>
</li>
</ul>
</li>
</ul>
<div class="navbg" :style="subShow ? `height: ${maxSubMenuHeight}px` : `height: 0px`"></div>
</nav>
</template>
<script>
export default {
data() {
return {
menuList: [],
admMenu: [
{
pathName: "데이터관리",
subMenu: [
{ path: "/fileManagement.page", pathName: "파일관리" },
{ path: "/dataManagement.page", pathName: "데이터관리" },
],
},
{
pathName: "메타관리",
subMenu: [
{ path: "/dataMetaManagement.page", pathName: "데이터 메타 정보" },
{ path: "/termManagement.page", pathName: "표준 용어 관리" },
],
},
{
pathName: "작업관리",
subMenu: [
{ path: "/scheduleManagement.page", pathName: "작업 스케줄 관리" },
],
},
{
pathName: "데이터활용",
subMenu: [
{ path: "/customSelectList.page", pathName: "데이터 활용 관리" },
{ path: "/gisInfoList.page", pathName: "GIS 기능 관리" },
{ path: "/openApiList.page", pathName: "OpenAPI 목록" },
],
},
{
pathName: "회원관리",
subMenu: [
{ path: "/user.page", pathName: "일반사용자관리" },
{ path: "/adminManagement.page", pathName: "관리자관리" },
{ path: "/departmentManagement.page", pathName: "부서관리" },
],
},
{
pathName: "시스템 관리",
subMenu: [
{ path: "/hostManagement.page", pathName: "호스트관리" },
{ path: "/openApiKeyList.page", pathName: "OpenAPI key 관리" },
{ path: "/dbConnectionList.page", pathName: "연계정보관리" },
],
},
{
pathName: "정보관리",
subMenu: [
{ path: "/myPage.page", pathName: "내정보관리" },
{ path: "/myPagePwd.page", pathName: "비밀번호 변경" },
],
},
],
viewerMenu: [
{
pathName: "데이터활용",
subMenu: [
{ path: "/openApiList.page", pathName: "OpenAPI 목록" },
],
},
{
pathName: "정보관리",
subMenu: [
{ path: "/myPage.page", pathName: "내정보관리" },
{ path: "/myPagePwd.page", pathName: "비밀번호 변경" },
],
},
],
userMenu: [
{
pathName: "데이터관리",
subMenu: [
{ path: "/fileManagement.page", pathName: "파일관리" },
{ path: "/dataManagement.page", pathName: "데이터관리" },
],
},
{
pathName: "메타관리",
subMenu: [
{ path: "/dataMetaManagement.page", pathName: "데이터 메타 정보" },
{ path: "/termManagement.page", pathName: "표준 용어 관리" },
],
},
{
pathName: "작업관리",
subMenu: [
{ path: "/scheduleManagement.page", pathName: "작업 스케줄 관리" },
],
},
{
pathName: "데이터활용",
subMenu: [
{ path: "/customSelectList.page", pathName: "데이터 활용 관리" },
{ path: "/gisInfoList.page", pathName: "GIS 기능 관리" },
{ path: "/openApiList.page", pathName: "OpenAPI 목록" },
],
},
{
pathName: "정보관리",
subMenu: [
{ path: "/myPage.page", pathName: "내정보관리" },
{ path: "/myPagePwd.page", pathName: "비밀번호 변경" },
],
},
],
currentRoute: null,
subShow: false
}
},
methods: {
showAllSubMenus() {
this.subShow = true;
},
hideAllSubMenus() {
this.subShow = false;
},
isMainMenuActive(mainMenu) {
return this.currentRoute && (this.currentRoute.path === mainMenu.path || this.isSubMenuActive(mainMenu.subMenu));
},
isSubMenuActive(subMenu) {
if (!subMenu) return false;
for (let i = 0; i < subMenu.length; i++) {
if (this.currentRoute.path === subMenu[i].path) {
return true;
}
}
return false;
},
},
watch: {
$route(to, from) {
this.currentRoute = to;
},
},
created() {
let authList = this.$store.state.loginUser.user_auth;
let check = null;
for (let auth of authList) {
if (auth == "ROLE_ADMIN") {
check = "ROLE_ADMIN";
break;
}
}
if (check == null) {
for (let auth of authList) {
if (auth == "ROLE_VIEWER") {
check = "ROLE_VIEWER";
break;
}
}
}
// ADMIN 권한 여부에 따른 메뉴 표시
if (check == 'ROLE_ADMIN') {
this.menuList = this.admMenu;
} else if (check == 'ROLE_VIEWER') {
this.menuList = this.viewerMenu;
} else {
this.menuList = this.userMenu;
}
},
computed: {
maxSubMenuHeight: function () {
let maxSubItems = Math.max(...this.menuList.map(menu => menu.subMenu.length));
return maxSubItems * 55; // assuming each item is 50px high
}
},
}
</script>