0
0

vue后台系统管理项目-菜单权限管理功能

⭐️⭐️⭐️ 作者：船长在船上
🚩🚩🚩 主页：来访地址船长在船上的博客
🔨🔨🔨 简介：CSDN前端领域优质创作者，资深前端开发工程师，专注前端开发，在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习。

🔔🔔🔔 感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以点赞收藏关注、支持一下博主。如有疑问可以留言、评论，看到后会及时回复。

vue后台系统管理项目：

  • 技术选型：vue + element-ui
  • 菜单权限管理模块功能
  1. 菜单列表查询，通过（菜单名称；类型分为：全部、一级菜单、二级菜单；状态：启用、禁用）进行数据搜索。
  2. 查询、重置功能
  3. 菜单列表分页实现
  4. 菜单详情查看、菜单禁用、菜单编辑、删除操作
  5. 新建菜单功能包括对（菜单名称、类型、排序、url地址、图标、备注、父菜单选择）选项信息的配置。

vue后台系统管理项目

menu.vue 菜单页面

  • 菜单名称、类型、状态搜索条件
  • 菜单列表table
  • 分页器

table属性：

  1. border：是否带有纵向边框
  2. highlight-current-row：是否要高亮当前行
  3. header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style
  4. cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style
  1. <!--菜单管理-->
  2. <template>
  3.   <div class="p20">
  4.     <!-- 面包屑导航 -->
  5.     <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumbTips">
  6.       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  7.       <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
  8.     </el-breadcrumb>
  9.     <!-- 搜索框-->
  10.     <el-form :model="searchForm" ref="searchForm" label-width="100px" class="demo-ruleForm" size="35">
  11.       <el-row>
  12.         <el-col :span="5">
  13.           <div class="grid-content bg-purple-light">
  14.             <el-form-item label="菜单名称" prop="name">
  15.               <el-input v-model="searchForm.name" placeholder="请输入菜单名称"></el-input>
  16.             </el-form-item>
  17.           </div>
  18.         </el-col>
  19.         <el-col :span="5">
  20.           <div class="grid-content bg-purple-light">
  21.             <el-form-item label="类型" prop="type">
  22.               <el-select v-model="searchForm.type" placeholder="请选择类型">
  23.                 <el-option label="全部" value=""></el-option>
  24.                 <el-option label="一级菜单" value="1"></el-option>
  25.                 <el-option label="二级菜单" value="2"></el-option>
  26.                 <el-option label="按钮" value="3"></el-option>
  27.               </el-select>
  28.             </el-form-item>
  29.           </div>
  30.         </el-col>
  31.         <el-col :span="5">
  32.           <div class="grid-content bg-purple-light">
  33.             <el-form-item label="状态" prop="disable">
  34.               <el-select v-model="searchForm.disable" placeholder="请选择">
  35.                 <el-option label="全部" :value=null></el-option>
  36.                 <el-option label="启用" :value=false></el-option>
  37.                 <el-option label="禁用" :value=true></el-option>
  38.               </el-select>
  39.             </el-form-item>
  40.           </div>
  41.         </el-col>
  42.         <el-col :span="24">
  43.           <div class="grid-content bg-purple-light">
  44.             <el-form-item>
  45.               <el-button type="primary" @click="submitSearchForm('searchForm')">查询</el-button>
  46.               <el-button @click="resetSearchForm('searchForm')">重置</el-button>
  47.               <el-button @click="addMenu('menuForm')" type="primary">新建菜单</el-button>
  48.             </el-form-item>
  49.           </div>
  50.         </el-col>
  51.       </el-row>
  52.     </el-form>
  53.     
  54.     <!--表格-->
  55.     <el-table :data="tableData" border highlight-current-row
  56.               :header-cell-style="{textAlign: 'center', background: '#fafafa'}" :cell-style="{ textAlign: 'center' }"
  57.               style="width: 100%">
  58.       <el-table-column prop="name" label="名称"></el-table-column>
  59.       <el-table-column prop="type" label="类型">
  60.         <template slot-scope="scope">
  61.           {{ scope.row.type === '1' ? '一级菜单' : scope.row.type === '2' ? '二级菜单' : '按钮' }}
  62.         </template>
  63.       </el-table-column>
  64.       <el-table-column prop="sortNo" label="排序号"></el-table-column>
  65.       <el-table-column prop="url" label="地址"></el-table-column>
  66.       <el-table-column prop="icon" label="图标"></el-table-column>
  67.       <el-table-column prop="remark" label="备注"></el-table-column>
  68.       <el-table-column prop="disable" label="状态">
  69.         <template slot-scope="scope">
  70.           {{ scope.row.disable === false ? '启用' : '禁用' }}
  71.         </template>
  72.       </el-table-column>
  73.       <el-table-column prop="createTime" label="创建时间"></el-table-column>
  74.       <el-table-column prop="updateTime" label="修改时间"></el-table-column>
  75.       <el-table-column label="操作" width="200">
  76.         <template slot-scope="scope">
  77.           <el-button @click="handleEditClick(scope.row)" type="text" size="small">查看详情</el-button>
  78.           <el-button @click="handleDisabledClick(scope.row)" type="text" size="small"
  79.                      :style="scope.row.disable === false?{color:'red'}:''">
  80.             <!-- <span v-if="scope.row.disable === false">禁用</span>
  81.             <span v-if="scope.row.disable === true">启用</span> -->
  82.             <!-- 更改 -->
  83.             {{ scope.row.disable === false ? '禁用' : '启用' }}
  84.           </el-button>
  85.           <el-button @click="handleDeleteClick(scope.row)" type="text" size="small">删除</el-button>
  86.         </template>
  87.       </el-table-column>
  88.     </el-table>
  89.     <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
  90.                    :current-page="pagination.pageNum" :page-sizes="[10, 20, 30, 40, 50]"
  91.                    :page-size="pagination.pageSize"
  92.                    layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
  93.     <!-- 菜单查看、编辑详情弹框-->
  94.     <el-dialog :title="menuFormTitle" :visible.sync="dialogMenuForm">
  95.       <el-form :model="menuForm" :inline="true" ref="menuForm">
  96.         <el-form-item label="菜单名称" :label-width="'120px'" prop="name">
  97.           <el-input v-model="menuForm.name" autocomplete="off" style="width: 300px"></el-input>
  98.         </el-form-item>
  99.         <el-form-item label="类型" :label-width="'120px'" prop="type">
  100.           <el-select v-model="menuForm.type" style="width: 300px" @change="typeChange">
  101.             <el-option label="一级菜单" value="1"></el-option>
  102.             <el-option label="二级菜单" value="2"></el-option>
  103.             <el-option label="按钮" value="3"></el-option>
  104.           </el-select>
  105.         </el-form-item>
  106.         <el-form-item label="排序号" :label-width="'120px'" prop="sortNo">
  107.           <el-input v-model="menuForm.sortNo" autocomplete="off" style="width: 300px"></el-input>
  108.         </el-form-item>
  109.         <el-form-item label="url" :label-width="'120px'" prop="url">
  110.           <el-input v-model="menuForm.url" autocomplete="off" style="width: 300px"></el-input>
  111.         </el-form-item>
  112.         <el-form-item label="图标" :label-width="'120px'" prop="icon">
  113.           <el-input v-model="menuForm.icon" autocomplete="off" style="width: 300px"></el-input>
  114.         </el-form-item>
  115.         <el-form-item label="备注" :label-width="'120px'" prop="remark">
  116.           <el-input v-model="menuForm.remark" autocomplete="off" style="width: 300px"></el-input>
  117.         </el-form-item>
  118.         <el-form-item label="父菜单" :label-width="'120px'" prop="parentId" v-show = "menuForm.type != '1'">
  119.           <el-cascader :options="options" v-model="menuForm.parentId"
  120.                        :props="{checkStrictly: true,value:'id',label:'name',children:'childMenu',emitPath: false}"
  121.                        @change="handleSelectChange(menuForm.parentId)"></el-cascader>
  122.         </el-form-item>
  123.       </el-form>
  124.       <div slot="footer" class="dialog-footer">
  125.         <el-button @click="esc('menuForm')">取 消</el-button>
  126.         <el-button type="primary" @click="confirmButtonFun()">确 定</el-button>
  127.       </div>
  128.     </el-dialog>
  129.   </div>
  130. </template>

