From 42bec322d106dce753b3daeac68ea787840e1b6b Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Mon, 28 Nov 2022 19:26:17 +0800 Subject: [PATCH] fix: the issue that the menu is not updated after the menu item is deleted (#725) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /kind bug /milestone 2.0.0-rc.2 #### What this PR does / why we need it: 修复当菜单项被删除时，没有更新菜单的问题。 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2561 #### Special notes for your reviewer: 测试方式： 1. 创建一个菜单，添加若干个菜单项。 2. 删除部分菜单项，检查菜单下的菜单项个数是否正确。 #### Does this PR introduce a user-facing change? ```release-note 修复 Console 端当菜单项被删除时，没有更新菜单的问题。 ``` --- src/modules/interface/menus/Menus.vue | 75 ++++++++++++------- .../menus/components/MenuEditingModal.vue | 1 + .../menus/components/MenuItemEditingModal.vue | 4 +- 3 files changed, 54 insertions(+), 26 deletions(-) diff --git a/src/modules/interface/menus/Menus.vue b/src/modules/interface/menus/Menus.vue index 254c3ac4..96e72866 100644 --- a/src/modules/interface/menus/Menus.vue +++ b/src/modules/interface/menus/Menus.vue @@ -70,6 +70,8 @@ const handleFetchMenuItems = async (options?: { mute?: boolean }) => { handleFetchMenuItems({ mute: true }); }, 3000); } + + await handleResetMenuItems(); } catch (e) { console.error("Failed to fetch menu items", e); } finally { @@ -86,8 +88,14 @@ onBeforeRouteLeave(() => { }); const handleOpenEditingModal = (menuItem: MenuTreeItem) => { - selectedMenuItem.value = convertMenuTreeItemToMenuItem(menuItem); - menuItemEditingModal.value = true; + apiClient.extension.menuItem + .getv1alpha1MenuItem({ + name: menuItem.metadata.name, + }) + .then((response) => { + selectedMenuItem.value = response.data; + menuItemEditingModal.value = true; + }); }; const handleOpenCreateByParentModal = (menuItem: MenuTreeItem) => { @@ -103,11 +111,17 @@ const onMenuItemEditingModalClose = () => { const onMenuItemSaved = async (menuItem: MenuItem) => { const menuToUpdate = cloneDeep(selectedMenu.value); - if (menuToUpdate) { - const menuItemsToUpdate = cloneDeep(menuToUpdate.spec.menuItems) || []; - menuItemsToUpdate.push(menuItem.metadata.name); + // update menu items + if ( + menuToUpdate && + !menuToUpdate.spec.menuItems?.includes(menuItem.metadata.name) + ) { + if (menuToUpdate.spec.menuItems) { + menuToUpdate.spec.menuItems.push(menuItem.metadata.name); + } else { + menuToUpdate.spec.menuItems = [menuItem.metadata.name]; + } - menuToUpdate.spec.menuItems = menuItemsToUpdate; await apiClient.extension.menu.updatev1alpha1Menu({ name: menuToUpdate.metadata.name, menu: menuToUpdate, @@ -135,12 +149,12 @@ const handleUpdateInBatch = useDebounceFn(async () => { await menuListRef.value.handleFetchMenus(); await handleFetchMenuItems({ mute: true }); } -}, 500); +}, 300); const handleDelete = async (menuItem: MenuTreeItem) => { Dialog.info({ - title: "是否确定删除该菜单？", - description: "删除后将无法恢复", + title: "确定要删除该菜单项吗？", + description: "将同时删除所有子菜单项，删除后将无法恢复", confirmType: "danger", onConfirm: async () => { await apiClient.extension.menuItem.deletev1alpha1MenuItem({ @@ -150,28 +164,39 @@ const handleDelete = async (menuItem: MenuTreeItem) => { const childrenNames = getChildrenNames(menuItem); if (childrenNames.length) { - setTimeout(() => { - Dialog.info({ - title: "检查到当前菜单下包含子菜单，是否删除？", - description: "如果选择否，那么所有子菜单将转移到一级菜单", - confirmType: "danger", - onConfirm: async () => { - const promises = childrenNames.map((name) => - apiClient.extension.menuItem.deletev1alpha1MenuItem({ - name, - }) - ); - await Promise.all(promises); - }, - }); - }, 200); + const deleteChildrenRequests = childrenNames.map((name) => + apiClient.extension.menuItem.deletev1alpha1MenuItem({ + name, + }) + ); + await Promise.all(deleteChildrenRequests); } - await menuListRef.value.handleFetchMenus(); await handleFetchMenuItems(); }, }); }; + +const handleResetMenuItems = async () => { + if (!selectedMenu.value) { + return; + } + + const menuToUpdate = cloneDeep(selectedMenu.value); + + const menuItemNames = menuItems.value.map((menuItem) => { + return menuItem.metadata.name; + }); + + menuToUpdate.spec.menuItems = menuItemNames; + + await apiClient.extension.menu.updatev1alpha1Menu({ + name: menuToUpdate.metadata.name, + menu: menuToUpdate, + }); + + await menuListRef.value.handleFetchMenus({ mute: true }); +};