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);