vue3.2/Vite/Ts82: 用户删除业务

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

enum API {
  DELETEUSER_URL = "/admin/acl/user/remove/",
  DELETEALLUSER_URL = "/admin/acl/user/batchRemove",
}
//...
export const reqRemoveUser = (userId: number) =>
  request.delete<any, any>(API.DELETEUSER_URL + userId);
export const reqSelectUser = (idList: number[]) =>
  request.delete<any, any>(API.DELETEALLUSER_URL, { data: idList });

<template>
  <!-- ... -->
  <el-card>
    <!-- ... -->
    <el-button
      type="primay"
      :disabled="selectIdArr.length ? false : true"
      @click="deleteSelectUser"
      >批量删除</el-button
    >
    <el-table border :data="userArr" @selection-change="selectChange">
      <!-- ... -->
      <el-table-column label="操作" width="300px" align="center">
        <template #="{row}">
          <!-- ... -->
          <el-popconfirm
            :title="`确定要删除${row.username}?`"
            width="260px"
            @confirm="deleteUser(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 { reqRemoveUser, reqSelectUser } from "@/api/acl/user";

  //...
  let selectIdArr = ref<User[]>([]);
  //...
  const deleteUser = async (userId: number) => {
    const result: any = await reqRemoveUser(userId);
    if (result.code === 200) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getHasUser(userArr.value.length > 1 ? pageNo.value : pageNo.value - 1);
    } else {
      ElMessage({
        type: "error",
        message: "删除失败",
      });
    }
  };

  const selectChange = (value: any) => {
    selectIdArr.value = value;
  };

  const deleteSelectUser = async () => {
    let idList: any = selectIdArr.value.map((item) => item.id);
    const result: any = await reqSelectUser(idList);
    if (result.code === 200) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      getHasUser(userArr.value.length > 1 ? pageNo.value : pageNo.value - 1);
    } else {
      ElMessage({
        type: "error",
        message: "删除失败",
      });
    }
  };
</script>