ec-admin/src/pages/system/role/assign-orgs-form.vue
liuyun d37af1b73e feat(rbac): 批量删除联调 + 角色数据权限部门分配 UI
- 用户/组织/资源页批量删除改批量接口 + 失败汇总提示
- 角色页新增「分配部门」(dataScope=custom 时显示,部门树勾选)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-10-11 17:42:16 +08:00

58 lines
1.6 KiB
Vue

<template>
<el-tree
v-if="ready"
ref="treeRef"
class="assign-tree"
:data="tree"
node-key="code"
show-checkbox
:props="{ label: 'name', children: 'children' }"
default-expand-all
/>
</template>
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import { useRequest } from '@/composables/useRequest'
import { listOrgs } from '@/api/org'
import { listAssignedOrgs } from '@/api/role'
import { buildTree, type TreeNode } from '@/utils/tree'
import type { Org } from '@/api/org'
defineOptions({ name: 'AssignOrgsForm' })
const props = defineProps<{ roleCode: string }>()
interface TreeApi {
getCheckedKeys: (leafOnly?: boolean) => (string | number)[]
setCheckedKeys: (keys: (string | number)[], leafOnly?: boolean) => void
}
const treeRef = ref<TreeApi>()
const { data: orgList } = useRequest((signal: AbortSignal) => listOrgs(signal))
const { data: assigned } = useRequest((signal: AbortSignal) => listAssignedOrgs(props.roleCode, signal))
const tree = computed(() => buildTree(orgList.value ?? []) as TreeNode<Org>[])
const ready = computed(() => orgList.value !== undefined && assigned.value !== undefined)
watch(ready, async (r) => {
if (r) {
await nextTick()
treeRef.value?.setCheckedKeys(assigned.value ?? [], true)
}
})
function submit(): { orgCodes: string[] } {
const checked = treeRef.value?.getCheckedKeys(true) ?? []
return { orgCodes: [...new Set(checked.map(String))] }
}
defineExpose({ submit })
</script>
<style scoped lang="scss">
.assign-tree {
@apply max-h-[420px] overflow-y-auto;
}
</style>