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:
@@ -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>
|
||||
Reference in New Issue
Block a user