灏天阁

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>

- Book Lists -