vue3.2/Vite/Ts81: 分配角色的静态搭建以及业务处理

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

<template>
  <!-- ... -->
  <el-card>
    <!-- ... -->
    <el-table border :data="userArr">
      <!-- ... -->
      <el-table-column label="操作" width="300px" align="center">
        <template #="{row}">
          <el-button
            type="primary"
            size="small"
            icon="User"
            @click="setRole(row)"
            >分配角色</el-button
          >
          <!-- ... -->
        </template>
      </el-table-column>
    </el-table>
    <!-- ... -->
  </el-card>
  <!-- ... -->
  <!-- 分配角色抽屉结构 -->
  <el-drawer v-model="drawer1">
    <template #header>
      <h4>分配角色（职位）</h4>
    </template>
    <template #default>
      <el-form>
        <el-form-item label="用户姓名">
          <el-input v-model="userParams.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="角色列表">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange "
            >全选</el-checkbox
          >
          <el-checkbox-group v-model="userRole" @change="handleChecked">
            <el-checkbox
              v-for="(role, index) in allRole"
              :key="index"
              :label="role"
              >{{ role.roleName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button type="primary" @click="drawer1 = false">取消</el-button>
      <el-button type="primary" @click="confirmClick()">确定</el-button>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
  import { ref, reactive } from "vue";
  import type {
    User,
    AllRoleResponseData,
    AllRole,
    SetRoleData,
  } from "@/api/acl/user/type";
  import { reqAllRole, reqSetUserRole } from "@/api/acl/user";
  //...
  let userParams = reactive<User>({
    username: "",
    name: "",
    password: "",
  });
  //...
  let drawer1 = ref<boolean>(false);
  let allRole = ref<AllRole>([]);
  let userRole = ref<AllRole>([]);

  let setRole = async (row: User) => {
    drawer1.value = true;
    Object.assign(userParams, row);
    const result: AllRoleResponseData = await reqAllRole(
      userParams.id as number
    );
    if (result.code === 200) {
      // 存储全部职位
      allRole.value = result.data.allRolesList;
      // 存储当前用户已有职位
      userRole.value = result.data.assignRoles;
      drawer1.value = true;
    }
  };

  let checkAll = ref<boolean>(false);
  let isIndeterminate = ref<boolean>(false);

  let handleCheckAllChange = (val: boolean) => {
    userRole.value = val ? allRole.value : [];
    isIndeterminate.value = false;
  };

  let handleChecked = (value: string[]) => {
    let checkedCount = value.length;
    checkAll.value = checkedCount === allRole.value.length;
    isIndeterminate.value =
      checkedCount > 0 && checkedCount < allRole.value.length;
  };

  let confirmClick = async () => {
    let data: SetRoleData = {
      userId: userParams.id as number,
      roleIdList: userRole.value.map((item) => {
        return item.id as number;
      }),
    };
    const result: any = await reqSetUserRole(data);
    if (result.code === 200) {
      ElMessage({
        type: "success",
        message: "分配成功",
      });
      drawer1.value = false;
      getHasUser(pageNo.value); // 留在当前页
    } else {
      ElMessage({
        type: "error",
        message: "分配失败",
      });
    }
  };
</script>

//...
import type { AllRoleResponseData, SetRoleData } from "./type";
enum API {
  //...
  ALLROLEURL = "/admin/acl/user/toAssign",
  SETROLE_URL = "/admin/acl/user/doAssignDole",
}

export const reqAllRole = (userId: number) =>
  request.get<any, AllRoleResponseData>(API.ALLROLEURL + userId);

export const reqSetUserRole = (data: SetRoleData) =>
  request.post<any, any>(API.SETROLE_URL, data);

export interface RoleData {
  id?: number;
  createTime?: string;
  updateTime?: string;
  roleName: string;
  remark: null;
}
export type AllRole = RoleData[];
export interface AllRoleResponseData extends ResponseData {
  data: {
    assignRoles: AllRole;
    allRolesList: AllRole;
  };
}
export interface SetRoleData {
  roleIdList: number[];
  userId: number;
}