CLWY权限管理（四）--- 菜单与权限模块

Holyzq

已于 2022-07-21 09:35:06 修改

阅读量418

点赞数 1

于 2022-07-17 20:37:41 首次发布

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

版权

准备菜单与权限模块

添加路由，在 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: "编辑用户组" },
      },
      // 菜单与权限
      {
   
        path: "/permissions",
        component: () => import("@/views/permissions/ListView"),
        meta: {
    title: "菜单与权限列表" },
      },
    ],
  },
];

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

export default router;

新建 src/views/permissions/ListView.vue

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-tree
          :data="data"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{
  { node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => append(data)">
                新增
              </el-button>
              <el-button type="text" size="mini" @click="() => edit(data)">
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(node, data)"
              >
                删除
              </el-button>
            </span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="100px"
          size="mini"
        >
          <el-form-item label="上级菜单" prop="parentId">
            <el-cascader
              :options="options"
              v-model="form.parentId"
              :props="{
                checkStrictly: true,
                expandTrigger: 'hover',
                emitPath: false,
              }"
              clearable
              :show-all-levels="false"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="form.title"
              placeholder="例：分类标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input
              v-model="form.icon"
              placeholder="例：el-icon-sunny"
            ></el-input>
          </el-form-item>