UserSelectPicker 用户选择输入框

以只读输入框 + 选择按钮的形式展示的表单控件。点击后弹出 UserSelectModal 进行用户选择，支持单选/多选，维护 ID 和名称双绑定。

最常用于 AiCrudPage 的 editSchema 中作为 type: 'userSelect' 的表单项。

• 基础用法
• Props
• Events
• 在 AiCrudPage 中使用
• 数据回显
• 注意事项

基础用法

<template>
  <UserSelectPicker
    v-model:modelValue="userId"
    v-model:labelValue="userName"
    placeholder="请选择负责人"
  />
</template>

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

const userId = ref(null)
const userName = ref('')
</script>

Props

属性	类型	默认值	说明
modelValue	String | Number | Array	null	选中用户 ID。单选为单值，多选为数组
labelValue	String | Number | Array	''	选中用户名称，与 modelValue 对应
placeholder	String	'请选择用户'	未选择时的占位提示
title	String	'选择用户'	弹窗标题
multiple	Boolean	false	是否多选模式
disabled	Boolean	false	是否禁用
clearable	Boolean	true	是否显示清空按钮
size	String	—	组件尺寸：'small' | 'medium' | 'large'

Events

事件名	参数	说明
update:modelValue	(value)	用户 ID 变化
update:labelValue	(value)	用户名称变化
select	(user | users)	选择确认，携带选中的用户对象或数组
clear	—	清空选择

在 AiCrudPage 中使用

const editSchema = [
  // 单选用户
  { field: 'assigneeId', label: '负责人', type: 'userSelect',
    rules: [{ required: true, message: '请选择负责人' }] },
  // 多选用户
  { field: 'memberIds', label: '参与人', type: 'userSelect',
    props: { multiple: true } },
]

数据回显

组件维护 modelValue（ID）和 labelValue（名称）双绑定。编辑回显时需同时传入：

<UserSelectPicker
  v-model:modelValue="formData.userId"
  v-model:labelValue="formData.userName"
/>

注意事项

• modelValue 和 labelValue 必须同时维护，否则编辑回显时输入框显示为空
• 多选模式下 modelValue 和 labelValue 均为数组
• 选择触发 select 事件后，modelValue 和 labelValue 会自动更新