租户和角色管理的菜单权限不能滚动
gexinzhineng/gxzn27
parent
cea7b41ae8
commit
3c6554c058
|
|
@ -99,37 +99,41 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 分配角色的菜单权限对话框 -->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="权限范围"
|
||||
v-if="
|
||||
actionScopeType === 'menu' || dataScopeForm.dataScope === SystemDataScopeEnum.DEPT_CUSTOM
|
||||
actionScopeType === 'menu' ||
|
||||
dataScopeForm.dataScope === SystemDataScopeEnum.DEPT_CUSTOM
|
||||
"
|
||||
style="display: flex"
|
||||
>
|
||||
<el-card shadow="never">
|
||||
<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()"
|
||||
/>
|
||||
<!--父子联动(选中父节点，自动选择子节点):-->
|
||||
<!--<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-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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue