您现在的位置是：网站首页> 编程资料编程资料

Vue element实现权限管理业务流程详解_vue.js_

2023-05-24 732人已围观

简介 Vue element实现权限管理业务流程详解_vue.js_

展开渲染标签编辑权限

el-table-column type="expand"设置了expand则显示为一个可展开的按钮

显示图上的效果使用了三重for循环按照 tree 数据结构 .children 取得下一级数据

 // 关闭下拉的权限标签 事件 async remRight(role,rightId){ //弹窗询问用户是否删除数据 const confirmResult = await this.$queding( '确定要为该角色删除此权限吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).catch(err => err) // 如果用户确认删除，则返回值为字符串 confirm // 如果用户取消删除，则返回值为字符串 cancel // console.log(confirmResult) if (confirmResult !== 'confirm'){ return this.$Msg.info('已取消删除') } const {data:res} = await this.$http.delete(`roles/${role.id}/rights/${rightId}`) if (res.meta.status !== 200) return this.$Msg.error('删除此权限失败！') this.$Msg.success('删除用户成功！') // 参数不直接引用role.id 为了给 role.children 重新赋值 动态更新 不用刷新页面 再展开查看 // 返回的data, 是当前角色下最新的权限数据 role.children = res.data },

对话框内树形组件编辑权限

显示树形组件的对话框：

确 定取 消

点击编辑权限按钮先把要展示的数据源 RightList 再使用递归把拥有权限的id push到 defKeys里之后显示对话框

// 点击表单内的编辑按钮 async editNPCRightBoxShow(role){ this.PushRolesId = role.id const {data:res} = await this.$http.get('rights/tree') if (res.meta.status !==200) return this.$Msg.error('获取权限列表失败') this.RightList = res.data //console.log(role) await this.getThreeKeys(role,this.defKeys) this.editNPCRightBox = true }, // 通过递归的方式 获取角色下所有的三级权限的id 并保存到defKeys 数组中 getThreeKeys(node,arr){ // 如果当前节点不包含 children 那么他就是三级节点 if(!node.children){ return arr.push(node.id) } node.children.forEach(item =>{ this.getThreeKeys(item,arr) }) },

点击体检按钮时通过ref调用

getCheckedKeys（返回目前被选中的节点所组成的数组）

getHalfCheckedKeys （返回目前半选中的节点的 key 所组成的数组）

把他俩合并并转成字符串按照接口约定向服务器发送请求

 // 编辑角色权限的对话框 内的确定按钮 发送请求 async ToEditRightNPC(){ const prams = [ ...this.$refs.PushRoleRef.getCheckedKeys(), ...this.$refs.PushRoleRef.getHalfCheckedKeys() ] const xxx = prams.join(',') //console.log(prams) const {data:res} = await this.$http.post(`roles/${this.PushRolesId}/rights`,{rids:xxx}) if (res.meta.status !==200) return this.$Msg.error('为此角色修改权限失败') await this.getNPCList() this.editNPCRightBox = false this.$Msg.success('修改角色权限成功') }, // 编辑角色权限的对话框被关闭时 清空默认选中的值 防止打开时id 重复 ERNPCClose(){ this.defKeys = [] }