style 样式

  1. <style scoped>
  2. .el-pagination {
  3.   text-align: right;
  4.   margin-top: 20px;
  5. }
  7. .demo-ruleForm {
  8.   margin-top: 20px;
  9. }
  10. </style>

data数据定义

搜索条件、分页、table数据、菜单选项等定义 

  1. data() {
  2.     return {
  3.       options: [],
  4.       pagination: {
  5.         pageNum: 1,
  6.         pageSize: 10,
  7.         total: 0
  8.       },
  9.       searchForm: {
  10.         name: "",
  11.         type: "",
  12.         disable: null
  13.       },
  14.       disableOrEnableForm: {
  15.         id: "",
  16.         disable: true
  17.       },
  18.       addButton: false,
  19.       dialogMenuForm: false,
  20.       menuFormTitle: "",
  21.       menuForm: {
  22.         id: "",
  23.         name: "",
  24.         type: "",
  25.         sortNo: "",
  26.         url: "",
  27.         parentId: "",
  28.         remark: "",
  29.         icon: ""
  30.       },
  31.       tableData: []
  32.     };
  33.   },

接口引入

  1. import {
  2.   addMenu,//添加菜单
  3.   deleteMenu,//删除菜单
  4.   getAllMenu,//获取全部菜单
  5.   getMenuPage,//菜单列表数据
  6.   menuDisableOrEnable,//菜单禁用
  7.   menuInfo,//菜单详情
  8.   updateMenu//更新、编辑菜单
  9. } from "../../api/userMG";

