本实例教程是.net core 系列实例开发教程-权限管理系统前端开发教程，使用PanJiaChen写的Vue后台模板。

本文源码下载地址：http://www.80cxy.com/Blog/ResourceView?arId=202403191532545995NAAqJh

系列教程地址：http://www.80cxy.com/Blog/ArticleView?arId=202403191517574161ay3s5V

本文实现前端用户管理的相关操作，如添加用户、修改用户、为用户分配角色等功能。页面如下：

/***********用户管理************/
//获取用户列表
export const GetUserList = (data) => request({ url: '/api/System/GetUserList', method: 'post', data })

//保存添加、修改用户信息
export const reqAddOrUpdateUser = (data) => {
    // 带给服务器数据携带ID--修改
    if (data.id) {
        return request({ url: '/api/System/EditUser', method: 'put', data: data })
    }
    else {
        return request({ url: '/api/System/AddUser', method: 'post', data: data })
    }
}

//删除用户信息
export const reqDeleteUser = (id) => {
    return request({ url: `/api/System/DeleteUser?id=${id}`, method: 'delete' })
}

//批量删除用户信息
export const reqDeleteUserRange = (ids) => {
    return request({ url: '/api/System/DeleteUserRange', method: 'delete', data: ids })
}

//保存为用户分配的角色信息
export const reqSetUserRole = (userId, roleId) => {
  return request({
      url: '/api/System/SetUserRole',
      method: 'post',
      params: {
          userId,
          roleId
      }
  })
}

