1.封装request请求
//进行axios二次封装:使用请求与响应拦截器
import axios from 'axios';
import { ElMessage } from "element-plus";
//引入用户相关的仓库
import useUserStore from '@/store/modules/user';
//第一步:利用axios对象的create方法,去创建axios案例(其他的配置:基础路径、超时的时间)
let request = axios.create({
//基础路径
baseURL: import.meta.env.VITE_APP_BASE_API,//基础路径上会携带/api
timeout: 5000//超时设置
});
//第二步:request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
//获取用户相关的小仓库,获取仓库内部的token,登录成功以后携带给服务器
let userStore=useUserStore();
if (userStore.token){
config.headers.token=userStore.token
}
//config配置对象,headers属性请求头,经常给服务器端携带公共参数
//返回配置对象
// config.headers.token='123'//请求头携带参数
return config;//不返回会报错
});
//第三步:响应拦截器
request.interceptors.response.use((response) => {
//成功回调
//简化数据
return response.data;
}, (error) => {
//失败的回调:处理http网络错误的
//定义一个变量:存储网络错误信息
let message = '';
//http状态码
let status = error.response.status;
switch (status) {
case 401:
message = "token过期"
break;
case 403:
message = "无权访问"
break;
case 404:
message = "请求地址错误"
break;
case 500:
message = "服务器出现问题"
break;
default:
message = "网络出现问题"
break;
}
//提示错误信息
ElMessage({
type: 'error',
message
});
return Promise.reject(error);
});
//对外暴露
export default request;
2.定义ts类型
![](https://img2024.cnblogs.com/blog/2105678/202405/2105678-20240506100130288-1181851441.png)
![](https://img2024.cnblogs.com/blog/2105678/202405/2105678-20240506100244189-1979952522.png)
3.封装接口
//用户管理模块的接口
import request from "@/utils/request";//引入封装好的请求
import type {AllRoleResponseData} from './type';//引入定义好的ts类型
//枚举地址
enum API{
//获取全部职位,当前账号拥有职位的接口
ALLROLEURL='/admin/acl/user/toAssign/'
}
//获取全部的职位以及包含当前用户已有的职位
export const reqAllRole=(userId:number)=>request.get<any,AllRoleResponseData>(API.ALLROLEURL+userId);
4.发请求
(1)测试可否拿到id
//收集用户信息的响应式数组
let userParams = reactive<User>({
username: '',
name: '',
password: ''
})
//分配角色按钮回调
const setRole = (row: User) => {
//抽屉展示
drawer1.value = true;
//存储已有的用户信息
Object.assign(userParams, row);
console.log(userParams.id)
}
- 点击分配角色,可以拿到id
![](https://img2024.cnblogs.com/blog/2105678/202405/2105678-20240506101516771-896395286.png)
(2)测试接口返回结果
//分配角色按钮回调
const setRole = async(row: User) => {
// //抽屉展示
// drawer1.value = true;
//存储已有的用户信息
Object.assign(userParams, row);
//获取全部的职位的数据与当前用户已有的职位数据
let result=await reqAllRole((userParams.id as number));
console.log(result)
}
![](https://img2024.cnblogs.com/blog/2105678/202405/2105678-20240506102037872-1433693958.png)
5.拿数据
import {reqAllRole } from '@/api/acl/user/index';//引入发请求方法
import type {AllRoleResponseData, AllRole } from '@/api/acl/user/type';//引入类型
//定义响应式数据控制抽屉的显示与隐藏
let drawer = ref<boolean>(false)
//当前用户已有的职位
let uesrRole = ref<AllRole>([]);
//存储全部职位的数组
let allRole = ref<AllRole>([]);
//收集用户信息的响应式数组
let userParams = reactive<User>({
username: '',
name: '',
password: ''
})
//分配角色按钮回调
const setRole = async (row: User) => {
//存储已有的用户信息
Object.assign(userParams, row);
//获取全部的职位的数据与当前用户已有的职位数据
let result: AllRoleResponseData = await reqAllRole((userParams.id as number));
if (result.code == 200) {//请求成功:存储需要的数据
//存储全部的职位
allRole.value = result.data.allRolesList;
//存储当前用户已有的职位
uesrRole.value = result.data.assignRoles;
//抽屉展示
drawer1.value = true;
}
}
![](https://img2024.cnblogs.com/blog/2105678/202405/2105678-20240506103202348-234333562.png)
6.展示数据
(1)展示当前用户已有的职位
<!-- 显示职位的复选框 v-model双向绑定搜集数据-->
<el-checkbox-group v-model="userRole">
<el-checkbox v-for="(role, index) in allRole" :label="role" :key="index">{{ role.roleName }}</el-checkbox>
</el-checkbox-group>
![](https://img2024.cnblogs.com/blog/2105678/202405/2105678-20240506104126432-254032360.png)
(2)复选框按钮
<el-form-item label="职位列表">
<!-- 用布尔值checkAll判断全选框勾不勾;indeterminate:设置不确定样式 -->
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
<!-- 显示职位的复选框 v-model双向绑定搜集数据-->
<el-checkbox-group v-model="userRole" @change="handleCheckedCitiesChange">
<el-checkbox v-for="(role, index) in allRole" :label="role" :key="index">{{ role.roleName }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
//收集顶部复选框全选数据
const checkAll=ref<boolean>(false);
//控制顶部全选复选框不确定样式
const isIndeterminate=ref<boolean>(true);
//顶部的全部复选框的change事件
const handleCheckAllChange=(val:boolean)=>{
//val:true(全选)|false(没有全选)
userRole.value=val?allRole.value:[];//如果全选按钮勾了,就把所有职位数组数据赋值给已有职位数组,否则赋空
//不确定的样式
isIndeterminate.value=false;
}
//顶部全部的复选框change事件
const handleCheckedCitiesChange=(value:string[])=>{
// console.log(value)
//顶部复选框勾选的数据,如果勾选的数等于所有职位数组长度就把全选按钮勾上
checkAll.value=value.length===allRole.value.length;
//不确定的样式
isIndeterminate.value=value.length!==allRole.value.length;
}
- 最后实现效果:默认显示已有的职位,如果没有全选框为空,如果全部勾选职位全选按钮为勾,其他情况为-号;对于点击全选框,如果是-或者空时点击全选框变为勾,勾时点击变为空,下面的职位也跟着变
![](https://img2024.cnblogs.com/blog/2105678/202405/2105678-20240506111220043-1939134806.png)