赞
踩
给角色分配权限,哇塞,这个真的对初学者很难啊,相当棘手,思虑再三,终于出来了,下面就是详细步骤。
一、页面信息
下面展示一些 弹窗部分页面表单信息
。
//这里是打开弹窗的页面按钮信息 <el-table-column label="操作"> <template slot-scope="scope"> //获取点击分配权限的当前行信息 <el-button type="primary" round @click="openPowerDialog(scope.row)">分配权限</el-button> </template> </el-table-column> //这里是弹窗的信息 <el-dialog title="编辑角色权限" :visible.sync="dialogVisible"> <el-tree :data="ColumnList" show-checkbox node-key="auth_id" ref="tree" :default-expanded-keys="defaultTds" :default-checked-keys="defaultTds" :props="defaultProps"> </el-tree> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="changeColumn">确 定</el-button> </div> </el-dialog>
备注::data :是数据存储区域,也是页面数据来源
show-checkbox:是否被选中
node-key=“auth_id”:我们页面会包含一些已经选中的数据,node-key是必需设置项,是我们后端数据中的一个字段,且该字段是在数据中是唯一的。
:default-expanded-keys:展开时的默认节点
:default-checked-keys:默认选中的节点
:props=“defaultProps”:指定标签节点信息,我这里的值为:
defaultProps: {
label: 'auth_name',
children: 'children',
},
二、js部分
1.引入接口
import {
getColumnApi,
putRolePowerApi
} from "@/api"
2、在data中定义信息
data() { return { // 当前默认权限 defaultTds:[], selectRole:[], // 角权限色弹窗信息包 ColumnList:[], defaultProps: { label: 'auth_name', children: 'children', }, // 分配权限弹窗信息 dialogVisible: false, // 修改信息弹窗 row:{}, tableData: [], loading: true, // 弹窗信息 dialogFormVisible: false, form: { role_id:"", role_name:'', role_describe:'' } } }
3、点击修改弹窗按钮js
// 打开分配角色权限弹窗获取信息
openPowerDialog(row){
this.selectRole.role_id = row.role_id
getColumnApi().then(res=>{
this.ColumnList = res.data
// 默认显示已有的权限
let tmp = row.auth_ids_son ? row.auth_ids_son.split(','): []
this.defaultTds = tmp
console.log(this.defaultTds)
})
// 显示弹窗
this.dialogVisible = true
},
4、选择好权限后,点击确定部分的js
// 确定修改权限,权限状态切换 changeColumn(){ var temId = [] let temIdson = [] // console.log(this.$refs.tree.getCheckedNodes()); if(this.$refs.tree.getCheckedNodes()){ this.$refs.tree.getCheckedNodes().forEach(firstItem => { // console.log(firstItem) if(firstItem.auth_id) temId.push(firstItem.auth_id) if(firstItem.auth_id && firstItem.auth_pid != 0) temIdson.push(firstItem.auth_id) if(firstItem.children){ firstItem.children.forEach((twoItem)=>{ if(twoItem.auth_id) temId.push(twoItem.auth_id) if(twoItem.auth_id && twoItem.auth_pid !=0) temIdson.push(twoItem.auth_id) }) } }); } // console.log(temId) // console.log(temIdson) // // ES6去重 // console.log([...new Set(temId)]) // console.log([...new Set(temIdson)]) let auth_ids = [...new Set(temId)].join(',') let auth_ids_son = [...new Set(temIdson)].join(',') putRolePowerApi({ role_id:this.selectRole.role_id, auth_ids:auth_ids, auth_ids_son:auth_ids_son }) .then(res=>{ console.log(res) if(res.meta.state == 200){ this.$message.success("操作成功") this.initData() this.dialogVisible = false }else{ this.$message.error(res.meta.msg) } }) },
bingo
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。