Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

用户管理接口对接

在 src/api 下新建 user.js，代码如下：

import request from '../utils/request'

export default {
    // 获取用户列表
    list(data) {
        return request({
            url: '/user/list',
            method: 'get',
            params:data
        })
    },

    // 根据id查用户
    selectById(data) {
        return request({
            url: '/user/getById',
            method: 'get',
            params: data
        })
    },

    // 根据左关键字查询账号名
    selectByKey(data) {
        return request({
            url: '/user/getByNames',
            method: 'get',
            params:data
        })
    },

    // 新增
    save(data) {
        return request({
            url: '/user/save',
            method: 'post',
            data:data,
            headers: { "Content-Type": "multipart/form-data;" }
        })
    },

    // 修改
    update(data) {
        return request({
            url: '/user/update',
            method: 'post',
            data:data,
            headers: { "Content-Type": "multipart/form-data;" }
        })
    },

    // 禁用
    disableUser(data) {
        return request({
            url: '/user/disable',
            method: 'post',
            data:data,
            headers: { "Content-Type": "multipart/form-data;" }
        })
    },

    // 启用
    enableUser(data) {
        return request({
            url: '/user/enable',
            method: 'post',
            data:data,
            headers: { "Content-Type": "multipart/form-data;" }
        })
    },

    // 批量删除
    delByIds(data) {
        return request({
            url: '/user/delByIds',
            method: 'post',
            data:data,
            headers: { "Content-Type": "multipart/form-data;" }
        })
    },
}

在用户管理界面引入 user.js，代码如下：

import userApi from "../../../api/user";

获取用户列表

list() {
    userApi.list(this.query).then((response) => {
        if (response.code === 20000) {
          let data = response.data.data;
          this.tableData = data.records;

          this.query.current = data.current;
          this.query.pageSize = data.size;
          this.total = data.total;
        } else {
          this.$message.error(response.message);
        }
    });
 },

查询用户

searchData() {
   this.query.username = this.search.name;
   this.query.current = 1;
   this.list();
},

禁用用户

handleDisable(id) {
     this.$confirm("此操作将禁用该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
     }).then(() => {
        const form = new FormData();
        form.append("id", id);

        userApi.disableUser(form).then((response) => {
          if (response.code === 20000) {
            this.$message.success(response.message);
            //刷新页面
            this.list();
          } else {
            this.$message.error(response.message);
          }
        });
     });
},

启用用户

// 启用用户
handleEnable(id){
     this.$confirm("此操作将启用该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
     }).then(() => {
        const form = new FormData();
        form.append("id", id);

        userApi.enableUser(form).then((response) => {
          if (response.code === 20000) {
            this.$message.success(response.message);
            //刷新页面
            this.list();
          } else {
            this.$message.error(response.message);
          }
        });
    });
},

启用前

启用后

批量删除用户

// 全选
handleSelectionChange(val) {
   this.selectedrow = val;
},

// 批量删除
batchdel() {
   if (this.selectedrow.length === 0) {
        this.$message("没有任何被选中的数据！");
   } else {
        this.$confirm("此操作将永久删除被选中的用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          const ids = [];
          for (let i = 0; i < this.selectedrow.length; i++) {
            ids.push(this.selectedrow[i].id);
          }
          
          const form = new FormData();
          form.append("id", ids.join(","));

          userApi.delByIds(form).then((response) => {
            if (response.code === 20000) {
              this.$message.success(response.message);
              //刷新页面
              this.list();
            } else {
              this.$message.error(response.message);
            }
          });
        });
   }
},

删除前

删除后

添加用户

save(formName) {
    this.$refs[formName].validate((valid)=>{
        if(valid){
          const form = new FormData();
          form.append("id", this.userForm.id);
          form.append("username", this.userForm.username);
          form.append("password", this.userForm.password);
          form.append("deleted", Number(this.userForm.deleted));

          userApi.save(form).then((response) => {
            if (response.code === 20000) {
              this.$message.success(response.message);
              // 关闭弹框
                this.showDialog = false;
              //刷新页面
              this.list();
            } else {
              this.$message.error(response.message);
            }
          });
        }
    })
},

编辑用户

// 编辑按钮
edit(row) {
    this.showDialog = true
    this.userForm.id = row.id
    this.userForm.username = row.username
    this.userForm.password = row.password
    this.userForm.deleted = Number(row.deleted)
},

// 确认更新用户
update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const form = new FormData();
          form.append("id", this.userForm.id);
          form.append("username", this.userForm.username);
          form.append("password", this.userForm.password);
          form.append("deleted", Number(this.userForm.deleted));

          userApi.update(form).then((response) => {
            if (response.code === 20000) {
              this.$message.success(response.message);
              // 关闭弹框
                this.showDialog = false;
              //刷新页面
              this.list();
            } else {
              this.$message.error(response.message);
            }
          });
        }
     });
 },

关闭弹框并清除缓存

closeDialog(){
    this.showDialog =false
    this.userForm.username=''
    this.userForm.password =''
    this.userForm.deleted= 0
},