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="side-bar">
<div class="logo">
<router-link :to="{path : '/adm/main.page'}">ADMINISTRATOR</router-link>
</div>
<nav>
<ul class="main-menu">
<li v-for="(menu, idx) in menuList" :key="idx" class="menu-item"
@click.stop="toggleSubMenu(menu)">
<span :class="{ 'main-active': checkMenu == menu.menuId }">
{{ menu.menuNm }}
</span>
<!-- 드롭다운 메뉴 -->
<ul v-if="menu.isOpen" class="sub-menu">
<li v-for="(subMenu, subIdx) in menu.childList" :key="subIdx" :class="{ 'sub-active': isActive(subMenu.routerUrl) }"
@click.stop="menuClick( subMenu.routerUrl != '' && subMenu.routerUrl != null ? subMenu : subMenu.childList[0])">
{{ subMenu.menuNm }}
<ul v-show="subMenu.childList.length > 0">
<li v-for="(third, thirdIdx) in subMenu.childList" :key="thirdIdx" :class="{
'ss-active': isActive(third.routerUrl),
}" @click.stop="menuClick(third)">
<span>{{ third.menuNm }}</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</template>
<script>
import store from "../pages/AppStore";
import queryParams from '../../resources/js/queryParams';
import { defaultSearchParams } from '../../resources/js/defaultSearchParams';
import cntnStatsSave from "../../resources/js/cntnStatsSave";
import { findBySysMenu } from '../../resources/api/menu';
export default {
mixins: [queryParams, cntnStatsSave],
data() {
return {
checkMenu: null,
currentPath: this.$route.path,
resetSearch: { ...defaultSearchParams },
menuList: [],
};
},
created() {
this.findAll();
this.menuCheck();
},
methods: {
menuCheck() {
const menu = store.state.menu;
if (menu) {
this.checkMenu = menu.menuId;
}
},
async findAll() {
try {
const params = {
roles: store.state.roles.map(auth => auth.authority),
menuType: store.state.userType
};
const res = await findBySysMenu(params);
if (res.status === 200) {
// `isOpen` 속성을 추가하여 초기 상태 설정
this.menuList = res.data.data.menuList.map(menu => ({
...menu,
isOpen: false,
}));
// 전체 메뉴 트리 store에 저장
this.$store.commit('setMenuList', this.menuList);
}
} catch (error) {
alert('에러가 발생했습니다.\n관리자에게 문의하세요.');
}
},
async menuClick(menu) {
this.saveQueryParams("queryParams", this.resetSearch); // 검색조건 초기화
this.$store.commit('setMenu', menu);
await this.cntnStatsSave(menu.menuId);
if (menu.linkType === "0") {
// 현재창
this.$router.push({
path: menu.routerUrl,
});
} else if (menu.linkType === "1") {
// 새창
window.open(menu.routerUrl, "_blank");
}
},
toggleSubMenu(menu) {
menu.isOpen = !menu.isOpen;
this.checkMenu = menu.menuId;
// this.saveQueryParams('queryParams', this.resetSearch); // 검색조건 초기화
},
isActive(subPath) {
const checkUrl = this.currentPath.substring(
0,
this.currentPath.lastIndexOf("/") + 1
);
return subPath.startsWith(checkUrl);
},
},
watch: {
// '$store.state.menu'(newValue) {
// this.checkMenu = newValue ? newValue.menuId : null;
// },
// 나중에 네비게이션 가드에서 form 받을 수 있으면 form adm/main으로 갈때 sotre.state값0로 바꿔주기
$route(to) {
this.currentPath = to.path;
},
// async "$store.state.menu"(newVal) {
// console.log(newVal)
// if (newVal == null || newVal == "" || newVal == undefined) {
// this.menuList = [];
// } else {
// this.menuList = newVal.childList;
// if (newVal && this.menuList.length > 0) {
// await this.cntnStatsSave(this.menuList[0].menuId);
// if (
// newVal.menuId == "MENU_000000000000010" &&
// this.$store.state.path.includes("BBS_MNG_")
// ) {
// return;
// } else {
// this.$router.push(this.menuList[0].routerUrl);
// }
// }
// }
// },
"$store.state.mbrNm"(newVal) {
this.mbrNm = newVal;
},
}
};
</script>
<style scoped>
/* 메뉴 스타일 */
.main-menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu-item {
position: relative;
cursor: pointer;
padding: 10px;
border-bottom: 1px solid #ccc;
}
/* 서브메뉴 스타일 */
.sub-menu {
list-style: none;
padding: 5px 0;
margin: 0;
background: white;
border: 1px solid #ccc;
display: block;
width: 100%;
}
.sub-menu li {
padding: 8px 15px;
cursor: pointer;
}
.sub-menu li:hover {
background-color: #f0f0f0;
}
</style>