Showing
2 changed files
with
98 additions
and
41 deletions
src/utils/menuTree.js
0 → 100644
| 1 | +export function buildMenuTree(menuList) { | ||
| 2 | + // 创建一个映射，用于快速查找菜单项 | ||
| 3 | + const menuMap = new Map(); | ||
| 4 | + const tree = []; | ||
| 5 | + | ||
| 6 | + // 首先将所有菜单项放入映射中 | ||
| 7 | + menuList.forEach((menu) => { | ||
| 8 | + menuMap.set(menu.menuId, { ...menu, children: [] }); | ||
| 9 | + }); | ||
| 10 | + | ||
| 11 | + // 构建树形结构 | ||
| 12 | + menuList.forEach((menu) => { | ||
| 13 | + const menuItem = menuMap.get(menu.menuId); | ||
| 14 | + if (menu.parentMenuId === 0) { | ||
| 15 | + // 如果是顶级菜单，直接添加到树中 | ||
| 16 | + tree.push(menuItem); | ||
| 17 | + } else { | ||
| 18 | + // 如果不是顶级菜单，找到其父菜单并添加到父菜单的children中 | ||
| 19 | + const parent = menuMap.get(menu.parentMenuId); | ||
| 20 | + if (parent) { | ||
| 21 | + parent.children.push(menuItem); | ||
| 22 | + } | ||
| 23 | + } | ||
| 24 | + }); | ||
| 25 | + | ||
| 26 | + return tree; | ||
| 27 | +} |
| ... | @@ -39,7 +39,7 @@ | ... | @@ -39,7 +39,7 @@ |
| 39 | :data="treeData" | 39 | :data="treeData" |
| 40 | show-checkbox | 40 | show-checkbox |
| 41 | default-expand-all | 41 | default-expand-all |
| 42 | - node-key="id" | 42 | + node-key="menuId" |
| 43 | :default-expanded-keys="expandedKeys" | 43 | :default-expanded-keys="expandedKeys" |
| 44 | :default-checked-keys="checkedKeys" | 44 | :default-checked-keys="checkedKeys" |
| 45 | :props="defaultProps" | 45 | :props="defaultProps" |
| ... | @@ -125,7 +125,7 @@ export default { | ... | @@ -125,7 +125,7 @@ export default { |
| 125 | }, | 125 | }, |
| 126 | defaultProps: { | 126 | defaultProps: { |
| 127 | children: "children", | 127 | children: "children", |
| 128 | - label: "label", | 128 | + label: "menuName", |
| 129 | }, | 129 | }, |
| 130 | searchForm: {}, | 130 | searchForm: {}, |
| 131 | loadings: { | 131 | loadings: { |
| ... | @@ -137,51 +137,81 @@ export default { | ... | @@ -137,51 +137,81 @@ export default { |
| 137 | }; | 137 | }; |
| 138 | }, | 138 | }, |
| 139 | methods: { | 139 | methods: { |
| 140 | + buildMenuTree(menuList) { | ||
| 141 | + // 创建一个映射，用于快速查找菜单项 | ||
| 142 | + const menuMap = new Map(); | ||
| 143 | + const tree = []; | ||
| 144 | + | ||
| 145 | + // 首先将所有菜单项放入映射中 | ||
| 146 | + menuList.forEach((menu) => { | ||
| 147 | + menuMap.set(menu.menuId, { ...menu, children: [] }); | ||
| 148 | + }); | ||
| 149 | + | ||
| 150 | + // 构建树形结构 | ||
| 151 | + menuList.forEach((menu) => { | ||
| 152 | + const menuItem = menuMap.get(menu.menuId); | ||
| 153 | + if (menu.parentMenuId === 0) { | ||
| 154 | + // 如果是顶级菜单，直接添加到树中 | ||
| 155 | + tree.push(menuItem); | ||
| 156 | + } else { | ||
| 157 | + // 如果不是顶级菜单，找到其父菜单并添加到父菜单的children中 | ||
| 158 | + const parent = menuMap.get(menu.parentMenuId); | ||
| 159 | + if (parent) { | ||
| 160 | + parent.children.push(menuItem); | ||
| 161 | + } | ||
| 162 | + } | ||
| 163 | + }); | ||
| 164 | + | ||
| 165 | + return tree; | ||
| 166 | + }, | ||
| 140 | //查询菜单数据 | 167 | //查询菜单数据 |
| 141 | searchTreeData() { | 168 | searchTreeData() { |
| 142 | this.loadings.dialogLoading = true; | 169 | this.loadings.dialogLoading = true; |
| 143 | getRouters() | 170 | getRouters() |
| 144 | .then((res) => { | 171 | .then((res) => { |
| 145 | if (res.code === "200") { | 172 | if (res.code === "200") { |
| 146 | - let arr = []; | 173 | + console.log(this.buildMenuTree(res.data)); |
| 147 | - res.data.forEach((item) => { | 174 | + // console.log(res.data); |
| 148 | - let status = true; | 175 | + // let arr = []; |
| 149 | - if (item.parentMenuId == 0) { | 176 | + |
| 150 | - let obj = { | 177 | + // res.data.forEach((item) => { |
| 151 | - id: item.menuId, | 178 | + // let status = true; |
| 152 | - label: item.menuName, | 179 | + // if (item.parentMenuId == 0) { |
| 153 | - children: [], | 180 | + // let obj = { |
| 154 | - }; | 181 | + // id: item.menuId, |
| 155 | - arr.forEach((menuItem) => { | 182 | + // label: item.menuName, |
| 156 | - if (menuItem.id == item.menuId) { | 183 | + // children: [], |
| 157 | - status = false; | 184 | + // }; |
| 158 | - menuItem.label = item.menuName; | 185 | + // arr.forEach((menuItem) => { |
| 159 | - } | 186 | + // if (menuItem.id == item.menuId) { |
| 160 | - }); | 187 | + // status = false; |
| 161 | - if (status) { | 188 | + // menuItem.label = item.menuName; |
| 162 | - arr.push(obj); | 189 | + // } |
| 163 | - } | 190 | + // }); |
| 164 | - } else { | 191 | + // if (status) { |
| 165 | - let obj = { | 192 | + // arr.push(obj); |
| 166 | - id: item.menuId, | 193 | + // } |
| 167 | - label: item.menuName, | 194 | + // } else { |
| 168 | - }; | 195 | + // let obj = { |
| 169 | - arr.forEach((menuItem) => { | 196 | + // id: item.menuId, |
| 170 | - if (menuItem.id == item.parentMenuId) { | 197 | + // label: item.menuName, |
| 171 | - status = false; | 198 | + // }; |
| 172 | - menuItem.children.push(obj); | 199 | + // arr.forEach((menuItem) => { |
| 173 | - } | 200 | + // if (menuItem.id == item.parentMenuId) { |
| 174 | - }); | 201 | + // status = false; |
| 175 | - if (status) { | 202 | + // menuItem.children.push(obj); |
| 176 | - arr.push({ | 203 | + // } |
| 177 | - id: item.parentMenuId, | 204 | + // }); |
| 178 | - label: "", | 205 | + // if (status) { |
| 179 | - children: [obj], | 206 | + // arr.push({ |
| 180 | - }); | 207 | + // id: item.parentMenuId, |
| 181 | - } | 208 | + // label: "", |
| 182 | - } | 209 | + // children: [obj], |
| 183 | - }); | 210 | + // }); |
| 184 | - this.treeData = arr; | 211 | + // } |
| 212 | + // } | ||
| 213 | + // }); | ||
| 214 | + this.treeData = this.buildMenuTree(res.data); | ||
| 185 | } else { | 215 | } else { |
| 186 | this.alertWarningMsg(res.message); | 216 | this.alertWarningMsg(res.message); |
| 187 | } | 217 | } | ... | ... |
-
Please register or login to post a comment