methods方法

  • 获取菜单列表数据方法，调用getMenuPage接口
  1.     //获取菜单列表函数
  2.     getMenuPageFun() {
  3.       this.searchForm.pageSize = this.pagination.pageSize;
  4.       this.searchForm.pageNum = this.pagination.pageNum;
  5.       getMenuPage(this.searchForm).then(res => {
  6.         if (res.code === 200) {
  7.           console.log(res, "菜单管理页面请求列表");
  8.           this.tableData = res.data.records;
  9.           this.pagination.total = res.data.total;
  10.         } else {
  11.           this.$message.error(res.msg);
  12.         }
  13.       });
  14.     },
  • 获取父菜单下拉框 方法，调用getAllMenu接口

  1.     //父菜单下拉框
  2.     getAllMenuFun() {
  3.       getAllMenu().then(res => {
  4.         if (res.code === 200) {
  5.           this.options = res.data;
  6.         } else {
  7.           this.$message.error("菜单获取失败！");
  8.         }
  9.       });
  10.     },
  • 下拉菜单改变选择事件，获取选项的值

  1. handleSelectChange(value) {
  2.       this.menuForm.parentId = value;
  3. },
  • 菜单类型改变事件
  1. typeChange(value) {
  2.       if (value == '1'){
  3.         this.menuForm.parentId = '';
  4.       }
  5. },
  • 菜单分页查询，调用getMenuPageFun接口获取菜单列表数据，查询时候记得重置页码pageNum为第一页
  1. submitSearchForm() {
  2.       this.pagination.pageNum = 1;
  3.       this.getMenuPageFun();
  4. },
  • 重置方法，调用getMenuPageFun接口获取菜单列表数据

resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

  1. resetSearchForm(searchForm) {
  2.       this.pagination.pageNum = 1;
  3.       this.$refs[searchForm].resetFields();
  4.       this.searchForm.type = "";
  5.       this.searchForm.name = "";
  6.       this.searchForm.disable = null;
  7.       this.getMenuPageFun();
  8. },
  • 选择一页几条数据

size-cahange：pageSize 改变时会触发 每页条数的变化

  1. handleSizeChange(val) {
  2.       this.pagination.pageSize = val;
  3.       this.pagination.pageNum = 1;
  4.       this.getMenuPageFun();
  5. },
  • 选择第几页

