task-54(账号/权限页面): 实现后台菜单列表加载

menu-manage-model.ts 增 buildMenuManageTree 按 parentId 组装展示树(同级按 sort+name);
menu-manage-api.ts GET /api/admin/permission-menus(menuType=admin) 扁平拉取并建树;
MenusPage 去内联 http,改走 adapter 展示默认展开树形菜单。8 用例全过,395 单测 + build 绿。
This commit is contained in:
2026-09-05 15:16:25 +08:00
parent 5d9019a40d
commit ffb16bea9a
4 changed files with 183 additions and 0 deletions
@@ -0,0 +1,47 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { loadMenuManageTree } from './menu-manage-api'
import type { MenuManageNode } from './menu-manage-model'
const loading = ref(false)
const rows = ref<MenuManageNode[]>([])
async function loadMenus() {
loading.value = true
try {
rows.value = await loadMenuManageTree()
} catch (error) {
ElMessage.error(error instanceof Error ? error.message : '菜单列表加载失败')
} finally {
loading.value = false
}
}
onMounted(loadMenus)
</script>
<template>
<div class="page-stack">
<div class="page-heading">
<div>
<h2>菜单管理</h2>
<p>维护后台菜单树和页面路由权限粒度仅到菜单/页面</p>
</div>
<el-button type="primary">新增菜单</el-button>
</div>
<el-card shadow="never">
<el-table v-loading="loading" :data="rows" row-key="id" default-expand-all stripe>
<el-table-column prop="name" label="菜单名称" min-width="220" />
<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">
<template #default>
<el-button link type="primary">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>