UserSelector 用户选择器

可通过该组件选取获得指定用户的数据。（该组件支持函数式调用）

请注意

用户的数据包含 orgId，在回显时也需要传入，具体数据结构参考 类型声明中的User。

基本用法

该组件无需引入可在现目中直接使用，具体文件放置在 /apps/*/components/OrgUserSelector 下。

通过 v-model 绑定数据

<script setup lang="ts">
interface User {
  orgId: string
  userId: string
  userName: string
}

const open = ref(false)
function toggle() {
  open.value = true
}

const users = ref<User[]>([])
function submit(users: User[]) {}
</script>

<template>
  <UserSelector
    v-model:open="open"
    v-model="users"
    title="选择用户"
    multiple
    @submit="submit"
  />
</template>

通过调用 open 方法打开

<script setup lang="ts">
const userSelectorRef = ref()

function open() {
  userSelectorRef.value.open()
}
</script>

<template>
  <UserSelector ref="userSelectorRef" />
</template>

通过 trigger 插槽触发

<template>
  <UserSelector>
    <template #trigger>
      <button>选择用户</button>
    </template>
  </UserSelector>
</template>

函数式调用

import { selectUser } from '@/components/OrgUserSelector'

function onClick() {
  selectUser({
    modelValue: [], // 回显时选中的数据
    multiple: true,
    onSubmit(selected = []) {
      console.log(selected) // 点击确认后返回选中的数据
    },
  })
}

过滤数据

可通过 filterOrg 和 filterUser 属性将组织或者用户数据过滤，如：将 orgId 为 '0' 的组织过滤掉，将 userId 为 '123' 的用户过滤掉。

如果想设置组件默认过滤的数据，可以前往 components/OrgUserSelector/UserSelector.vue 中自行修改 props.filterOrg 和 props.filterUser 定义的默认值。

<template>
  <UserSelector
    :filter-org="(node) => node.orgId !== '0'"
    :filter-user="(node) => node.userId !== '123'"
  />
</template>

API

属性

名称	说明	类型	默认值
v-model:open	是否展示弹窗	boolean	false
v-model	选中的用户数据	User[]	[]
title	选择器弹窗标题	string	'选择用户'
multiple	是否允许多选	boolean	false
auth	数据权限配置	string	undefined
apis	替换接口	Apis	{}
tabs	Tab页	Array<{ value: string, label: string }>	见Tab页
disabledData	判断禁用数据	(node: any) => boolean	() => false
filterOrg	过滤组织数据	(node: any) => boolean	() => true
filterUser	过滤用户数据	(node: any) => boolean	() => true

Tab页

const tabs = [
  { value: 'RecentlyUsed', label: '最近常用' },
  { value: 'Favorites', label: '收藏' },
  { value: 'TreeUserList', label: '全部' },
  { value: 'Groups', label: '群组' },
]

事件

名称	说明	类型
submit	弹窗确认后的触发事件	(users: User[]) => void

暴露

名称	说明	类型
open	调用后打开弹窗	() => void

类型声明

interface User {
  orgId: string
  userId: string
  userName: string
}

interface Apis {
  /** 最近常用 */
  recentlyUsed?: DataListProps['request']
  /** 收藏 */
  favorites?: DataListProps['request']
  /** 添加取消收藏 */
  favoriteToggle?: FavoriteToggle
  /** 组织树 */
  orgTree?: DataTreeProps['request']
  /** 组织列表 */
  orgList?: DataListProps['request']
  /** 用户列表 */
  userList?: DataListProps['request']
  /** 群组列表 */
  groups?: DataGroupProps['request']
  /** 群组数据 */
  groupData?: DataGroupProps['requestData']
}