StaffSelect 员工选择

员工/部门选择组件，支持组织树浏览、搜索、单选/多选。

何时使用

• 需要选择企业人员或部门时
• 需要按组织树结构浏览人员时
• 需要搜索人员时

代码演示

下方示例通过 dataSource 传入静态 mock 数据，无需连接后端即可体验完整的选人交互。

离线数据模式

通过传入 dataSource prop 可以让组件完全脱离后端 API 运行，适用于文档演示、单元测试和离线环境。

API

参数	说明	类型	默认值
value	选中的人员/部门	Option \| Option[] \| null	null
mode	选择模式	StaffType	50
structure	字段映射	{ id, name, type }	{ id: 'id', name: 'name', type: 'type' }
orgRoot	组织根节点限制	any[]	[]
orgRootValueType	组织根节点类型	'ref' \| 'originatorDept'	''
roles	角色范围	any[]	[]
departmentLevels	部门级别范围	{ startLevel, endLevel }	{ startLevel: 1, endLevel: 100 }
filterType	过滤类型	string	'root_display'
sourceType	来源类型	string	'portal'
placeholder	占位文本	string	根据 mode 自动设置
allowClear	是否允许清空	boolean	true
disabled	是否禁用	boolean	false
dataSource	静态数据源（传入后不调用 API）	{ orgTree, staffList }	null

dataSource 结构

字段	说明	类型
orgTree	组织树数据	Array<{ id, name, isLeaf, children }>
staffList	人员列表	Array<{ id, name, unitType, departmentId, parentDepartmentName }>

const dataSource = {
  orgTree: [
    {
      id: 'dept-root', name: '总公司', isLeaf: false,
      children: [
        { id: 'dept-tech', name: '技术中心', isLeaf: true, children: [] },
      ]
    }
  ],
  staffList: [
    {
      id: 'user-1', name: '张伟', unitType: 3,
      departmentId: 'dept-tech',
      parentDepartmentName: '技术中心',
    }
  ]
}

StaffType 枚举

值	说明
50	人员单选
51	人员多选
60	部门单选
61	部门多选
62	混合选人

Option 类型

参数	说明	类型
id	唯一标识	string
name	名称	string
type	类型	StaffType
unitType	单位类型	string \| number
imgUrl	头像地址	string

事件

事件名	说明	回调参数
change	选中值变化时回调	(value) => void