UserSelectModal 用户选择弹窗

通用用户选择模态框。提供部门树筛选 + 关键词搜索，以表格形式展示用户列表，支持单选/多选模式。

• 基础用法
  • 单选
  • 多选
• Props
• Events
• 搜索条件
• 在 AiCrudPage 中使用

基础用法

单选

<template>
  <n-button @click="showModal = true">选择用户</n-button>
  <UserSelectModal
    v-model:show="showModal"
    @confirm="handleSelect"
  />
</template>

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

const showModal = ref(false)

function handleSelect(user) {
  console.log('选中的用户:', user) // { id: 1, userName: '张三', ... }
}
</script>

多选

<UserSelectModal
  v-model:show="showModal"
  :multiple="true"
  @confirm="handleSelect"
/>

Props

属性	类型	默认值	说明
show	Boolean	false	是否显示模态框（支持 v-model）
title	String	'选择用户'	模态框标题
multiple	Boolean	false	是否多选模式
selectedUsers	Array	[]	已选中的用户列表，用于初始化选中状态

Events

事件名	参数	说明
update:show	(show: boolean)	弹窗显隐变化
confirm	(result)	确认选择。单选模式返回单个用户对象，多选模式返回用户对象数组

搜索条件

弹窗顶部提供两种筛选方式：

• 关键词搜索 — 按用户名/昵称模糊搜索
• 部门树筛选 — 选择部门后自动加载该部门下的用户

在 AiCrudPage 中使用

// editSchema 中通过 userSelect 类型自动使用 UserSelectPicker
// UserSelectPicker 内部弹出 UserSelectModal
const editSchema = [
  { field: 'userId', label: '负责人', type: 'userSelect', required: true },
  { field: 'userIds', label: '参与人', type: 'userSelect',
    props: { multiple: true } },
]