用户选择器组件

概述

UserSelector 是一个用户选择组件，支持按部门筛选用户、搜索用户、单选/多选等功能，通过弹窗展示部门树和用户列表。

组件路径：web/apps/web-ele/src/components/zq-form/user-selector/

组件名称：UserSelector

功能特性

• 部门树筛选：按部门层级筛选用户
• 用户搜索：支持搜索用户名、姓名
• 单选/多选：支持选择单个或多个用户
• 用户头像：显示用户头像和信息
• 自动当前用户：可自动填充当前登录用户
• 两种显示模式：Select 模式和 Button 模式

Props

属性	类型	默认值	说明
modelValue	string | string[]	-	选中的用户 ID
multiple	boolean	false	是否多选
placeholder	string	'请选择'	占位符
disabled	boolean	false	是否禁用
clearable	boolean	true	是否可清除
filterable	boolean	true	是否可搜索
displayMode	'select' | 'button'	'select'	显示模式
autoCurrentUser	boolean	false	是否自动填充当前用户
readonly	boolean	false	是否只读
onConfirm	Function	-	Button 模式下的确认回调

Events

事件	参数	说明
update:modelValue	string | string[] | undefined	值更新
change	string | string[] | undefined	值变化

Expose 方法

方法	说明
openModal()	打开用户选择弹窗

使用示例

单选用户

<template>
  <UserSelector v-model="userId" placeholder="请选择用户" />
</template>

<script setup>
import { ref } from 'vue';

const userId = ref('');
</script>

多选用户

<template>
  <UserSelector
    v-model="userIds"
    :multiple="true"
    placeholder="请选择用户"
  />
</template>

<script setup>
import { ref } from 'vue';

const userIds = ref([]);
</script>

自动填充当前用户

<template>
  <UserSelector
    v-model="userId"
    :auto-current-user="true"
  />
</template>

<script setup>
import { ref } from 'vue';

const userId = ref('');
</script>

Button 模式

<template>
  <UserSelector
    v-model="userId"
    display-mode="button"
    placeholder="选择审批人"
    :on-confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue';

const userId = ref('');

async function handleConfirm(value) {
  console.log('选择的用户:', value);
  // 执行业务逻辑
}
</script>

只读模式

<template>
  <UserSelector
    v-model="userId"
    :readonly="true"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 user-selector 类型的表单项使用：

{
  "type": "user-selector",
  "field": "assignee_id",
  "label": "负责人",
  "props": {
    "multiple": false,
    "clearable": true,
    "filterable": true,
    "autoCurrentUser": false,
    "placeholder": "请选择负责人"
  }
}

弹窗布局

+----------------------------------------------------------+
|  选择用户                                            [X] |
+----------------------------------------------------------+
|  [搜索部门]    |  [搜索用户]              |  已选 (2)    |
|  ├─ 全部部门   |  ┌──────────────────┐   |  ┌─────────┐ |
|  ├─ 技术部     |  │ 👤 张三          │   |  │ 👤 张三 │ |
|  │  ├─ 前端组  |  │ 👤 李四  ✓       │   |  │ 👤 李四 │ |
|  │  └─ 后端组  |  │ 👤 王五          │   |  └─────────┘ |
|  └─ 市场部     |  └──────────────────┘   |              |
+----------------------------------------------------------+
|                              [取消]  [确认]              |
+----------------------------------------------------------+

API 依赖

• getDeptByParentApi() - 获取子部门
• searchDeptApi() - 搜索部门
• getUserDetailApi() - 获取用户详情

典型应用场景

• 负责人选择：单选用户
• 审批人选择：单选/多选用户
• 抄送人选择：多选用户
• 创建人字段：autoCurrentUser=true 自动填充