451 lines
22 KiB
TypeScript
451 lines
22 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import * as React from 'react';
|
|||
|
|
import { IconStarFilled, IconBuilding, IconPlus, IconDownload, IconSearch, IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight } from '@tabler/icons-react';
|
|||
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@nice/ui/components/table';
|
|||
|
|
import { Button } from '@nice/ui/components/button';
|
|||
|
|
import { Badge } from '@nice/ui/components/badge';
|
|||
|
|
import { Input } from '@nice/ui/components/input';
|
|||
|
|
import { Label } from '@nice/ui/components/label';
|
|||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nice/ui/components/select';
|
|||
|
|
import { MultipleProfessionSelector, MultipleStationSelector, MultipleDutyLevelSelector } from '@/components/selector';
|
|||
|
|
import { DutyLevel } from '@fenghuo/common';
|
|||
|
|
import { useTranslation } from '@nice/i18n';
|
|||
|
|
import { EliteFormData } from '@fenghuo/common';
|
|||
|
|
|
|||
|
|
|
|||
|
|
const DUTY_LEVEL_OPTIONS = [
|
|||
|
|
{ value: 3, label: DutyLevel.HIGH },
|
|||
|
|
{ value: 2, label: DutyLevel.MIDDLE },
|
|||
|
|
{ value: 1, label: DutyLevel.PRIMARY },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 职务等级星星显示组件
|
|||
|
|
function DutyLevelStars({ level }: { level: number }) {
|
|||
|
|
const stars = Array.from({ length: level }, (_, index) => (
|
|||
|
|
<IconStarFilled key={index} className="size-2.5 text-yellow-500" />
|
|||
|
|
));
|
|||
|
|
if (level === 0) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
return <div className="flex items-center gap-1">{stars}</div>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function DutyLevelText({ level }: { level: number }) {
|
|||
|
|
const option = DUTY_LEVEL_OPTIONS.find(option => option.value === level);
|
|||
|
|
return <div className="text-xs text-muted-foreground break-words">{option?.label}</div>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 人员信息显示组件
|
|||
|
|
function PersonInfo({
|
|||
|
|
person,
|
|||
|
|
onViewDetail
|
|||
|
|
}: {
|
|||
|
|
person: {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
dutyName: string;
|
|||
|
|
dutyCode: string;
|
|||
|
|
dutyLevel: number;
|
|||
|
|
};
|
|||
|
|
onViewDetail: (id: string) => void;
|
|||
|
|
}) {
|
|||
|
|
const hasStars = person.dutyLevel > 0;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
onClick={() => onViewDetail(person.id)}
|
|||
|
|
className="flex flex-row justify-center break-words min-h-[35px] items-center p-1 bg-muted rounded-lg"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center flex-wrap justify-center cursor-pointer">
|
|||
|
|
<span className="text-[14px] break-words mt-[1px]">{person.name}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className={`flex ${hasStars ? 'flex-col' : ''} items-center justify-center cursor-pointer`}>
|
|||
|
|
<span className="text-[12px] text-muted-foreground break-words">（#{person.dutyCode}）</span>
|
|||
|
|
{hasStars && <DutyLevelStars level={person.dutyLevel} />}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 人员列表显示组件
|
|||
|
|
function PersonList({
|
|||
|
|
persons,
|
|||
|
|
onViewDetail
|
|||
|
|
}: {
|
|||
|
|
persons: Array<{
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
dutyName: string;
|
|||
|
|
dutyCode: string;
|
|||
|
|
dutyLevel: number;
|
|||
|
|
}>;
|
|||
|
|
onViewDetail: (id: string) => void;
|
|||
|
|
}) {
|
|||
|
|
if (!persons || persons.length === 0) {
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-wrap justify-center items-center gap-1 min-h-[2rem]">
|
|||
|
|
{persons.sort((a, b) => b.dutyLevel - a.dutyLevel).map((person) => (
|
|||
|
|
<PersonInfo
|
|||
|
|
key={person.id}
|
|||
|
|
person={person}
|
|||
|
|
onViewDetail={onViewDetail}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface EliteDataTableProps {
|
|||
|
|
data: EliteFormData[];
|
|||
|
|
isLoading?: boolean;
|
|||
|
|
onViewDetail?: (personId: string) => void;
|
|||
|
|
onProfessionClick?: (professionName: string, professionId: string) => void; // 修改为传递专业ID
|
|||
|
|
onStationClick?: (stationName: string, stationId: string, professionId: string) => void; // 新增台站点击处理
|
|||
|
|
onAddEmployee?: () => void;
|
|||
|
|
onExportTable?: () => void;
|
|||
|
|
onExportFilteredTable?: () => void;
|
|||
|
|
isExporting?: boolean;
|
|||
|
|
// 筛选相关props
|
|||
|
|
selectedProfessionIds?: string[];
|
|||
|
|
onProfessionIdsChange?: (ids: string[]) => void;
|
|||
|
|
selectedStationIds?: string[];
|
|||
|
|
onStationIdsChange?: (ids: string[]) => void;
|
|||
|
|
selectedDutyLevels?: number[];
|
|||
|
|
onDutyLevelsChange?: (levels: number[]) => void;
|
|||
|
|
// 搜索相关props
|
|||
|
|
searchKeyword?: string;
|
|||
|
|
onSearchKeywordChange?: (keyword: string) => void;
|
|||
|
|
// 新增分页相关props
|
|||
|
|
currentPage?: number;
|
|||
|
|
totalPages?: number;
|
|||
|
|
totalCount?: number;
|
|||
|
|
pageSize?: number;
|
|||
|
|
hasNextPage?: boolean;
|
|||
|
|
hasPreviousPage?: boolean;
|
|||
|
|
onPageChange?: (page: number) => void;
|
|||
|
|
onPageSizeChange?: (pageSize: number) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function EliteDataTable({
|
|||
|
|
data,
|
|||
|
|
isLoading = false,
|
|||
|
|
onViewDetail = () => { },
|
|||
|
|
onProfessionClick = () => { },
|
|||
|
|
onStationClick = () => { }, // 新增台站点击处理
|
|||
|
|
onAddEmployee = () => { },
|
|||
|
|
onExportTable = () => { },
|
|||
|
|
onExportFilteredTable = () => { },
|
|||
|
|
isExporting = false,
|
|||
|
|
selectedProfessionIds = [],
|
|||
|
|
onProfessionIdsChange = () => { },
|
|||
|
|
selectedStationIds = [],
|
|||
|
|
onStationIdsChange = () => { },
|
|||
|
|
selectedDutyLevels = [],
|
|||
|
|
onDutyLevelsChange = () => { },
|
|||
|
|
searchKeyword = '',
|
|||
|
|
onSearchKeywordChange = () => { },
|
|||
|
|
// 新增分页相关props
|
|||
|
|
currentPage = 1,
|
|||
|
|
totalPages = 1,
|
|||
|
|
totalCount = 0,
|
|||
|
|
pageSize = 10,
|
|||
|
|
hasNextPage = false,
|
|||
|
|
hasPreviousPage = false,
|
|||
|
|
onPageChange = () => { },
|
|||
|
|
onPageSizeChange = () => { },
|
|||
|
|
}: EliteDataTableProps) {
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
// 防抖处理搜索输入
|
|||
|
|
const [localSearchKeyword, setLocalSearchKeyword] = React.useState(searchKeyword);
|
|||
|
|
|
|||
|
|
React.useEffect(() => {
|
|||
|
|
setLocalSearchKeyword(searchKeyword);
|
|||
|
|
}, [searchKeyword]);
|
|||
|
|
|
|||
|
|
React.useEffect(() => {
|
|||
|
|
const timer = setTimeout(() => {
|
|||
|
|
onSearchKeywordChange(localSearchKeyword);
|
|||
|
|
}, 300); // 300ms 防抖
|
|||
|
|
|
|||
|
|
return () => clearTimeout(timer);
|
|||
|
|
}, [localSearchKeyword, onSearchKeywordChange]);
|
|||
|
|
|
|||
|
|
// 按专业分组数据（用于显示）
|
|||
|
|
const groupedData = React.useMemo(() => {
|
|||
|
|
const groups: Record<string, EliteFormData[]> = {};
|
|||
|
|
data.forEach((item) => {
|
|||
|
|
const profession = item.profession || '';
|
|||
|
|
if (!groups[profession]) {
|
|||
|
|
groups[profession] = [];
|
|||
|
|
}
|
|||
|
|
groups[profession].push(item);
|
|||
|
|
});
|
|||
|
|
return groups;
|
|||
|
|
}, [data]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{/* 筛选器和操作按钮栏 */}
|
|||
|
|
<div className="flex flex-col gap-4">
|
|||
|
|
{/* 标题和操作按钮 */}
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<h2 className="text-lg font-semibold">{t('profile.elite_table.title')}</h2>
|
|||
|
|
<Badge variant="outline">
|
|||
|
|
{isLoading ? t('common.loading') : t('common.count_items', { count: totalCount || 0 })}
|
|||
|
|
</Badge>
|
|||
|
|
{/* 筛选状态显示 */}
|
|||
|
|
{(selectedProfessionIds.length > 0 || selectedStationIds.length > 0 || selectedDutyLevels.length > 0 || searchKeyword.trim()) && (
|
|||
|
|
<Badge variant="secondary">
|
|||
|
|
{t('common.filtered')}
|
|||
|
|
</Badge>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={onExportFilteredTable}
|
|||
|
|
disabled={isExporting || isLoading}
|
|||
|
|
className="flex items-center gap-2 border-[#5D6E89]"
|
|||
|
|
>
|
|||
|
|
<IconDownload className="size-4" />
|
|||
|
|
{isExporting ? t('common.exporting') : t('common.export_filtered')}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={onExportTable}
|
|||
|
|
disabled={isExporting || isLoading}
|
|||
|
|
className="flex items-center gap-2 border-[#5D6E89]"
|
|||
|
|
>
|
|||
|
|
<IconDownload className="size-4" />
|
|||
|
|
{isExporting ? t('common.exporting') : t('common.export_all')}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={onAddEmployee}
|
|||
|
|
className="flex items-center gap-2 border border-[#5D6E89]"
|
|||
|
|
>
|
|||
|
|
<IconPlus className="size-4" />
|
|||
|
|
{t('common.add_employee')}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{/* 筛选器区域 */}
|
|||
|
|
<div className="flex flex-wrap items-center gap-4">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<span className="text-sm font-medium text-muted-foreground">{t('common.filter_conditions')}</span>
|
|||
|
|
<div className="w-64">
|
|||
|
|
<MultipleProfessionSelector
|
|||
|
|
value={selectedProfessionIds}
|
|||
|
|
onValueChange={onProfessionIdsChange}
|
|||
|
|
placeholder={t('profile.elite_table.filter.select_profession')}
|
|||
|
|
allowClear
|
|||
|
|
className='h-8'
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-72">
|
|||
|
|
<MultipleStationSelector
|
|||
|
|
value={selectedStationIds}
|
|||
|
|
onValueChange={onStationIdsChange}
|
|||
|
|
placeholder={t('profile.elite_table.filter.select_station')}
|
|||
|
|
allowClear
|
|||
|
|
className='h-8'
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-70">
|
|||
|
|
<MultipleDutyLevelSelector
|
|||
|
|
value={selectedDutyLevels}
|
|||
|
|
onValueChange={onDutyLevelsChange}
|
|||
|
|
placeholder={t('profile.elite_table.filter.select_duty_level')}
|
|||
|
|
allowClear
|
|||
|
|
className='h-8'
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
{/* 搜索框 */}
|
|||
|
|
<div className="w-70">
|
|||
|
|
<div className="relative">
|
|||
|
|
<IconSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
|||
|
|
<Input
|
|||
|
|
placeholder={t('profile.elite_table.filter.search_placeholder')}
|
|||
|
|
value={localSearchKeyword}
|
|||
|
|
onChange={(e) => setLocalSearchKeyword(e.target.value)}
|
|||
|
|
className="pl-10 h-8 border border-[#5D6E89]"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 表格 */}
|
|||
|
|
<div className="rounded-md border border-border max-h-[650px] overflow-auto">
|
|||
|
|
<Table className="table-fixed w-full" stickyHeader>
|
|||
|
|
<TableHeader className="sticky top-0 z-10 bg-background">
|
|||
|
|
<TableRow className="bg-muted/50">
|
|||
|
|
<TableHead className="text-center w-24 border-r-[1px] border-border break-words">{t('profile.elite_table.column.profession')}</TableHead>
|
|||
|
|
<TableHead className="text-center w-36 border-r-[1px] border-border break-words">{t('profile.elite_table.column.stations')}</TableHead>
|
|||
|
|
<TableHead className="text-center w-50 border-r-[1px] border-border break-words">{t('profile.elite_table.column.technician')}</TableHead>
|
|||
|
|
<TableHead className="text-center w-50 border-r-[1px] border-border break-words">{t('profile.elite_table.column.leader')}</TableHead>
|
|||
|
|
<TableHead className="text-center w-50 break-words">{t('profile.elite_table.column.operator')}</TableHead>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{isLoading ? (
|
|||
|
|
<TableRow>
|
|||
|
|
<TableCell colSpan={6} className="h-24 text-center align-middle">
|
|||
|
|
{t('common.loading')}
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
) : Object.keys(groupedData).length > 0 ? (
|
|||
|
|
Object.entries(groupedData).map(([profession, items]) => (
|
|||
|
|
<React.Fragment key={profession}>
|
|||
|
|
{items.map((item, index) => (
|
|||
|
|
<TableRow
|
|||
|
|
key={`${profession}-${item.sequence}`}
|
|||
|
|
className="hover:bg-muted/50"
|
|||
|
|
>
|
|||
|
|
{index === 0 ? (
|
|||
|
|
<TableCell
|
|||
|
|
className="text-center align-middle font-medium bg-muted/30 border-r-[1px] border-border break-words w-24 cursor-pointer hover:bg-muted/50 transition-colors"
|
|||
|
|
rowSpan={items.length}
|
|||
|
|
onClick={() => onProfessionClick(profession, item.professionId)}
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-row items-center justify-center gap-2 py-3">
|
|||
|
|
<span className="font-medium text-sm">{profession}</span>
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
) : null}
|
|||
|
|
<TableCell
|
|||
|
|
className="text-center align-middle font-medium border-r-[1px] border-border break-words w-36 cursor-pointer hover:bg-muted/50 transition-colors"
|
|||
|
|
onClick={() => onStationClick(item.profession, item.stationId, item.professionId)}
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-wrap items-center justify-center gap-[1px] py-2">
|
|||
|
|
{item.station && (
|
|||
|
|
<>
|
|||
|
|
<IconBuilding className="size-3 text-foreground/80" />
|
|||
|
|
<span className="text-sm break-words whitespace-normal">
|
|||
|
|
{item.parentOrganization ? `${item.parentOrganization}/${item.station}` : item.station}
|
|||
|
|
</span>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-center align-middle border-r-[1px] border-border break-words w-50">
|
|||
|
|
<PersonList
|
|||
|
|
persons={item.technicians}
|
|||
|
|
onViewDetail={onViewDetail}
|
|||
|
|
/>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-center align-middle border-r-[1px] border-border break-words w-50">
|
|||
|
|
<PersonList
|
|||
|
|
persons={item.supervisors}
|
|||
|
|
onViewDetail={onViewDetail}
|
|||
|
|
/>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-center align-middle break-words w-50">
|
|||
|
|
<PersonList
|
|||
|
|
persons={item.operators}
|
|||
|
|
onViewDetail={onViewDetail}
|
|||
|
|
/>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))}
|
|||
|
|
</React.Fragment>
|
|||
|
|
))
|
|||
|
|
) : (
|
|||
|
|
<TableRow>
|
|||
|
|
<TableCell
|
|||
|
|
colSpan={5}
|
|||
|
|
className="h-24 text-center align-middle text-muted-foreground"
|
|||
|
|
>
|
|||
|
|
{searchKeyword.trim() || selectedDutyLevels.length > 0 ? t('common.no_records_found') : t('common.no_data')}
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
)}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</div>
|
|||
|
|
{/* 分页控制 */}
|
|||
|
|
<div className="flex items-center justify-between space-x-2 py-3">
|
|||
|
|
<div className="flex-1 text-sm text-muted-foreground">
|
|||
|
|
{t('pagination.page_display', { current: currentPage, total: totalPages, count: totalCount })}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center space-x-4 lg:space-x-6">
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<Label htmlFor="page-size" className="text-sm font-medium">
|
|||
|
|
{t('pagination.rows_per_page')}
|
|||
|
|
</Label>
|
|||
|
|
<Select
|
|||
|
|
value={`${pageSize}`}
|
|||
|
|
onValueChange={(value) => {
|
|||
|
|
onPageSizeChange(Number(value));
|
|||
|
|
onPageChange(1); // 重置到第一页
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<SelectTrigger className="h-7 w-[70px] text-sm" id="page-size">
|
|||
|
|
<SelectValue placeholder={pageSize} />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent side="top">
|
|||
|
|
{[5, 10, 15, 20, 30].map((size) => (
|
|||
|
|
<SelectItem key={size} value={`${size}`}>
|
|||
|
|
{size}
|
|||
|
|
</SelectItem>
|
|||
|
|
))}
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
<span className="text-sm text-muted-foreground">{t('pagination.items_per_page')}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex w-[120px] items-center justify-center text-sm font-medium">
|
|||
|
|
{t('pagination.page_info_simple', { current: currentPage, total: totalPages })}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center space-x-1">
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
className="hidden h-7 w-7 p-0 lg:flex"
|
|||
|
|
onClick={() => onPageChange(1)}
|
|||
|
|
disabled={!hasPreviousPage || isLoading}
|
|||
|
|
>
|
|||
|
|
<span className="sr-only">{t('pagination.go_to_first_page')}</span>
|
|||
|
|
<IconChevronsLeft className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
className="h-7 w-7 p-0"
|
|||
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|||
|
|
disabled={!hasPreviousPage || isLoading}
|
|||
|
|
>
|
|||
|
|
<span className="sr-only">{t('pagination.go_to_previous_page')}</span>
|
|||
|
|
<IconChevronLeft className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
className="h-7 w-7 p-0"
|
|||
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|||
|
|
disabled={!hasNextPage || isLoading}
|
|||
|
|
>
|
|||
|
|
<span className="sr-only">{t('pagination.go_to_next_page')}</span>
|
|||
|
|
<IconChevronRight className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
className="hidden h-7 w-7 p-0 lg:flex"
|
|||
|
|
onClick={() => onPageChange(totalPages)}
|
|||
|
|
disabled={!hasNextPage || isLoading}
|
|||
|
|
>
|
|||
|
|
<span className="sr-only">{t('pagination.go_to_last_page')}</span>
|
|||
|
|
<IconChevronsRight className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|