cd-personselector

基于 Vue 3 + TDesign 的人员选择器组件，支持多 Tab、树形结构、搜索、懒加载等功能。

安装

npm install cd-personselector

使用

<template>
  <PersonSelector
    v-model:visible="showSelector"
    v-model="selectedIds"
    :tabs="tabs"
    :organizations="organizations"
    tips="支持用户名、手机号、职务搜索"
    @confirm="handleConfirm"
    @load-users="handleLoadUsers"
    @search="handleSearch"
    @org-change="handleOrgChange"
  />
</template>
<script setup>
import { ref } from 'vue'
import PersonSelector from 'cd-personselector'
import 'cd-personselector/style.css'
const showSelector = ref(false)
const selectedIds = ref([])
const tabs = ref([
  {
    key: 'department',
    name: '按部门',
    icon: 'folder',
    tree: [
      { id: 'dept-1', name: '研发部', userCount: 5 },
      { id: 'dept-2', name: '产品部', userCount: 3 }
    ]
  },
  {
    key: 'external',
    name: '外部联系人',
    icon: 'usergroup',
    tree: [
      { id: 'ext-1', name: '客户A', isUser: true, phone: '13800001111' }
    ]
  }
])
const organizations = ref([
  { id: 'org-1', name: '总公司' }
])
function handleConfirm(items) {
  console.log('选中项:', items)
}
function handleLoadUsers({ tabKey, nodeId, callback }) {
  // 异步加载用户数据
  fetchUsers(nodeId).then(users => callback(users))
}
function handleSearch({ keyword, orgId, callback }) {
  // 搜索用户
  searchUsers(keyword).then(users => callback(users))
}
function handleOrgChange(orgId) {
  // 切换组织时重新加载 tabs 数据
  loadTabsByOrg(orgId).then(data => {
    tabs.value = data
  })
}
</script>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | visible | boolean | false | 控制弹窗显示 | | tabs | TabConfig[] | [] | Tab 配置数组 | | organizations | Organization[] | [] | 组织列表 | | modelValue | (string|number)[] | [] | 选中的 ID 数组 | | dialogWidth | string | '900px' | 弹窗宽度 | | tips | string | '' | 顶部提示文字 | | showSearch | boolean | true | 是否显示搜索 |

Events

| 事件 | 参数 | 说明 | |------|------|------| | confirm | items: any[] | 确认选择时触发，每项包含 orgId | | load-users | { tabKey, nodeId, callback } | 点击"显示人员"时触发 | | search | { keyword, orgId, callback } | 搜索时触发 | | org-change | orgId: string|number | 切换组织时触发，用于重新加载 tabs 数据 |

类型定义

interface TabConfig {
  key: string
  name: string
  icon?: string
  tree: TreeNode[]
}
interface TreeNode {
  id: number | string
  name: string
  children?: TreeNode[]
  userCount?: number
  isUser?: boolean
}
interface User {
  id: number | string
  name: string
  displayName?: string
  phone?: string
  position?: string
  department?: string
}

依赖

• vue >= 3.0.0
• tdesign-vue-next >= 1.0.0