current-change ：currentPage 改变时会触发 当前页值得变化

  1. handleCurrentChange(val) {
  2.       this.pagination.pageNum = val;
  3.       this.getMenuPageFun();
  4. },
  • 弹窗确定按钮：判断修改菜单调用updateMenu接口，添加菜单调用addMenu接口
  1.     //确定按钮函数
  2.     confirmButtonFun() {
  3.       //修改菜单
  4.       if (this.addButton === false) {
  5.         updateMenu(this.menuForm).then(res => {
  6.           if (res.code === 200) {
  7.             this.$message.success("操作成功");
  8.             this.dialogMenuForm = false;
  9.             this.reload();
  10.           } else {
  11.             this.$message.error("操作失败");
  12.           }
  13.         })
  14.       }
  15.       //添加菜单
  16.       if (this.addButton === true) {
  17.         addMenu(this.menuForm).then(res => {
  18.           if (res.code === 200) {
  19.             this.dialogMenuForm = false;
  20.             this.$message.success("添加成功");
  21.             this.reload();
  22.           } else {
  23.             this.$message.error(res.msg);
  24.           }
  25.         })
  26.       }
  27.     },
  • 查看详情 ，调用menuInfo****接口
  1.     //查看详情
  2.     handleEditClick(row) {
  3.       this.dialogMenuForm = true;
  4.       this.menuFormTitle = "编辑菜单";
  5.       this.addButton = false;
  6.       menuInfo({id: row.id}).then(res => {
  7.         if (res.code === 200) {
  8.           this.menuForm.name = res.data.name;
  9.           this.menuForm.type = res.data.type;
  10.           this.menuForm.sortNo = res.data.sortNo;
  11.           this.menuForm.url = res.data.url;
  12.           this.menuForm.parentId = res.data.parentId;
  13.           this.menuForm.remark = res.data.remark;
  14.           this.menuForm.id = res.data.id;
  15.           this.menuForm.icon = res.data.icon;
  16.         }
  17.       });
  18.     },
  • 删除菜单，调用**deleteMenu **接口，添加confirm弹窗提示
  1.     //删除菜单
  2.     handleDeleteClick(row) {
  3.       this.$confirm("确定删除当前菜单吗？", "提示", {
  4.         confirmButtonText: "确定",
  5.         cancelButtonText: "取消",
  6.         type: "warning"
  7.       }).then(() => {
  8.         deleteMenu({"id": row.id}).then(res => {
  9.           if (res.code === 200) {
  10.             this.reload();
  11.             this.$message.success("删除成功");
  12.           } else {
  13.             this.$message.error("删除失败");
  14.           }
  15.         })
  16.       })
  17.     },
  • 新建菜单按钮，调用addMenu接口
  1.     //新建菜单按钮
  2.     addMenu(menuForm) {
  3.       this.addButton = true;
  4.       this.dialogMenuForm = true;
  5.       this.menuFormTitle = "新建菜单";
  6.       if (this.$refs[menuForm] !== undefined) {
  7.         this.$refs[menuForm].resetFields();
  8.       }
  9.     },
  • 取消按钮

resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 

  1.     //取消按钮
  2.     esc(menuForm) {
  3.       this.dialogMenuForm = false;
  4.       this.$refs[menuForm].resetFields();
  5.     },
  • 更改，启用和禁用 ，调用menuDisableOrEnable接口
  1.     // 更改，启用和禁用
  2.     handleDisabledClick(row) {
  3.       this.$confirm(
  4.         row.disable === true
  5.           ? "是否将此用户开启使用?"
  6.           : "是否将此用户禁止使用?",
  7.         "提示",
  8.         {
  9.           confirmButtonText: "确定",
  10.           cancelButtonText: "取消",
  11.           type: "warning"
  12.         }
  13.       )
  14.         .then(() => {
  15.           let params = {
  16.             disable: row.disable === true ? "false" : "true",
  17.             id: row.id
  18.           };
  19.           menuDisableOrEnable(params)
  20.             .then(res => {
  21.               this.loading = false;
  22.               if (res.code === 200) {
  23.                 console.log(res.data, "请求菜单启用和禁用");
  24.                 this.$message.success({
  25.                   message: row.disable === true ? "启用成功" : "禁用成功"
  26.                 });
  27.                 this.reload();
  28.               } else {
  29.                 this.$message.error(res.msg);
  30.               }
  31.             })
  32.             .catch(err => {
  33.               this.loading = false;
  34.               this.$message.error("菜单加载失败，请稍后再试！");
  35.             });
  36.         })
  37.         .catch(() => {
  38.           this.$message({
  39.             type: "info",
  40.             message: "已取消操作"
  41.           });
  42.         });
  43.     }

created接口请求

  • this.getMenuPageFun();//获取菜单列表数据
  • this.getAllMenuFun();//获取所有菜单
  1. created() {
  2.     this.getMenuPageFun();//获取菜单列表数据
  3.     this.getAllMenuFun();//获取所有菜单
  4.   },

👉👉👉 欢迎来访船长在船上的博客，文章持续更新；项目功能持续迭代，请及时收藏关注，方便查看。 发文不易，点赞收藏评论关注一下！

标签： 前端 javascript vue.js
本文转载自: https://blog.csdn.net/SmartJunTao/article/details/126864993
版权归原作者 船长在船上 所有， 如有侵权，请联系我们删除。
登录后发布评论

“vue后台系统管理项目-菜单权限管理功能”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？