import React, { useState } from 'react'; import { Table, TableColumnsType } from 'antd'; import { FormattedMessage } from 'react-intl'; import { Task, Task as DataType } from '@/domain/work'; import type { ResizeCallbackData } from 'react-resizable'; import { Resizable } from 'react-resizable'; import { WorkFilter } from '@/states/patient/worklist/types/workfilter'; const columnsDef = [ { title: ( ), dataIndex: 'StudyInstanceUID', }, { title: ( ), dataIndex: 'StudyID', }, { title: ( ), dataIndex: 'SpecificCharacterSet', }, { title: ( ), dataIndex: 'AccessionNumber', }, { title: ( ), dataIndex: 'PatientID', }, { title: ( ), dataIndex: 'PatientName', }, { title: ( ), dataIndex: 'DisplayPatientName', }, { title: ( ), dataIndex: 'PatientSize', }, { title: ( ), dataIndex: 'PatientAge', }, { title: ( ), dataIndex: 'PatientSex', }, { title: ( ), dataIndex: 'AdmittingTime', }, { title: ( ), dataIndex: 'RegSource', }, { title: ( ), dataIndex: 'StudyStatus', }, { title: ( ), dataIndex: 'RequestedProcedureID', }, { title: ( ), dataIndex: 'PerformedProtocolCodeValue', }, { title: ( ), dataIndex: 'PerformedProtocolCodeMeaning', }, { title: ( ), dataIndex: 'PerformedProcedureStepID', }, { title: ( ), dataIndex: 'StudyDescription', }, { title: ( ), dataIndex: 'StudyStartDatetime', }, { title: ( ), dataIndex: 'ScheduledProcedureStepStartDate', }, { title: ( ), dataIndex: 'StudyLock', }, { title: ( ), dataIndex: 'OperatorID', }, { title: ( ), dataIndex: 'Modality', }, { title: ( ), dataIndex: 'Views', }, { title: ( ), dataIndex: 'Thickness', }, { title: ( ), dataIndex: 'PatientType', }, { title: ( ), dataIndex: 'StudyType', }, { title: ( ), dataIndex: 'QRCode', }, { title: ( ), dataIndex: 'IsExported', }, { title: ( ), dataIndex: 'IsEdited', }, { title: ( ), dataIndex: 'WorkRef', }, { title: ( ), dataIndex: 'IsAppended', }, { title: ( ), dataIndex: 'CreationTime', }, { title: ( ), dataIndex: 'MappedStatus', }, { title: ( ), dataIndex: 'IsDelete', }, ]; interface TitlePropsType { width: number; onResize: ( e: React.SyntheticEvent, data: ResizeCallbackData ) => void; } const ResizableTitle: React.FC< Readonly< React.HTMLAttributes & TitlePropsType > > = (props) => { const { onResize, width, ...restProps } = props; if (!width) { return ; } return ( e.stopPropagation()} /> } onResize={onResize} draggableOpts={{ enableUserSelectHack: false }} > ); }; interface WorklistTableProps { worklistData: Task[]; filters?: WorkFilter; page?: number; pageSize?: number; selectedIds: string[]; handleRowClick: (record: Task) => void; handleRowDoubleClick: (record: Task) => void; } const WorklistTable: React.FC = ({ worklistData, // filters, // page, // pageSize, selectedIds, handleRowClick, handleRowDoubleClick, }) => { const [columns, setColumns] = useState>( columnsDef.map((col) => ({ ...col, width: 150, // 默认宽度 })) ); const handleResize = (index: number) => (_: React.SyntheticEvent, { size }: ResizeCallbackData) => { console.log('Resizing column:', index, size); const newColumns = [...columns]; newColumns[index] = { ...newColumns[index], width: size.width, }; setColumns(newColumns); }; const mergedColumns = columns.map[number]>( (col, index) => ({ ...col, onHeaderCell: (column: TableColumnsType[number]) => ({ width: column.width, onResize: handleResize(index) as React.ReactEventHandler, style: { whiteSpace: 'nowrap' }, }), onCell: () => ({ style: { whiteSpace: 'nowrap' } }), }) ); return ( bordered className="px-4" columns={mergedColumns} scroll={{ x: 'max-content' }} components={{ header: { cell: ResizableTitle } }} dataSource={worklistData} rowKey="StudyID" onRow={(record) => ({ onClick: () => handleRowClick(record), onDoubleClick: () => handleRowDoubleClick(record), })} rowHoverable={false} rowClassName={(record) => selectedIds.includes(record.StudyID) ? 'bg-yellow-500 hover:bg-yellow-800' : '' } /> ); }; export default WorklistTable;