灏天阁

vue3.2/Vite/Ts89: 删除角色业务

· Yin灏

目录结构

└─src
    ├─api
    │  └─acl
    │      └─role
    │          └─index.ts
    └─views
        └─acl
            └─role
                └─index.vue

处理删除角色业务

src/views/acl/role/index.vue

<template>
  <!-- ... -->
  <el-card>
    <!-- ... -->
    <el-table border :data="allRole">
      <!-- ... -->
      <el-table-column label="操作" align="center" width="280px">
        <template #="{row}">
          <!-- ... -->
          <el-popconfirm
            :title="`确定要删除${row.roleName}?`"
            width="260px"
            @confirm="removeRole(row.id)"
          >
            <template #reference>
              <el-button type="primary" size="small" icon="Delete"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- ... -->
  </el-card>
  <!-- ... -->
</template>
<script setup lang="ts">
  //...
  import { reqRemoveRole } from "@/api/acl/role";
  const removeRole = (id: number) => {
    const result: any = await reqRemoveRole(id);
    if (result.code === 200) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getHasRole(allRole.value.length > 1 ? pageNo.value : pageNo.value - 1);
    } else {
      ElMessage({
        type: "error",
        message: "删除失败",
      });
    }
  };
</script>

处理删除角色接口

src/api/acl/role/index.ts

enum API {
  //...
  REMOVEROLE_URL = "/admin/acl/role/remove/",
}
//...
export const reqRemoveRole = (roleId: number) =>
  request.delete<any, any>(API.REMOVEROLE_URL + roleId);

- Book Lists -