<template>
<a-modal :visible='true' :title='数据授权' @cancel='handleClose()' @ok='onSubmit' :width='600' :maskClosable='false'>
<div class='tree-box'>
<a-input-search style='margin-bottom: 8px' placeholder='请输入关键字搜索' @change='onChange'/>
<a-tree v-if='treeData.length > 0' checkable :tree-data='treeData' @check='onCheck'
:replace-fields='replaceFields' :multiple='true' :checkStrictly='false'
:defaultExpandAll='true' :default-checked-keys='checkedKeys'>
<a-tree>
</div>
</a-modal>
</template>
<script setup lang='ts'>
import {getOrgList} from '@/api/system.js'
import {authUserDataScope, queryUserDataScope, authRoleDataScope, queryRoleDataScope} from '@/api/dataAuthorization.js'
import {ref, reactive} from "vue"
export default {
props: {
id: String,
type: String
},
data() {
return {
replaceFields: {
title: 'label',
key: 'id',
},
keyWorld: '',
treeData: [],
checkedKeys: [],
}
},
created() {
},
methods() {
// 获取组织树结构
onLoadTreeData() {
getOrgList().then((res) => {
if(res.status === 0) {
this.treeData = res.data;
}
})
},
// ★★★★★★ 获取数据授权
getDataScope() {
let requestFunc = '';
let param = '';
// ★ 通过方法引用充分减少代码冗余
if(this.type === 'role') {
requestFunc = queryRoleDataScope
param = 'roleId'
}else {
requestFunc = queryUserDataScope
param = 'userId'
}
func({[param]: this.id}).then((res) => {
this.checkedKeys = res.data;
message.info('授权成功！')
})
},
onSubmit() {
// !this.checkedKeys.length = true 等价于 this.checkedKeys.length = 0
if(!this.checkedKeys.length) {
message.warn('请选择需要授权的数据!');
return;
}else {
this.getDataScope();
}
},
onCheck(checkedKeys) {
this.checkedKeys = checkedKeys || [];
},
onChange(e) {
this.keyWord = e.target.value;
},
handleClose() {
this.$emit('handle')
}
}
}
</script>
<style lang="less" scoped>
.tree-box > .ant-tree {
height: 600px;
overflow-y: auto;
}
</style>
AntDesign Vue中:checkStrictly的作用
在 Ant Design Vue 中，checkStrictly 是 Tree（树形控件）组件的一个属性。它用于指定是否严格遵守父子节点间的勾选关联规则。
当 checkStrictly 属性设置为 true 时，父节点和子节点之间的勾选状态不会相互影响。也就是说，勾选或取消勾选父节点不会影响子节点的勾选状态，同时子节点的勾选状态也不会影响父节点> 的勾选状态。这意味着父节点和子节点之间的勾选状态是相互独立的。
当 checkStrictly 属性设置为 false 时，父节点和子节点之间的勾选状态是关联的。如果一个父节点被勾选或取消勾选，其所有子节点也会相应地被勾选或取消勾选。同样地，如果一个子节点> > 被勾选或取消勾选，它的父节点也会根据子节点的状态相应地被勾选或取消勾选。
通过设置 checkStrictly 属性，您可以根据自己的需求来控制树形控件中勾选状态的关联性。