vue3.2/Vite/Ts90: 展示已有菜单数据
·
Yin灏
目录结构
└─src
├─api
│ └─acl
│ └─menu
│ ├─index.ts
│ └─type.ts
└─views
└─acl
└─permisstion
└─index.vue
处理已有菜单数据
src/api/acl/menu/index.ts
import type { PermisstionResponseData } from "./type";
//...
enum API {
ALLPERMISSTION_URL = "/admin/acl/permission",
}
export const reqAllPermisstion = () =>
request.get<any, PermisstionResponseData>(API.ALLPERMISSTION_URL);
TS 类型
src/api/acl/menu/type.ts
export interface ResponseData {
code: number;
message: message;
ok: boolean;
}
export interface Permisstion {
id?: number;
createTime: string;
updateTime: string;
pid: number;
name: string;
code: null;
toCode: null;
type: number;
status: null;
level: number;
children?: PermisstionList;
select: boolean;
}
export type PermisstionList = Permisstion[];
export interface PermisstionResponseData extends ResponseData {
data: PermisstionList;
}
展示已有菜单
src/views/acl/permisstion/index.vue
<template>
<el-table row-key="id" border default-expand-all :data="PermisstionArr">
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="权限值" prop="code"></el-table-column>
<el-table-column label="修改时间" prop="updateTime"></el-table-column>
<el-table-column label="操作">
<template #="{row}">
<el-button
type="primary"
size="small"
:disabled="row.level === 4 ? true : false"
>{{ row.level === 3 ? '添加功能' : '添加菜单' }}</el-button
>
<el-button
type="primary"
size="small"
:disabled="row.level === 1 ? true : false"
>编辑</el-button
>
<el-button
type="primary"
size="small"
:disabled="row.level === 1 ? true : false"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { reqAllPermisstion } from "@/src/api/acl/menu";
import type {
PermisstionResponseData,
PermisstionList,
} from "@/src/api/acl/menu/type";
let PermisstionArr = ref<PermisstionList>([]);
const getHasPermisstion = async () => {
const result: any = await reqAllPermisstion();
if (result.code === 200) {
PermisstionArr.value = result.data;
}
};
onMounted(() => {
getHasPermisstion();
});
</script>