<template>
  <div class="app-container" style="margin: 20px 0">
    <el-form inline>
      <el-form-item>
        <el-input v-model="search.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="searchHandler"
        >查询</el-button
      >
      <el-button type="default" @click="resetSearch">清空</el-button>
    </el-form>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="showAddUser">添加</el-button>
      <el-button
        type="danger"
        @click="removeUsers"
        :disabled="selectedIds.length === 0"
        >批量删除</el-button
      >
    </div>
    <el-table
      border
      stripe
      v-loading="listLoading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        label="用户名"
        width="150"
        prop="userName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="用户昵称"
        prop="realName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="角色"
        prop="roleName"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="info"
            size="mini"
            icon="el-icon-user-solid"
            title="分配角色"
            @click="showAssignRole(row)"
          ></el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            title="修改用户"
            @click="editUser(row)"
          ></el-button>
          <el-popconfirm
            :title="`确定删除${row.userName}吗？`"
            @onConfirm="removeUser(row.id)"
          >
            <el-button
              style="margin-left: 10px"
              slot="reference"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              title="删除用户"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--分页器-->
    <el-pagination
      style="margin-top: 20px; textalign: center"
      :current-page="pageIndex"
      :total="total"
      :page-size="pageSize"
      :page-sizes="[10, 50, 100]"
      @current-change="getPageList"
      @size-change="handleSizeChange"
      layout="prev,pager,next,jumper,->,sizes,total"
    ></el-pagination>

    <el-dialog
      :title="user.id ? '修改用户' : '添加用户'"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        ref="userForm"
        :model="user"
        :rules="fromRules"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="user.userName" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="用户密码" prop="userName" v-show="!user.id">
          <el-input v-model="user.password" placeholder="请输入用户密码" />
        </el-form-item>

        <el-form-item label="真实姓名" prop="realName">
          <el-input
            v-model="user.realName"
            placeholder="请输入真实姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户头像" prop="photoPath">
          <el-input v-model="user.photoPath" placeholder="请输入头像路径" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" :loading="loading" @click="addOrUpdate"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="设置角色" :visible.sync="dialogRoleVisible">
      <el-form label-width="80px">
        <el-form-item label="用户名">
          <el-input disabled v-model="user.userName" placeholder=""></el-input>
        </el-form-item>

        <el-form-item label="角色列表">
          <el-radio-group v-model="user.roleId">
            <el-radio
              v-for="role in allRoles"
              :key="role.id"
              :label="role.id"
              >{{ role.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button :loading="loading" type="primary" @click="assignRole"
          >保存</el-button
        >
        <el-button @click="resetRoleData">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import cloneDeep from "lodash/cloneDeep";
// 添加校验的规则
const createRules = {
    userName: [{ required: true, message: "用户名必须输入" }],
    password: [{ required: true, message: "用户密码必须输入" }],
    realName: [{ required: true, message: "真实姓名必须输入" }],
};
// 修改校验的规则
const editRules = {
    userName: [{ required: true, message: "用户名必须输入" }],
    realName: [{ required: true, message: "真实姓名必须输入" }],
};
export default {
  name: "user",
  data() {
    return {
      pageIndex: 1, //显示第几页
      pageSize: 10, //每页显示条数
      total: 0, //数据总条数
      list: [], //返回数据
      wheres: "[]", //查询条件
      listLoading: false, // 是否显示列表加载的提示
      loading: false, // 是否正在提交请求中
      //查询条件
      search: {
        username: "",
      },
      dialogFormVisible: false,
      user: {}, //添加、修改form数据
      selectedIds: [], //批量删除用户Id列表
      dialogRoleVisible: false, //权限分配
      allRoles: [], // 所有角色列表
    };
  },
  mounted() {
    //获取数据列表方法
    this.getPageList();
  },
  methods: {
    //获取数据列表
    async getPageList(pager = 1) {
      this.pageIndex = pager;
      const { pageIndex, pageSize } = this;
      this.listLoading = true;
      let result = await this.$API.system.GetUserList({
        pageIndex: pageIndex,
        pageSize: pageSize,
        wheres: this.wheres,
        sort: "id",
        order: "desc",
      });
      if (result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.rows;
      }
      this.listLoading = false;
    },
    //获取权限分配菜单数据
    async getRoles() {
      let result = await this.$API.system.GetRoleList();
      if (result.code == 200) {
        this.allRoles = result.data.rows;
      }
    },
    //搜索
    searchHandler() {
      if (this.search.username != "") {
        this.wheres =
          '[{"name":"userName","value":"' +
          this.search.username +
          '","option":"LIKE"}]';
      }
      this.getPageList();
    },
    //重置搜索条件
    resetSearch() {
      this.search = {
        username: "",
      };
      this.wheres = "[]";
      this.getPageList();
    },
    //添加用户
    showAddUser() {
      this.user = {};
      this.dialogFormVisible = true;
      this.$nextTick(() => this.$refs.userForm.clearValidate());
    },
    //修改用户信息
    editUser(row) {
      this.dialogFormVisible = true;
      this.user = cloneDeep(row);
    },
    //删除用户
    async removeUser(id) {
      let result = await this.$API.system.reqDeleteUser(id);
      if (result.code == 200) {
        //点击确定按钮
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.getPageList(
          this.list.length === 1 ? this.pageIndex - 1 : this.pageIndex
        );
      }
    },
    //取消添加、修改
    cancel() {
      this.dialogFormVisible = false;
      this.user = {};
    },
    //保存添加、修改用户信息
    async addOrUpdate() {
      this.$refs.userForm.validate(async (valid) => {
        if (valid) {
          try {
            let result = await this.$API.system.reqAddOrUpdateUser(this.user);
            if (result.code == 200) {
              //点击确定按钮
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.getPageList();
              this.dialogFormVisible = false;
            }
          } catch (err) {
            console.log("程序错误:" + err);
          }
        }
      });
    },
    //当分页器某一页需要展示条数发生变化时触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getPageList();
    },
    //显示角色配置面板
    showAssignRole(row) {
      this.user = row;
      this.dialogRoleVisible = true;
      this.getRoles();
    },
    //批量删除用户
    removeUsers() {
      this.$confirm("确定删除吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async () => {
          await this.$API.system.reqDeleteUserRange(this.selectedIds);
          this.$message.success("删除成功");
          this.getPageList(
            this.list.length === 1 ? this.pageIndex - 1 : this.pageIndex
          );
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
    //复选框选择事件
    handleSelectionChange(selection) {
      this.selectedIds = selection.map((item) => item.id);
    },
    //为用户分配权限
    async assignRole() {
      const userId = this.user.id;
      const roleId = this.user.roleId;
      this.loading = true;
      const result = await this.$API.system.reqSetUserRole(userId, roleId);
      if (result.code == 200) {
        //点击确定按钮
        this.$message({
          type: "success",
          message: "分配角色成功!",
        });
        this.dialogRoleVisible = false;
        this.getPageList(this.pageIndex);
      }
      this.loading = false;
    },
    //重置权限分配
    resetRoleData() {
      this.dialogRoleVisible = false;
      this.allRoles = [];
    },
  },
  computed: {
    //计算表单验证规则
    fromRules() {
      return this.user.id ? editRules : createRules;
    },
  },
};
</script>

  <style>
</style>