CLWY权限管理（二）--- 用户模块

准备用户模块

在 src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "@/views/layout/IndexView";

Vue.use(VueRouter);

const routes = [
  {
    
    path: "/",
    component: Layout,
    children: [
      {
    
        path: "",
        component: () => import("@/views/HomeView"),
        meta: {
     title: "首页" },
      },
      // 用户
      {
    
        path: "/users",
        component: () => import("@/views/users/ListView"),
        meta: {
     title: "用户列表" },
      },
      {
    
        path: "/users/create",
        component: () => import("@/views/users/CreateView"),
        meta: {
     title: "新增用户" },
      },
      {
    
        path: "/users/edit/:id",
        component: () => import("@/views/users/EditView"),
        meta: {
     title: "编辑用户" },
      },
    ],
  },
];

const router = new VueRouter({
    
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

新建 src/views/users/ListView.vue

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="编号" width="80" prop="id" align="center" ></el-table-column>
    <el-table-column label="用户名" width="180" prop="name" align="center" ></el-table-column>
    <el-table-column label="所属用户组" width="120" align="center">
      <template slot-scope="scope">
        <span>{
   { scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column label="创建日期" width="120" align="center">
      <template slot-scope="scope">
        <span>{
   { scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180" align="center">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button >
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" >删除</el-button >
      </template>
    </el-table-column>
  </el-table>
</template>

<script> export default {
       data() {
       return {
       tableData: [ {
       id: 1, name: "王小虎", title: "超级管理员", date: "2016-05-02", }, {
       id: 2, name: "王小虎", title: "网站编辑", date: "2016-05-04", }, {
       id: 3, name: "王小虎", title: "测试", date: "2016-05-01", }, ], }; }, methods: {
       handleEdit(index, row) {
       console.log(index, row); }, handleDelete(index, row) {
       console.log(index, row); }, }, }; </script>

在 src/views/layout/components/SideBar.vue

.
.
<el-menu-item index="/users">用户</el-menu-item>
.
.

封装接口请求

新建 src/api/users.js

import request from "@/utils/request";

// 查询列表
export function fetchUserList(params) {
    
  return request({
    
    url: "/admin/users",
    method: "get",
    params,
  });
}

// 查询单条
export function fetchUser(id) {
    
  return request({
    
    url: `/admin/users/${
      id}`,
    method: "get",
  });
}

// 创建
export function createUser(data) {
    
  return request({
    
    url: "/admin/users",
    method: "post",
    data,
  });
}

// 修改
export function updateUser(id, data) {
    
  return request({
    
    url: `/admin/users/${
      id}`,
    method: "put",
    data,
  });
}

// 删除
export function deleteUser(id) {
    
  return request({
    
    url: `/admin/users/${
      id}`,
    method: "delete",
  });
}

// 查询登录后用户信息、用户组、获得的权限
export function getMe() {
    
  return request({
    
    url: "/admin/users/me",
    method: "get",
  });
}

用户列表

<template>
  <div>
    <router-link :to="{ path: '/users/create' }">
      <el-button type="primary"> 新增</el-button>
    </router-link>

    <el-table v-loading="loading" :data="users" style="width: 100%">
      <el-table-column label="编号" width="80" prop="id" align="center" ></el-table-column>
      <el-table-column label="用户名" width="180" prop="username" align="center" ></el-table-column>
      <el-table-column label="所属用户组" width="120" align="center">
        <template slot-scope="scope">
          <el-tag size="small">{
   { scope.row.role.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="120" align="center">
        <template slot-scope="scope">
          <span>{
   { scope.row.createdAt | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <router-link :to="{ path: `/users/edit/${scope.row.id}` }">
            <el-button size="mini">编辑</el-button>
          </router-link>
          <el-popconfirm class="delete" title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.id)" >
            <el-button slot="reference" size="mini" type="danger" :disabled="scope.row.id == 1" >
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script> import {
       deleteUser, fetchUserList } from "@/api/users"; export default {
       data() {
       return {
       loading: false, users: [], }; }, created() {
       this.init(); }, methods: {
       // 用户列表 async init() {
       this.loading = true; const res = await fetchUserList(); this.users = res.data.users; this.loading = false; }, // 删除 async handleDelete(id) {
       const res = await deleteUser(id); this.$message.success(res.message); await this.init(); }, }, }; </script>

新增和编辑组件

新增 users/CreateView.vue 和 users/EditView.vue，代码分别如下

<template>
  <user-form :is-edit="false" />
</template>

<script> import UserForm from "./components/UserForm"; export default {
       components: {
       UserForm }, }; </script>

<template>
  <user-form :is-edit="true" />
</template>

<script> import UserForm from "./components/UserForm"; export default {
       components: {
       UserForm }, }; </script>

公共表单

新增 users/components/UserForm.vue

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="form-container" >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" :disabled="isEdit"></el-input>
      </el-form-item>

      <el-form-item label="原始密码" prop="oldPassword" v-if="isEdit">
        <el-input v-model="form.oldPassword" show-password></el-input>
      </el-form-item>

      <el-form-item label="新密码" prop="password">
        <el-input v-model="form.password" show-password></el-input>
      </el-form-item>

      <el-form-item label="重复密码" prop="passwordConfirm">
        <el-input v-model="form.passwordConfirm" show-password></el-input>
      </el-form-item>

      <el-form-item label="用户组" prop="roleId">
        <el-radio v-model="form.roleId" :label="role.id" v-for="role in roles" :key="role.id" >
          {
   { role.name }}
        </el-radio>
      </el-form-item>

      <el-form-item>
        <el-button v-loading="loading" type="primary" @click="submitForm">
          {
   { isEdit ? "立即更新" : "立即创建" }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script> import {
       fetchRoleList } from "@/api/roles"; import {
       fetchUser, createUser, updateUser } from "@/api/users"; export default {
       name: "UserForm", props: {
       isEdit: {
       type: Boolean, default: false, }, }, data() {
       const checkPasswordConfirm = (rule, value, callback) => {
       if (!this.form.password) {
       return callback(); } if (value === "") {
       callback(new Error("请再次输入密码")); } else if (value !== this.form.password) {
       callback(new Error("两次密码输入不一致!")); } else {
       callback(); } }; return {
       roles: [], form: {
       username: "", password: "", roleId: 1, }, rules: {
       username: [ {
       required: true, message: "请输入用户名", trigger: "blur" }, {
       min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur", }, ], password: [ {
       message: "请输入密码", trigger: "blur" }, {
       min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur", }, ], passwordConfirm: [{
       validator: checkPasswordConfirm, trigger: "blur" }], roleId: [{
       required: true, message: "请选择用户组", trigger: "blur" }], }, loading: false, }; }, created() {
       // 读取用户组列表 this.fetchRoles(); // 如果是编辑 if (this.isEdit) {
       this.fetchData(); } }, methods: {
       async fetchRoles() {
       const res = await fetchRoleList(); this.roles = res.data.roles; }, // 查询当前用户 async fetchData() {
       const id = this.$route.params.id; const res = await fetchUser(id); this.form = res.data.user; this.form.password = ""; }, submitForm() {
       this.$refs.form.validate(async (valid) => {
       if (valid) {
       this.loading = true; try {
       let res; if (this.isEdit) {
       const id = this.$route.params.id; res = await updateUser(id, this.form); } else {
       res = await createUser(this.form); } if (res.code !== 20000) {
       this.$message.error(res.message); this.loading = false; } else {
       this.$message.success(res.message); this.loading = false; await this.$router.push({
       path: "/users" }); } } catch (err) {
       this.loading = false; } } }); }, }, }; </script>