|
|
@@ -1,17 +1,19 @@
|
|
|
-import React from 'react';
|
|
|
+import React, { useState } from 'react';
|
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
|
import { useEffect } from 'react';
|
|
|
import {
|
|
|
fetchWorkThunk,
|
|
|
workSelectionSlice,
|
|
|
} from '../../../states/patient/worklist/slices/workSlice';
|
|
|
-import { Table } from 'antd';
|
|
|
+import { Table, TableColumnsType } from 'antd';
|
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
import { RootState, AppDispatch } from '../../../states/store';
|
|
|
-import { Task } from '@/domain/work';
|
|
|
+import { Task, Task as DataType } from '@/domain/work';
|
|
|
import worklistToExam from '../../../domain/patient/worklistToExam';
|
|
|
+import type { ResizeCallbackData } from 'react-resizable';
|
|
|
+import { Resizable } from 'react-resizable';
|
|
|
|
|
|
-const columns = [
|
|
|
+const columnsDef = [
|
|
|
{
|
|
|
title: (
|
|
|
<FormattedMessage
|
|
|
@@ -329,6 +331,53 @@ const columns = [
|
|
|
},
|
|
|
];
|
|
|
|
|
|
+interface TitlePropsType {
|
|
|
+ width: number;
|
|
|
+ onResize: (
|
|
|
+ e: React.SyntheticEvent<Element>,
|
|
|
+ data: ResizeCallbackData
|
|
|
+ ) => void;
|
|
|
+}
|
|
|
+
|
|
|
+const ResizableTitle: React.FC<
|
|
|
+ Readonly<
|
|
|
+ React.HTMLAttributes<HTMLTableCellElement | Resizable> & TitlePropsType
|
|
|
+ >
|
|
|
+> = (props) => {
|
|
|
+ const { onResize, width, ...restProps } = props;
|
|
|
+
|
|
|
+ if (!width) {
|
|
|
+ return <th {...restProps} />;
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Resizable
|
|
|
+ width={width}
|
|
|
+ height={0}
|
|
|
+ minConstraints={[50, 0]} // 最小宽度 50px
|
|
|
+ // maxConstraints={[500, 0]} // 最大宽度 500px
|
|
|
+ handle={
|
|
|
+ <span
|
|
|
+ style={{
|
|
|
+ position: 'absolute',
|
|
|
+ right: '-5px', // 或 insetInlineEnd: "-5px"（支持逻辑属性）
|
|
|
+ bottom: '0',
|
|
|
+ zIndex: 1,
|
|
|
+ width: '10px',
|
|
|
+ height: '100%',
|
|
|
+ cursor: 'col-resize',
|
|
|
+ }}
|
|
|
+ onClick={(e) => e.stopPropagation()}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ onResize={onResize}
|
|
|
+ draggableOpts={{ enableUserSelectHack: false }}
|
|
|
+ >
|
|
|
+ <th {...restProps} />
|
|
|
+ </Resizable>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
const WorklistTable: React.FC = () => {
|
|
|
const dispatch: AppDispatch = useDispatch();
|
|
|
const worklistData = useSelector(
|
|
|
@@ -344,6 +393,14 @@ const WorklistTable: React.FC = () => {
|
|
|
);
|
|
|
|
|
|
useEffect(() => {
|
|
|
+ console.log(
|
|
|
+ 'Fetching worklist data with filters:',
|
|
|
+ filters,
|
|
|
+ 'page:',
|
|
|
+ page,
|
|
|
+ 'pageSize:',
|
|
|
+ pageSize
|
|
|
+ );
|
|
|
dispatch(fetchWorkThunk({ page, pageSize, filters }));
|
|
|
}, [dispatch, filters, page, pageSize]);
|
|
|
|
|
|
@@ -363,9 +420,44 @@ const WorklistTable: React.FC = () => {
|
|
|
worklistToExam(record);
|
|
|
};
|
|
|
|
|
|
+ const [columns, setColumns] = useState<TableColumnsType<DataType>>(
|
|
|
+ columnsDef.map((col) => ({
|
|
|
+ ...col,
|
|
|
+ width: 150, // 默认宽度
|
|
|
+ }))
|
|
|
+ );
|
|
|
+
|
|
|
+ const handleResize =
|
|
|
+ (index: number) =>
|
|
|
+ (_: React.SyntheticEvent<Element>, { size }: ResizeCallbackData) => {
|
|
|
+ console.log('Resizing column:', index, size);
|
|
|
+ const newColumns = [...columns];
|
|
|
+ newColumns[index] = {
|
|
|
+ ...newColumns[index],
|
|
|
+ width: size.width,
|
|
|
+ };
|
|
|
+ setColumns(newColumns);
|
|
|
+ };
|
|
|
+
|
|
|
+ const mergedColumns = columns.map<TableColumnsType<DataType>[number]>(
|
|
|
+ (col, index) => ({
|
|
|
+ ...col,
|
|
|
+ onHeaderCell: (column: TableColumnsType<DataType>[number]) => ({
|
|
|
+ width: column.width,
|
|
|
+ onResize: handleResize(index) as React.ReactEventHandler<HTMLElement>,
|
|
|
+ style: { whiteSpace: 'nowrap' },
|
|
|
+ }),
|
|
|
+ onCell: () => ({ style: { whiteSpace: 'nowrap' } }),
|
|
|
+ })
|
|
|
+ );
|
|
|
+
|
|
|
return (
|
|
|
- <Table
|
|
|
- columns={columns}
|
|
|
+ <Table<DataType>
|
|
|
+ bordered
|
|
|
+ className="px-4"
|
|
|
+ columns={mergedColumns}
|
|
|
+ scroll={{ x: 'max-content' }}
|
|
|
+ components={{ header: { cell: ResizableTitle } }}
|
|
|
dataSource={worklistData}
|
|
|
rowKey="StudyInstanceUID"
|
|
|
onRow={(record) => ({
|
sw