vue2人力资源项目9权限管理

页面搭建

<template><div class="container"><div class="app-container"><el-button size="mini" type="primary">添加权限</el-button><el-table-column label="名称" /><el-table-column label="标识" /><el-table-column label="描述" /><el-table-column label="操作"><el-button type="primary" mini="size">添加</el-button><el-button type="primary" mini="size">删除</el-button><el-button type="primary" mini="size">编辑</el-button></el-table-column></div></div>
</template>

封装接口调用

api

import request from '@/utils/request'// 获取权限列表
export function getPermissionList() {return request({url: '/sys/permission'})
}

一进页面就调用

export default {name: 'Permission',created() {this.getPermissionList()},methods: {async getPermissionList() {const result = await getPermissionList}}
}

 将获取的数据转换为树形

 methods: {async getPermissionList() {// 将获取的数据转换为树形this.list = transListToTreeData(await getPermissionList, 0)}}

给表格绑定数据,添加 row-key和default-expand-all和默认展开节点属性

 <el-table :data="list" roe-key="id" default-expand-all>

用插槽和v-if设置二级权限没有添加

 <template v-slot="{row}"><el-button v-if="row.type === 1" type="primary" mini="size">添加</el-button><el-button type="primary" mini="size">删除</el-button><el-button type="primary" mini="size">编辑</el-button></template>

员工角色分配-弹出层

 点击按钮

1.设置控制退出角色的显示的变量

 showRoleDialog: false,

2.visible加.sync可以让我们点击x直接关闭弹层

  <el-dialog :visible.sync="showRoleDialog" />

3.封装api


// 获取可用角色
export function getEnableRoleList() {return request({url: '/sys/role/list/enabled'})
}

4.弹出层

<el-checkbox-group v-model="roleIds"><el-checkbox v-for="item in roleList" :key="item.id">{{ item.name }}</el-checkbox></el-checkbox-group>

回显数据

1.回显数据 

  methods: {// 点击角色按钮弹层出现async btnRole(id) {// 通过传入的id获取当前用户所拥有的角色this.roleList = await getEnableRoleList()// 记录当前点击的id,因为之后确定取消要存取给对应的用户this.currentUserId = id// 调用接口,解构数据,获取当前用户拥有的角色const { roleIds } = await getEmployeeDetail(id)// 赋值给对应的显示的勾选this.roleIds = roleIds// 先获取接口,获取成功了在显示弹层,否则页面来不及跳转this.showRoleDialog = true},

 2.确定按钮

调用接口,传入参数,提示信息

 async  btnRoleOk() {await assignRole({// 传入参数id: this.currentUserId,roleIds: this.roleIds})this.$message.success('分配用户角色成功')this.showRoleDialog = false}

3.取消按钮

          <el-button size="mini" @click="showRoleDialog=false">取消</el-button>

给角色分配权限-弹出层

1.控制弹层显示(:visible要加.sync修饰符,还要加title)

   <el-dialog :visible.sync=" showPermissionDialog" title="分配权限"><!--放置权限数据--></el-dialog>

2.步骤同上

这里用了文档里的方法,通过获取实例调用方法来实现双向绑定

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

堆的概念及结构

目录 堆的性质&#xff1a; 堆的实现 堆向下调整算法 堆的创建 堆的插入 堆的删除 堆的应用 堆排序 对比冒泡的优势&#xff1a; 代码 头文件 源文件 如果有一个关键码的集合K { &#xff0c; &#xff0c; &#xff0c;…&#xff0c; }&#xff0c;把它的所有元…

Python代码:五、格式化输出(1)

1、题目 牛牛、牛妹和牛可乐正在Nowcoder学习Python语言&#xff0c;现在给定他们三个当中的某一个名字name&#xff0c; 假设输入的name为Niuniu&#xff0c;则输出 I am Niuniu and I am studying Python in Nowcoder! 请按以上句式输出相应的英文句子。 一行一个字符串表…

【Spring】AOP中的核心概念:通知(Advice)和切点(Pointcut)

目录 1、通知(Advice) 1.1、前置通知 1.2、后置通知 1.3、返回通知 1.4、异常通知 1.5、通知的执行顺序 2、切点(Pointcut) 2.1、切点表达式的抽取 2.2、切点标识符 2.2.1、execution 2.2.2、within 2.2.3、annotation 1、通知(Advice) 通知(Advice)&#xff1a;在…

mybaties查询!!!你就说灵不灵活吧

你就说灵不灵活吧 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace"com.ruoyi.sys…

白鲸开源CEO郭炜在2024 DataOps发展大会上获聘专家

2024年5月15日&#xff0c;白鲸开源CEO郭炜在2024 DataOps发展大会上被正式聘任为DataOps专家&#xff0c;并获得了荣誉证书。本次大会由中国通信标准化协会主办&#xff0c;中关村科学城管委会提供支持&#xff0c;大数据技术标准推进委员会&#xff08;CCSATC601&#xff09;…

CSS之浮动

目录 浮动常见网页布局标准流&#xff08;普通流、文档流&#xff09;为什么需要浮动什么是浮动浮动特性&#xff08;重难&#xff09;注意&#xff1a;清除浮动 浮动 常见网页布局 本质&#xff1a;用CSS来摆放盒子&#xff0c;把盒子摆放到相应的位置 三种常见布局方式&…

【亚马逊云】注册APN账号及报考AWS认证考试说明演示

文章目录 1. 登录AWS网站2. 注册APN账号3. 更改APN账号密码&#xff08;选&#xff09;4. 修改APN账号信息&#xff08;选&#xff09;5. 查看AWS认证情况&#xff08;选&#xff09;6. AWS认证考试报名流程7. 修改报名控制台语言版本&#xff08;选&#xff09;8. 开始报名AWS…

首战告捷!KCM Trade漂移队出征2024日本漂移锦标赛(FDJ2)

卓越之姿&#xff0c;非凡之势&#xff01;KCM Trade漂移队以实力点燃激情 当激情与速度交织&#xff0c;当硝烟四起的战场转移到赛车领域&#xff0c;我们见证了一场精彩绝伦、实力与策略并存的较量——KCM Trade漂移队在2024日本漂移锦标赛&#xff08;FDJ2&#xff09;上展现…

专项培训:实在智能携手中国总会计师协会,共襄金融行业数字化转型

6月19日—23日&#xff0c;中国总会计师协会即将在浙江杭州举办“基于大模型的 AI Agent数字员工在金融行业实践应用专项培训”。本次培训旨在深入探讨和实践人工智能技术在金融行业的应用&#xff0c;推动金融行业的智能化和高效化发展。 作为本次培训的协办单位&#xff0c;…

软考--软件设计师--试题六--工厂方法模式(Factory Method)

工厂方法模式(Factory Method) 1、意图 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪儿一个类&#xff0c;factory method使一个类的实例化延迟到其子类。 2、结构 3、适用性 a、当一个类不知道它所必须创建的对象的类的时候。 b、当一个类希望由它的子类来指定…

第二证券股市技巧|港股交易规则有哪些?

港股商场作为全球首要的股票商场之一&#xff0c;招引了很多出资者的目光。关于港股的生意规则有哪些&#xff0c;第二证券下面就为大家详细介绍一下。 港股的生意规则&#xff1a; 1、港股生意时刻&#xff1a;港股商场的生意时刻分为上午和下午两个时段&#xff0c;上午的生…

零知识证明:哈希函数-Poseidon2代码解析与benchmark

1、哈希函数(Hash Function)与Poseidon 在密码学中,哈希函数是一种将任意大小的数据映射到固定大小的输出的函数。哈希函数的输出称为哈希值或哈希码。哈希函数具有单向性和抗碰撞性。一些常见的哈希函数包括 MD5、SHA-1、SHA-256 和 SHA-3。例如,假设您要验证一个文件的完整…

第八篇 Asciidoc 输出 All In One HTML 解决图片无法显示问题

问题:我的图片显示不出来了 小明使用 Asciidoc 来记笔记,他将笔记输出为 HTML 文件。小丽向小明借笔记。小明将 Asciidoc 笔记输出为 HTML文件,并拷贝给了小丽。 但是,小丽发现,图片都显示不出来了。 小丽:小明,你给我的笔记,图片都显示不出来啊。 小明:是我给你的…

2024CCPC郑州邀请赛暨河南省赛(A,B,C,D,F,G,H,J,K,L,M)

2024 National Invitational of CCPC (Zhengzhou), 2024 CCPC Henan Provincial Collegiate Programming Contest 2024 年中国大学生程序设计竞赛全国邀请赛&#xff08;郑州&#xff09;暨第六届 CCPC 河南省大学生程序设计竞赛 比赛链接 这场的题说实话难度其实都不大&…

AndroidStudio集成高德地图后出现黑屏并报错

报错内容为&#xff1a;No implementation found for void com.autonavi.base.ae.gmap.GLMapEngine.nativeMainThreadTrigger(int, long) (tried Java_com_autonavi_base_ae_gmap_GLMapEngine_nativeMainThreadTrigger and Java_com_autonavi_base_ae_gmap_GLMapEngine_nativeM…

金蝶AAS-V9.0前后端部署

前言 包含金蝶AAS9.0部署&#xff0c;前端部署&#xff0c;后端部署。 金蝶AAS9.0部署 1. 下载金蝶AAS9.0安装包上传至服务器&#xff1b; 2. 解压安装包&#xff1b; unzip -d /opt/AAS-V9.0 AAS-V9.0.zip3. 配置JAVA路径&#xff1b; echo $JAVA_HOME vim /opt/AAS-9.0…

06_机器学习算法_朴素贝叶斯

1. 朴素贝叶斯的介绍与应用 1.1 朴素贝叶斯的介绍 朴素贝叶斯算法(Naive Bayes, NB)是应用最为广泛的分类算法之一。它是基于贝叶斯定义和特征条件独立假设的分类方法。由于朴素贝叶斯法基于贝叶斯公式计算得到,有着坚实的数学基础,以及稳定的分类效率。NB模型所需估计的…

Mac SourceTree配置ssh git仓库

一、准备条件 1、Mac系统电脑 2、安装好SourceTree 3、获取ssh git仓库地址 二、配置步骤 1、打开终端命令行 ssh -t rsa -C "xxx""xxx"代表注册git仓库时&#xff0c;使用的用户名&#xff0c;可以是字符串也可以是邮箱地址。 如果遇到输入密码&#xf…

2024MySQL8安装与绿色版Navicat连接【提供安装包】数据库

视频教程面向人群和使用方法&#xff1a; 1&#xff1a;大学生【解决老师作业或自己兴趣学习需要】; 2&#xff1a;第一次需要安装MySQL的开发者【需要简单使用&#xff0c;因为项目会用到】 3&#xff1a;老手二倍速&#xff0c;新手老老实实按照教程一倍速模仿视频操作&am…

照明灯具十大排名哪个品牌好?照明灯具前十名排行榜大公开!

照明灯具十大排名哪个品牌好&#xff1f;护眼台灯作为照明灯具的重要组成部分&#xff0c;其品质与品牌选择显得尤为关键&#xff0c;市面上品质比较好的护眼台灯品牌有书客、明基、松下等品牌。本文旨在为大家揭晓照明灯具十大排名中的佼佼者&#xff0c;揭示照明灯具前十名的…