硅谷(12)菜单管理

菜单管理模块

11.1 模块初始界面

11.1.1 API&&type

API:

import request from '@/utils/request'
import type { PermisstionResponseData, MenuParams } from './type'
//枚举地址
enum API {//获取全部菜单与按钮的标识数据ALLPERMISSTION_URL = '/admin/acl/permission',
}
//获取菜单数据
export const reqAllPermisstion = () => {return request.get<any, PermisstionResponseData>(API.ALLPERMISSTION_URL)
}

TYPE:

注意:type这里使用了嵌套

//数据类型定义
export interface ResponseData {code: numbermessage: stringok: boolean
}
//菜单数据与按钮数据的ts类型
export interface Permisstion {id?: numbercreateTime: stringupdateTime: stringpid: numbername: stringcode: nulltoCode: nulltype: numberstatus: nulllevel: numberchildren?: PermisstionListselect: boolean
}
export type PermisstionList = Permisstion[]
//菜单接口返回的数据类型
export interface PermisstionResponseData extends ResponseData {data: PermisstionList
}
11.1.2 组件获取初始数据
//存储菜单的数据
let PermisstionArr = ref<PermisstionList>([])
//组件挂载完毕
onMounted(() => {getHasPermisstion()
})
//获取菜单数据的方法
const getHasPermisstion = async () => {let result: PermisstionResponseData = await reqAllPermisstion()if (result.code == 200) {PermisstionArr.value = result.data}
}
11.1.3 模板展示数据
<div><el-table:data="PermisstionArr"style="width: 100%; margin-bottom: 20px"row-key="id"border><el-table-column label="名称" prop="name"></el-table-column><el-table-column label="权限值" prop="code"></el-table-column><el-table-column label="修改时间" prop="updateTime"></el-table-column><el-table-column label="操作"><!-- row:即为已有的菜单对象|按钮的对象的数据 --><template #="{ row, $index }"><el-buttontype="primary"size="small":disabled="row.level == 4 ? true : false">{{ row.level == 3 ? '添加功能' : '添加菜单' }}</el-button><el-buttontype="primary"size="small":disabled="row.level == 1 ? true : false">编辑</el-button><el-buttontype="primary"size="small":disabled="row.level == 1 ? true : false">删除</el-button></template></el-table-column></el-table></div>

11.2 更新与添加菜单功能

11.2.1 API&&TYPE

API:

//给某一级菜单新增一个子菜单ADDMENU_URL = '/admin/acl/permission/save',//更新某一个已有的菜单UPDATE_URL = '/admin/acl/permission/update',//添加与更新菜单的方法
export const reqAddOrUpdateMenu = (data: MenuParams) => {if (data.id) {return request.put<any, any>(API.UPDATE_URL, data)} else {return request.post<any, any>(API.ADDMENU_URL, data)}
}
11.2.2 对话框静态
<!-- 对话框组件:添加或者更新已有的菜单的数据结构 --><el-dialogv-model="dialogVisible"><!-- 表单组件:收集新增与已有的菜单的数据 --><el-form><el-form-item label="名称"><el-inputplaceholder="请你输入菜单名称"></el-input></el-form-item><el-form-item label="权限"><el-inputplaceholder="请你输入权限数值"></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="save">确定</el-button></span></template></el-dialog>
11.2.3 收集数据

需要的参数一共是4个,其中code、name由v-model绑定的对话框收集。其余俩个通过点击按钮传递的参数收集。

//携带的参数
let menuData = reactive<MenuParams>({code: '',level: 0,name: '',pid: 0,
})
//添加菜单按钮的回调
const addPermisstion = (row: Permisstion) => {//清空数据Object.assign(menuData, {id: 0,code: '',level: 0,name: '',pid: 0,})//对话框显示出来dialogVisible.value = true//收集新增的菜单的level数值menuData.level = row.level + 1//给谁新增子菜单menuData.pid = row.id as number
}
//编辑已有的菜单
const updatePermisstion = (row: Permisstion) => {dialogVisible.value = true//点击修改按钮:收集已有的菜单的数据进行更新Object.assign(menuData, row)
}
11.2.4 发送请求
//确定按钮的回调
const save = async () => {//发请求:新增子菜单|更新某一个已有的菜单的数据let result: any = await reqAddOrUpdateMenu(menuData)if (result.code == 200) {//对话框隐藏dialogVisible.value = false//提示信息ElMessage({type: 'success',message: menuData.id ? '更新成功' : '添加成功',})//再次获取全部最新的菜单的数据getHasPermisstion()}
}

