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

Holyzq

已于 2022-07-17 17:34:03 修改

阅读量331

点赞数

于 2022-07-15 16:41:16 首次发布

本文链接：https://blog.csdn.net/huangdj321/article/details/125807850

版权

本文详细介绍了CLWY系统中用户组管理的实现，包括用户组列表、用户组表单、新增和编辑用户组的功能。重点讲解了获取权限列表的接口封装以及在编辑用户组时开启Redis缓存的必要性。

摘要由CSDN通过智能技术生成

准备用户组模块

在 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: "编辑用户" },
      },
      // 用户组
      {
   
        path: "/roles",
        component: () => import("@/views/roles/ListView"),
        meta: {
    title: "用户组列表" },
      },
      {
   
        path: "/roles/create",
        component: () => import("@/views/roles/CreateView"),
        meta: {
    title: "新增用户组" },
      },
      {
   
        path: "/roles/edit/:id",
        component: () => import("@/views/roles/EditView"),
        meta: {
    title: "编辑用户组" },
      },
    ],
  },
];

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

export default router;

新建 src/views/roles/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>
        <el-input placeholder="请输入排序" class="sort-input"></el-input>
      </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<