task-57(账号/权限页面): 实现菜单删除前置校验

menu-manage-model.ts 增 menuDeleteReason 镜像后端仅删叶子约束(有子先删);menu-manage-api.ts
增 deleteMenu DELETE /api/admin/permission-menus/{id};MenusPage 行删除二次确认、
带子节点禁用/拦截并刷新。8 用例全过,419 单测 + build 绿。
This commit is contained in:
2026-09-05 15:20:39 +08:00
parent 45a8161bb2
commit 50a6cf12e7
4 changed files with 123 additions and 3 deletions
@@ -1,10 +1,11 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { createMenu, loadMenuManageTree, updateMenu } from './menu-manage-api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { createMenu, deleteMenu, loadMenuManageTree, updateMenu } from './menu-manage-api'
import {
createMenuForm,
flattenMenuNodes,
menuDeleteReason,
menuFormFromNode,
menuParentChangeReason,
nextSiblingSort,
@@ -76,6 +77,24 @@ async function saveMenu() {
}
}
async function removeMenu(node: MenuManageNode) {
const reason = menuDeleteReason(node)
if (reason) {
ElMessage.warning(reason)
return
}
try {
await ElMessageBox.confirm(`确定删除菜单“${node.name}”吗?`, '删除确认', { type: 'warning' })
await deleteMenu(node.id)
ElMessage.success('删除成功')
await loadMenus()
} catch (error) {
if (error !== 'cancel' && error !== 'close') {
ElMessage.error(error instanceof Error ? error.message : '删除失败')
}
}
}
onMounted(loadMenus)
</script>
@@ -94,9 +113,10 @@ onMounted(loadMenus)
<el-table-column prop="columnKey" label="权限标识" min-width="240" />
<el-table-column prop="routePath" label="路由" min-width="260" />
<el-table-column prop="sortOrder" label="排序" width="100" />
<el-table-column label="操作" width="140">
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button link type="primary" @click="openEdit(row)">编辑</el-button>
<el-button link type="danger" :disabled="menuDeleteReason(row) !== undefined" @click="removeMenu(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -38,3 +38,9 @@ export async function updateMenu(id: number, form: MenuManageForm): Promise<void
const { data } = await http.put<unknown>(`${MENUS_ENDPOINT}/${id}`, toMenuUpdateRequest(form))
unwrap<unknown>(data)
}
/** 删除菜单:DELETE /api/admin/permission-menus/{id}success=false 由 unwrap 抛后端 message。 */
export async function deleteMenu(id: number): Promise<void> {
const { data } = await http.delete<unknown>(`${MENUS_ENDPOINT}/${id}`)
unwrap<unknown>(data)
}
@@ -170,6 +170,13 @@ export function menuParentChangeReason(node: MenuManageNode, parentId: number |
return undefined
}
/** 删除前置校验(镜像后端:仅叶子可删,避免孤儿层级);可删返回 undefined。 */
export function menuDeleteReason(node: MenuManageNode | null | undefined): string | undefined {
const children = node?.children
if (Array.isArray(children) && children.length > 0) return '请先删除该菜单下的子菜单'
return undefined
}
/** 新建/编辑表单空值工厂:默认菜单类型为 admin、排序 0、根父节点。 */
export function emptyMenuManageForm(): MenuManageForm {
return { name: '', columnKey: '', parentId: null, menuType: ADMIN_MENU_TYPE, routePath: '', sortOrder: 0 }