租户和角色管理的菜单权限不能滚动

This commit is contained in:
gexinzhineng/gxzn27 2023-03-04 13:44:46 +08:00
parent cea7b41ae8
commit 3c6554c058
2 changed files with 76 additions and 45 deletions

View File

@ -99,37 +99,41 @@
</el-select>
</el-form-item>
<!-- 分配角色的菜单权限对话框 -->
<el-form-item
label="权限范围"
v-if="
actionScopeType === 'menu' || dataScopeForm.dataScope === SystemDataScopeEnum.DEPT_CUSTOM
"
>
<el-card shadow="never">
<template #header>
父子联动(选中父节点自动选择子节点):
<el-switch v-model="checkStrictly" inline-prompt active-text="" inactive-text="" />
全选/全不选:
<el-switch
v-model="treeNodeAll"
inline-prompt
active-text="是"
inactive-text="否"
@change="handleCheckedTreeNodeAll()"
/>
</template>
<el-tree
ref="treeRef"
node-key="id"
show-checkbox
:default-checked-keys="defaultCheckedKeys"
:check-strictly="!checkStrictly"
:props="defaultProps"
:data="treeOptions"
empty-text="加载中,请稍后"
/>
</el-card>
</el-form-item>
<el-row>
<el-col :span="24">
<el-form-item
label="权限范围"
v-if="
actionScopeType === 'menu' ||
dataScopeForm.dataScope === SystemDataScopeEnum.DEPT_CUSTOM
"
style="display: flex"
>
<el-card class="card" shadow="never">
<template #header>
<!--父子联动(选中父节点自动选择子节点):-->
<!--<el-switch v-model="checkStrictly" inline-prompt active-text="" inactive-text="" />-->
<!--全选/全不选:-->
<!--<el-switch-->
<!-- v-model="treeNodeAll"-->
<!-- inline-prompt-->
<!-- active-text="是"-->
<!-- inactive-text="否"-->
<!-- @change="handleCheckedTreeNodeAll()"-->
<!--/>-->
</template>
<el-tree
ref="treeRef"
node-key="id"
show-checkbox
:check-strictly="!checkStrictly"
:props="defaultProps"
:data="treeOptions"
empty-text="加载中,请稍后"
/>
</el-card>
</el-form-item> </el-col
></el-row>
</el-form>
<!-- 操作按钮 -->
<template #footer>
@ -245,26 +249,28 @@ const dialogScopeVisible = ref(false)
const dialogScopeTitle = ref('数据权限')
const actionScopeType = ref('')
const dataScopeDictDatas = ref()
const defaultCheckedKeys = ref()
//
const checkStrictly = ref(true)
const treeNodeAll = ref(false)
const checkStrictly = ref(false)
// const treeNodeAll = ref(false)
// /
const handleCheckedTreeNodeAll = () => {
treeRef.value!.setCheckedNodes(treeNodeAll.value ? treeOptions.value : [])
}
// const handleCheckedTreeNodeAll = () => {
// treeRef.value!.setCheckedNodes(treeNodeAll.value ? treeOptions.value : [])
// }
//
const handleScope = async (type: string, row: RoleApi.RoleVO) => {
dataScopeForm.id = row.id
dataScopeForm.name = row.name
dataScopeForm.code = row.code
actionScopeType.value = type
dialogScopeVisible.value = true
if (type === 'menu') {
const menuRes = await listSimpleMenusApi()
treeOptions.value = handleTree(menuRes)
const role = await PermissionApi.listRoleMenusApi(row.id)
if (role) {
// treeRef.value!.setCheckedKeys(role as unknown as Array<number>)
defaultCheckedKeys.value = role
role?.forEach((item: any) => {
unref(treeRef)?.setChecked(item, true, false)
})
}
} else if (type === 'data') {
const deptRes = await listSimpleDeptApi()
@ -272,12 +278,11 @@ const handleScope = async (type: string, row: RoleApi.RoleVO) => {
const role = await RoleApi.getRoleApi(row.id)
dataScopeForm.dataScope = role.dataScope
if (role.dataScopeDeptIds) {
// treeRef.value!.setCheckedKeys(role.dataScopeDeptIds as unknown as Array<number>, false)
defaultCheckedKeys.value = role.dataScopeDeptIds
role.dataScopeDeptIds?.forEach((item: any) => {
unref(treeRef)?.setChecked(item, true, false)
})
}
}
actionScopeType.value = type
dialogScopeVisible.value = true
}
//
const submitScope = async () => {
@ -312,3 +317,10 @@ onMounted(() => {
init()
})
</script>
<style scoped>
.card {
width: 100%;
max-height: 400px;
overflow-y: scroll;
}
</style>

View File

@ -25,7 +25,7 @@
ref="formRef"
>
<template #menuIds>
<el-card class="w-120">
<el-card>
<template #header>
<div class="card-header">
全选/全不选:
@ -91,6 +91,16 @@ const dialogTitle = ref('edit') // 弹出层标题
const handleCheckedTreeNodeAll = () => {
treeRef.value!.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
}
const validateCategory = (rule: any, value: any, callback: any) => {
if (!treeRef.value!.getCheckedKeys().length) {
callback(new Error('该项为必填项'))
} else {
callback()
}
}
rules.menuIds = [{ required: true, validator: validateCategory, trigger: 'blur' }]
const getTree = async () => {
const res = await listSimpleMenusApi()
menuOptions.value = handleTree(res)
@ -125,7 +135,9 @@ const handleUpdate = async (rowId: number) => {
const res = await TenantPackageApi.getTenantPackageApi(rowId)
unref(formRef)?.setValues(res)
//
unref(treeRef)?.setCheckedKeys(res.menuIds)
res.menuIds?.forEach((item: any) => {
unref(treeRef)?.setChecked(item, true, false)
})
}
//
@ -166,3 +178,10 @@ onMounted(async () => {
})
// getList()
</script>
<style scoped>
.el-card {
width: 100%;
max-height: 400px;
overflow-y: scroll;
}
</style>