<template>
|
<b-modal
|
title="权限设置"
|
ref="myModalRef"
|
ok-title="保存"
|
@ok="handleOk"
|
@cancel="clearName"
|
cancel-title="取消"
|
>
|
<div class="btn-content">
|
<b-btn
|
:variant="btnTypeAll ? 'primary' : 'outline-primary'"
|
@click="handleAllSelect"
|
>
|
全选
|
</b-btn>
|
<b-btn
|
class="ml10"
|
:variant="strictly ? 'outline-primary' : 'primary'"
|
@click="strictly = !strictly"
|
>
|
{{ strictly ? '父子不关联' : '父子关联'}}
|
</b-btn>
|
</div>
|
<Tree
|
ref="tree"
|
node-key="id"
|
show-checkbox
|
:check-strictly="strictly"
|
:data="rolesList"
|
highlight-current
|
:props="defaultProps"
|
/>
|
</b-modal>
|
</template>
|
|
<script>
|
/**
|
* 权限菜单弹窗
|
* @param { Array } rolesList 权限菜单树形结构
|
* @param { Array } rolePermission 权限菜单回显数组，为权限菜单对应id
|
* @return { String } submit 返回选中权限id
|
* @return { Function } showModel 打开弹窗
|
* @return { Function } hideModal 关闭弹窗
|
*/
|
|
import { Tree } from 'element-ui'
|
export default {
|
props: {
|
rolesList: Array,
|
rolePermission: Array
|
},
|
data: () => ({
|
strictly: true, // * 是否父子强关联
|
defaultProps: {
|
children: 'child',
|
label: 'name'
|
},
|
btnTypeAll: false
|
}),
|
methods: {
|
showModel() {
|
this.$refs.myModalRef.show()
|
this.strictly = true
|
},
|
hideModel() {
|
this.$refs.myModalRef.hide()
|
},
|
handleOk(e) {
|
e.preventDefault()
|
let arr = this.$refs.tree.getCheckedKeys()
|
arr = [ ...this.$refs.tree.getHalfCheckedKeys(), ...arr ]
|
const str = arr.join(',')
|
this.$emit('submit', str)
|
},
|
// * 全选按钮回调
|
handleAllSelect() {
|
this.btnTypeAll = !this.btnTypeAll
|
let arr = []
|
if (this.btnTypeAll) {
|
// 全选
|
this.getAllRolesId(this.rolesList, (id) => {
|
arr.push(id)
|
})
|
this.$refs.tree.setCheckedKeys(arr)
|
} else {
|
this.$refs.tree.setCheckedKeys([])
|
}
|
},
|
// * 递归查数据
|
getAllRolesId(arr, fn) {
|
return arr.map(item => {
|
if (item.child && item.child.length) {
|
this.getAllRolesId(item.child, fn)
|
}
|
fn(item.id)
|
})
|
},
|
clearName() {
|
|
}
|
},
|
watch: {
|
rolePermission(val) {
|
this.$refs.tree.setCheckedKeys(val)
|
}
|
},
|
components: {
|
Tree
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.btn-content {
|
display: flex;
|
justify-content: flex-end;
|
}
|
</style>
|