11.3 删除模块

11.3.1 API
//删除已有的菜单DELETEMENU_URL = '/admin/acl/permission/remove/',
//删除某一个已有的菜单
export const reqRemoveMenu = (id: number) => {return request.delete<any, any>(API.DELETEMENU_URL + id)
}
11.3.2 删除点击函数
<el-popconfirm:title="`你确定要删除${row.name}?`"width="260px"@confirm="removeMenu(row.id)"><template #reference><el-buttontype="primary"size="small":disabled="row.level == 1 ? true : false">删除</el-button></template></el-popconfirm>
11.3.3 删除的回调
//删除按钮回调
const removeMenu = async (id: number) => {let result = await reqRemoveMenu(id)if (result.code == 200) {ElMessage({ type: 'success', message: '删除成功' })getHasPermisstion()}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/461631.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学Linux的第五天

目录 命令解释器-shell-负责解析用户输入的命令 分类&#xff1a; type --查看命令是内置命令、外置命名、alias命令 注意 Linux 中的特殊符号 拓展 命令别名aliasalias 别名原命令 - 参数 常用的别名untar&#xff0c;wget,getpass,ping,speed,ipe,c 删除别名unalias…

谷歌被俄罗斯罚款2,500,000,000,000,000,000,000,000,000,000,000,000美元

是的&#xff01;小鹿没有写错&#xff01;你们也没有看错&#xff01; 谷歌被俄罗斯法院判决罚款$2,500,000,000,000,000,000,000,000,000,000,000,000&#xff08;注意不是卢布&#xff0c;是美元&#xff09;&#xff0c;也就是2.5万亿万亿万亿亿&#xff0c;共计36位数的罚…

Spring Cloud Sleuth(Micrometer Tracing +Zipkin)

分布式链路追踪 分布式链路追踪技术要解决的问题&#xff0c;分布式链路追踪&#xff08;Distributed Tracing&#xff09;&#xff0c;就是将一次分布式请求还原成调用链路&#xff0c;进行日志记录&#xff0c;性能监控并将一次分布式请求的调用情况集中展示。比如各个服务节…

Vision - 开源视觉分割算法框架 Grounded SAM2 配置与推理 教程 (1)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/143388189 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 Ground…

百度如何打造AI原生研发新范式?

&#x1f449;点击即可下载《百度AI原生研发新范式实践》资料 2024年10月23-25日&#xff0c;2024 NJSD技术盛典暨第十届NJSD软件开发者大会、第八届IAS互联网架构大会在南京召开。本届大会邀请了工业界和学术界的专家&#xff0c;优秀的工程师和产品经理&#xff0c;以及其它行…

初认识构建工具

初认识构建工具Webpack & Vite 目录 前言webpack 使用步骤配置文件 _entry_output✨_loader_babel_plugin_source map 开发服务器 前言 不同于node中编写代码&#xff0c;在html、css、js中不能放心使用模块化规范&#xff0c;主要是浏览器兼容性问题&#xff0c;以及…

数据结构 ——— 向上调整建堆和向下调整建堆的区别

目录 前言 向下调整算法&#xff08;默认小堆&#xff09; 利用向下调整算法对数组建堆 向上调整建堆和向下调整建堆的区别​编辑 向下调整建堆的时间复杂度&#xff1a; 向上调整建堆的时间复杂度&#xff1a; 结论 前言 在上一章讲解到了利用向上调整算法对数组进行…

分享几款开源好用的图片在线编辑,适合做快速应用嵌入

图片生成器是指一种工具或软件&#xff0c;用于自动生成图片或图像内容&#xff0c;通常依据用户设定的参数或模板进行操作。这种工具能够帮助用户快速创建视觉效果丰富的图像&#xff0c;而无需具备专业的设计技能。 在数字化时代&#xff0c;图片编辑已经成为日常工作和生活的…

我为何要用wordpress搭建一个自己的独立博客

我在csdn有一个博客&#xff0c;这个博客是之前学习编程时建立的。 博客有哪些好处呢&#xff1f; 1&#xff0c;可以写自己的遇到的问题和如何解决的步骤 2&#xff0c;心得体会&#xff0c;经验&#xff0c;和踩坑 3&#xff0c;可以转载别人的好的技术知识 4&#xff0c;宝贵…

ts:使用fs内置模块简单读写文件

ts&#xff1a;使用fs内置模块简单读写文件 一、主要内容说明二、例子&#xff08;一&#xff09;、fs模块的文件读写1.源码1 &#xff08;fs模块的文件读写&#xff09;2.源码1运行效果 三、结语四、定位日期 一、主要内容说明 在ts中&#xff0c;我们可以使用内置的fs模块来…

十个常见的软件测试面试题,拿走不谢

所有面试问题一般建议先总后分的方式来回答&#xff0c;这样可以让面试官感觉逻辑性很强。 1. 自我介绍 之所以让我们自我介绍&#xff0c;其实是面试官想找一些时间来看简历&#xff0c;所以自我介绍不用太长的时间&#xff0c;1-2分 钟即可。 自我介绍一般按以下方式进行介…

C++中关于 <functional> 的使用

#include <functional> 是 C 标准库中的一个头文件&#xff0c;主要用于提供与函数对象、函数指针和函数适配器相关的功能 一&#xff1a;定义方式 1. 定义和使用 std::function 和 Lambda 表达式 2&#xff1a;使用 std::bind 你可以使用 std::bind 来绑定函数参数&am…

Axios 请求超时设置无效的问题及解决方案

文章目录 Axios 请求超时设置无效的问题及解决方案1. 引言2. 理解 Axios 的超时机制2.1 Axios 超时的工作原理2.2 超时错误的处理 3. Axios 请求超时设置无效的常见原因3.1 配置错误或遗漏3.2 超时发生在建立连接之前3.3 使用了不支持的传输协议3.4 代理服务器或中间件干扰3.5 …

WPF+MVVM案例实战(十五)- 实现一个下拉式菜单(上)

文章目录 1 案例效果2、图标资源下载3、功能实现1.文件创建2、菜单原理分析3、一级菜单两种样式实现1、一级菜单无子项样式实现2、一级菜单有子项样式实现 4、总结 1 案例效果 提示 2、图标资源下载 从阿里矢量素材官网下载需要的菜单图片&#xff0c;如下所示&#xff1a; …

【环境搭建】Apache ZooKeeper 3.8.4 Stable

软件环境 Ubuntu 20.04 、OpenJDK 11 OpenJDK 11&#xff08;如果已经安装&#xff0c;可以跳过这一步&#xff09; 安装OpenJDK 11&#xff1a; $ sudo apt-get update$ sudo apt-get install -y openjdk-11-jdk 设置 JAVA_HOME 环境变量&#xff1a; $ sudo gedit ~/.bash…

后台管理系统的通用权限解决方案(九)SpringBoot整合jjwt实现登录认证鉴权

1&#xff09;创建maven工程jjwt-login-demo&#xff0c;并配置其pom.xml文件如下 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-ins…

国考报名照片无法使用照片审核工具上传失败的解决办法

国考报名过程中&#xff0c;照片审核是至关重要的一步&#xff0c;但许多考生在上传照片时遇到了难题&#xff0c;导致无法继续报名&#xff0c;从而影响抢考场位置&#xff0c;下面就介绍如何快速完成照片处理、审核和上传过审的技巧。 一、国考报名照片基本要求首先&#xff…

vue中如何为不同功能设置不同的默认打印设置(设置不同的打印机)

浏览器自带的window.print 功能较简单&#xff0c;这里使用LODOP露肚皮打印 以下是vue2示例&#xff1a; 从官网中下载Lodop和C-Lodop官网主站安装包并安装到本地电脑可以全局搜索电脑找到安装文件LodopFuncs.js&#xff0c;也可以直接复制我贴出来的文件 //用双端口加载主JS…

数据库管理系统的ACID都各自是什么?

本文基于DBMS中ACID属性的概念&#xff0c;这些属性保证了数据库中执行事务时保持数据一致性、完整性和可靠性所。事务是访问并可能修改数据库内容的单一逻辑工作单元。交易使用读写操作访问数据。为了保持数据库的一致性&#xff0c;在事务前后&#xff0c;遵循某些属性。这些…

ssm基于vue搭建的新闻网站+vue

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码请私聊我 需要定制请私聊 目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 [2 系统…