Commit @e6e286ff7e365159141a8330f35dc5e74864eb1b

하석형 04-16

250416 하석형 새로고침 시 좌측 메뉴에 현재 페이지 표시

@e6e286ff7e365159141a8330f35dc5e74864eb1b

660a8ca

e6e286f

client/views/layout/AdminMenu.vue

--- client/views/layout/AdminMenu.vue

+++ client/views/layout/AdminMenu.vue


     },
     created() {
         this.findAll();
-        this.menuCheck();
+        // this.menuCheck();
     },
     methods: {
+        // 새로고침 시 메뉴 체크
         menuCheck() {
-            const menu = store.state.menu;
+            let menu = store.state.menu;
             if (menu) {
-                this.checkMenu = menu.menuId;
+                // this.checkMenu = menu.menuId;
+                this.activeMenus = this.getParentMenus(menu);
+                for (const mu of this.activeMenus) {
+                    if (mu.childList && mu.childList.length > 0) {
+                        mu.isOpen = true; // 하위 메뉴가 있을 시 메뉴 펼치기
+                    }
+                }
             }
         },
         async findAll() {

 
                     // 전체 메뉴 트리 store에 저장
                     this.$store.commit('setMenuList', this.menuList);
-
-                    console.log("menulist",this.menuList)
                 }
             } catch (error) {
                 alert('에러가 발생했습니다.\n관리자에게 문의하세요.');

         },
 
         isActive(menuId) {
-            return this.activeMenus.includes(menuId);
+            // return this.activeMenus.includes(menuId);
+            return this.activeMenus.some(menu => menu.menuId === menuId);
         },
 
         getParentMenus(menu) {
             let parents = [];
             while (menu) {
-                parents.push(menu.menuId);
+                // parents.push(menu.menuId);
+                parents.push(menu);
                 menu = this.findParent(menu);
             }
             return parents;
         },
         findParent(menu) {
             for (const parent of this.menuList) {
-                if (parent.childList && parent.childList.includes(menu)) {
-                    return parent;
+                if (parent.childList?.some(child => child.menuId === menu.menuId)) {
+                // if (parent.childList && parent.childList.includes(menu)) {
+                return parent;
                 }
                 for (const child of parent.childList || []) {
-                    if (child.childList && child.childList.includes(menu)) {
+                    if (child.childList?.some(grand => grand.menuId === menu.menuId)) {
+                    // if (child.childList && child.childList.includes(menu)) {
                         return child;
                     }
                 }

     watch: {
         // 나중에 네비게이션 가드에서 form 받을 수 있으면 form adm/main으로 갈때 sotre.state값0로 바꿔주기
         $route(to) {
-        this.currentPath = to.path;
+            this.currentPath = to.path;
         },
         "$store.state.mbrNm"(newVal) {
             this.mbrNm = newVal;
         },
+        '$store.state.menuList': {
+            immediate: true,
+            handler(val) {
+                if (val && val.length > 0) {
+                    this.menuCheck();
+                }
+            }
+        }
     }
 };
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -54,13 +54,20 @@
54	54	},
55	55	created() {
56	56	this.findAll();
57		- this.menuCheck();
	57	+ // this.menuCheck();
58	58	},
59	59	methods: {
	60	+ // 새로고침 시 메뉴 체크
60	61	menuCheck() {
61		- const menu = store.state.menu;
	62	+ let menu = store.state.menu;
62	63	if (menu) {
63		- this.checkMenu = menu.menuId;
	64	+ // this.checkMenu = menu.menuId;
	65	+ this.activeMenus = this.getParentMenus(menu);
	66	+ for (const mu of this.activeMenus) {
	67	+ if (mu.childList && mu.childList.length > 0) {
	68	+ mu.isOpen = true; // 하위 메뉴가 있을 시 메뉴 펼치기
	69	+ }
	70	+ }
64	71	}
65	72	},
66	73	async findAll() {
...	...	@@ -85,8 +92,6 @@
85	92
86	93	// 전체 메뉴 트리 store에 저장
87	94	this.$store.commit('setMenuList', this.menuList);
88		-
89		- console.log("menulist",this.menuList)
90	95	}
91	96	} catch (error) {
92	97	alert('에러가 발생했습니다.\n관리자에게 문의하세요.');
...	...	@@ -125,24 +130,28 @@
125	130	},
126	131
127	132	isActive(menuId) {
128		- return this.activeMenus.includes(menuId);
	133	+ // return this.activeMenus.includes(menuId);
	134	+ return this.activeMenus.some(menu => menu.menuId === menuId);
129	135	},
130	136
131	137	getParentMenus(menu) {
132	138	let parents = [];
133	139	while (menu) {
134		- parents.push(menu.menuId);
	140	+ // parents.push(menu.menuId);
	141	+ parents.push(menu);
135	142	menu = this.findParent(menu);
136	143	}
137	144	return parents;
138	145	},
139	146	findParent(menu) {
140	147	for (const parent of this.menuList) {
141		- if (parent.childList && parent.childList.includes(menu)) {
142		- return parent;
	148	+ if (parent.childList?.some(child => child.menuId === menu.menuId)) {
	149	+ // if (parent.childList && parent.childList.includes(menu)) {
	150	+ return parent;
143	151	}
144	152	for (const child of parent.childList \|\| []) {
145		- if (child.childList && child.childList.includes(menu)) {
	153	+ if (child.childList?.some(grand => grand.menuId === menu.menuId)) {
	154	+ // if (child.childList && child.childList.includes(menu)) {
146	155	return child;
147	156	}
148	157	}
...	...	@@ -172,11 +181,19 @@
172	181	watch: {
173	182	// 나중에 네비게이션 가드에서 form 받을 수 있으면 form adm/main으로 갈때 sotre.state값0로 바꿔주기
174	183	$route(to) {
175		- this.currentPath = to.path;
	184	+ this.currentPath = to.path;
176	185	},
177	186	"$store.state.mbrNm"(newVal) {
178	187	this.mbrNm = newVal;
179	188	},
	189	+ '$store.state.menuList': {
	190	+ immediate: true,
	191	+ handler(val) {
	192	+ if (val && val.length > 0) {
	193	+ this.menuCheck();
	194	+ }
	195	+ }
	196	+ }
180	197	}
181	198	};
182	199	</script>

Delete comment