Vue+ElementUI的电商管理系统实例09分配⾓⾊权限1、弹出分配权限的对话框并请求权限数据
先给分配按钮添加点击事件：
<el-button size="mini" type="warning" icon="el-icon-setting"
@click="w.id)">分配权限</el-button>
添加分配权限对话框：
<!--分配⾓⾊权限的对话框-->
<el-dialog title="分配权限" :visible.sync="setRightDialogVisible"
width="50%">
<!--内容主体区域-->
111
<!--底部按钮区域-->
<span slot="footer" class="dialog-footer">
<el-button @click="setRightDialogVisible = false">取消</el-button>
<el-button type="primary" @click="setRightDialogVisible = false">确定</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
setRightDialogVisible: false, // 控制分配⾓⾊权限对话框是否显⽰
rightsList: [] // ⾓⾊所有权限数据
}
},
methods: {
// 展⽰分配权限的对话框
async showSetRightDialog(id) {
this.setRightDialogVisible = true
// 获取所有权限列表树形
const { data: res } = await this.$('rights/tree')
console.log(res)
if (a.status !== 200) {
return this.$('获取权限列表失败')
}
this.rightsList = res.data
}
}
}
</script>
2、分配并使⽤el-tree树形控件
先把Tree添加引⼊到element.js，这⾥就不写了。
然后到el-tree的实例代码：show-checkbox 节点是否可被选择
<!--内容主体区域树形控件-->
<el-tree :data="rightsList" :props="defaultProps" show-checkbox></el-tree>
<script>
export default {
data() {
return {
// 树形控件的属性绑定对象
treeProps: {
label: 'authName',
children: 'children'
}
}
}
}
</script>
效果图：
3、优化树形控件的显⽰UI
node-key 每个树节点⽤来作为唯⼀标识的属性，整棵树应该是唯⼀的
default-expand-all 是否默认展开所有节点
<!--内容主体区域树形控件-->
<el-tree :data="rightsList" :props="treeProps" show-checkbox default-expand-all node-key="id"></el-tree>
4、加载当前⾓⾊的已有权限
default-checked-keys 默认勾选的节点的 key 的数组
<!--内容主体区域树形控件-->
<el-tree :data="rightsList" :props="treeProps" show-checkbox default-expand-all :default-checked-keys="defKeys"        node-key="id"></el-tree>
<script>
export default {
data() {
return {
defKeys: [] // 默认选中的节点ID值数组
}
}
}
</script>
把权限的id放⼊到defKeys数组中。
点击分配权限按钮的同时，把当前⾓⾊已有的三级权限的id都放⼊到defKeys数组中。
// 展⽰分配权限的对话框
async showSetRightDialog(role) {
// 获取所有权限列表树形
const { data: res } = await this.$('rights/tree')
// console.log(res)
if (a.status !== 200) {
return this.$('获取权限列表失败')
}
this.rightsList = res.data
// 嵌套循环获取三级节点的id
vue逗号分割的字符串转数组var arr = []
// console.log(role.children)
var children1 = role.children
for (var i = 0; i < children1.length; i++) {
var children2 = children1[i].children
// console.log(children2)
for (var j = 0; j < children2.length; j++) {
var children3 = children2[j].children
// console.log(children3)
for (var k = 0; k < children3.length; k++) {
arr.push(children3[k].id)
}
}
}
this.defKeys = arr
this.setRightDialogVisible = true
},
也可以先创建⼀个递归函数：
// 通过递归的形式，获取⾓⾊下所有三级权限的id，并保存到defKeys数组中
getLeafKeys(node, arr) { // 节点数组
// 如果当前node节点不包含children属性，则是三级权限节点
if (!node.children) {
return arr.push(node.id)
}
// 循环node⾥的children数组，每循环⼀项拿到⼀个⼦节点item，在根据item再次调⽤递归函数getLeafKeys，// 然后把当前的item当做⼀个节点传进去，同时把arr传进去。只要递归完毕后，就把三级节点的id都保存到arr了      node.children.forEach(item => LeafKeys(item, arr))
}
然后调⽤递归函数：
// 展⽰分配权限的对话框
async showSetRightDialog(role) {
// 获取所有权限列表树形
const { data: res } = await this.$('rights/tree')
console.log(res)
if (a.status !== 200) {
return this.$('获取权限列表失败')
}
this.rightsList = res.data
// 递归获取三级节点的id
this.setRightDialogVisible = true
},
分配权限按钮加上w：
<el-button size="mini" type="warning" icon="el-icon-setting"
@click="w)">分配权限</el-button>
此时点击分配按钮，弹出的对话框如图：
5、⼩bug，在关闭分配权限对话框时重置defKeys数组为空
给对话框绑定close事件：
<!--分配⾓⾊权限的对话框-->
<el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%" @close="showSetRightDialogClosed">
showSetRightDialogCloseds事件：
// 监听分配权限对话框的关闭事件
showSetRightDialogClosed() {
this.defKeys = []
}
当然也可以在打开对话框的时候清空defkeys数组，意思是⼀样的。
6、调⽤api接⼝完成分配权限功能
⾓⾊授权接⼝，请求路径：roles/:roleId/rights，请求⽅法：post，参数rids  权限 ID 列表（字符串）以 `,` 分割的权限 ID 列表（获取所有被选中、叶⼦节点的key和半选中节点的key, 包括 1，2，3级节点）
rids  权限 ID 列表：就是说所有选中和半选中状态的id，然后以','分割
getCheckedKeys
若节点可被选择（即 show-checkbox 为 true），则返回⽬前被选中的节点的 key 所组成的数组
(leafOnly) 接收⼀个 boolean 类型的参数，若为 true 则仅返回被选中的叶⼦节点的 keys，默认值为 false
getHalfCheckedKeys
若节点可被选择（即 show-checkbox 为 true），则返回⽬前半选中的节点的 key 所组成的数组
给树形控件添加引⽤：
<!--内容主体区域树形控件-->
<el-tree :data="rightsList" :props="treeProps" node-key="id" show-checkbox default-expand-all
:default-checked-keys="defKeys" ref="treeRef"></el-tree>
给确定按钮添加点击事件：
<el-button type="primary" @click="allotRigths">确定</el-button>
添加allotRigths事件：
// 点击按钮给⾓⾊分配权限
async allotRigths(id) {
const keys = [
...this.$CheckedKeys(),
...this.$HalfCheckedKeys()
]
console.log(keys)
}
此时选择添加商品、商品修改、商品删除3个权限，点击确定，控制台会打印出keys数组，如下图：
然后要把keys数组的值形成⼀个以"，"拼接字符串：
const idStr = keys.join(',')
再调⽤⾓⾊授权接⼝，把Keys数组传递给rids参数：
还有请求路径要带⾓⾊ID，但是我们在确定按钮哪⾥获取不到⾓⾊ID，只能在点击分配按钮的时候，先把⾓⾊ID传出来
<script>
export default {
data() {
return {
roleId: '' // 当前⾓⾊id
}
},
methods: {
// 展⽰分配权限的对话框
async showSetRightDialog(role) {
。。。
}
}
</script>
然后请求接⼝：
// 点击按钮给⾓⾊分配权限
async allotRigths() {
const keys = [
...this.$CheckedKeys(),
...this.$HalfCheckedKeys()
]
// console.log(keys)
const idStr = keys.join(',')
const { data: res } = await this.$http.post(`roles/${leId}/rights`, { rids: idStr }) if (a.status !== 200) {
return this.$('更新⾓⾊权限失败！')
}
this.$message.success('更新⾓⾊权限成功！')
this.setRightDialogVisible = false
}
效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。