UserSelectPanel 用户选择面板

用户选择面板（模态框形式）。左侧展示组织树，右侧展示用户列表（带复选框和分页），支持按组织筛选用户、搜索用户、标记已授权用户。适用于批量授权场景。

• 基础用法
• Props
• Events
• 与 UserSelectModal / UserSelectPicker 的区别

基础用法

<template>
  <n-button @click="showPanel = true">选择用户</n-button>
  <UserSelectPanel
    v-model:show="showPanel"
    title="授权用户"
    :assigned-user-ids="[1, 2, 3]"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'
import UserSelectPanel from '@/components/UserSelectPanel.vue'

const showPanel = ref(false)

function handleConfirm(userIds) {
  console.log('选中的用户ID:', userIds)
  showPanel.value = false
}
</script>

Props

属性	类型	默认值	说明
show	Boolean	false	是否显示模态框（支持 v-model）
title	String	'选择用户'	模态框标题
confirmLoading	Boolean	false	确认按钮加载状态
assignedUserIds	Array	[]	已授权用户 ID 列表，这些用户会被标记为"已授权"且不可重复选择
tenantId	Number | String	—	租户 ID，筛选指定租户下的用户
initialOrgId	Number | String	—	初始选中的组织 ID
lockedOrgId	Number | String	—	锁定的组织 ID，设置后不可切换组织
directOrgOnly	Boolean	false	是否仅查询直属用户（不包含下级组织用户）

Events

事件名	参数	说明
update:show	(show: boolean)	面板显隐变化
confirm	(userIds: Array)	点击确认按钮，携带选中的用户 ID 数组

与 UserSelectModal / UserSelectPicker 的区别

组件	适用场景	特点
UserSelectPanel	批量授权、按组织筛选	左侧组织树 + 右侧用户列表，适合一次性添加大量用户
UserSelectModal	通用用户搜索选择	搜索条件 + 表格选择，支持单选/多选
UserSelectPicker	表单控件	只读输入框 + 弹窗选择，适合作为表单项