SpEmployeeTableSelect 员工表选择

王金城大约 1 分钟

当员工较多的时候，使用 tree 选择器组件可能会比较耗时，并且选择起来也不方便，所以本组件提供了一种选择员工表的方式，可以快速选择员工。

主要功能

支持多选员工，同时支持跨页多选功能
支持通过部门、姓名、工号等筛选员工
可以配置是否显示已禁用的员工，也可以作为筛选项，在一些特定的场景下会经常用到。

基础用法

<script setup lang="ts">
import type { EmployeeListDTO } from '@/api/config/employee/use-page-employee/types';
import { pick } from 'lodash-unified';

// 节点候选人配置组件
defineOptions({
  name: 'SettingPanelCandidate',
});

// 员工选择器实例
const employeeTableSelectRef = ref<SpEmployeeTableSelectInstance>();

// 打开选择面板
employeeTableSelectRef.value?.open();

// 确认选择事件
const confirmHandler = (employees: EmployeeListDTO[]) =>
  setProperty(
    'candidate.employees',
    employees.map(item => pick<EmployeeListDTO>(item, ['id', 'employeeName', 'employeeNumber'])),
  );
</script>

<template>
  <SpEmployeeTableSelect ref="employeeTableSelectRef" @confirm="confirmHandler" />
</template>

API

Props 属性

属性	类型	默认值	说明
showDisabled	`boolean`	`false`	是否显示已禁用员工

事件

事件名	类型	说明
confirm	`(employees: EmployeeListDTO[]) => void`	确认选择事件
cancel	`() => void`	取消选择事件

方法

方法名	类型	说明
open	`Function`	打开选择面板
close	`() => void`	关闭选择面板