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;