126 lines
3.6 KiB
TypeScript
126 lines
3.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useDomain } from "@/hook/useDomain";
|
|
import { Button, Modal, Select, Space, Table, Tooltip } from "antd";
|
|
import { columns } from "./columns";
|
|
import { DesktopOutlined, TagOutlined } from "@ant-design/icons";
|
|
import { openOHIFViewer } from "@/modules/Admin/Dicom/Upload/util";
|
|
|
|
interface ArchiveListProps {
|
|
children?: JSX.Element;
|
|
}
|
|
|
|
type CategoryItemType = {
|
|
labels: { name: string; id: number }[];
|
|
};
|
|
|
|
type ArchiveItemType = {
|
|
id: number;
|
|
username: string;
|
|
PatientID: string;
|
|
StudyInstanceUID: string;
|
|
SeriesInstanceUID: string;
|
|
createTime: string;
|
|
updateTime: string;
|
|
};
|
|
|
|
export const ArchiveList = (props: ArchiveListProps) => {
|
|
const [dataSource, setDataSource] = useState<ArchiveItemType[]>([]);
|
|
const [tableLoading, setTableLoading] = useState(false);
|
|
const { userDomainService, labelDomainService } = useDomain();
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [selectLabels, setSelectLabels] = useState<number[]>();
|
|
const [labelOptions, setLabelOptions] = useState<
|
|
{ label: string; value: string }[]
|
|
>([]);
|
|
|
|
useEffect(() => {
|
|
userDomainService.findArchiveTask().then((res) => {
|
|
const { code, data } = res;
|
|
if (code === 0) {
|
|
setDataSource(data as ArchiveItemType[]);
|
|
}
|
|
setTableLoading(false);
|
|
});
|
|
}, [userDomainService]);
|
|
|
|
useEffect(() => {
|
|
labelDomainService.findLabelCategory().then((res) => {
|
|
const { code, data } = res;
|
|
if (code === 0) {
|
|
const labels = (data as CategoryItemType[])
|
|
.map((i) => i.labels)
|
|
.flat()
|
|
.map((i) => ({ label: i.name, value: String(i.id) }));
|
|
setLabelOptions(labels);
|
|
}
|
|
});
|
|
}, [labelDomainService]);
|
|
|
|
const onViewDicom = (record: ArchiveItemType) => {
|
|
const { StudyInstanceUID, SeriesInstanceUID } = record;
|
|
openOHIFViewer(StudyInstanceUID, SeriesInstanceUID);
|
|
};
|
|
|
|
const onLabelSelectChange = (labelIds: string[]) =>
|
|
setSelectLabels(labelIds.map((i) => Number(i)));
|
|
|
|
const onUpdateLabelForSeries = () => {
|
|
if (selectLabels?.length === 0) return setIsModalOpen(false);
|
|
console.log("onUpdateLabelForSeries", selectLabels);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Table
|
|
dataSource={dataSource}
|
|
loading={tableLoading}
|
|
columns={[
|
|
...columns,
|
|
{
|
|
title: "操作",
|
|
dataIndex: "operation",
|
|
render: (_: any, record: ArchiveItemType) => (
|
|
<Space>
|
|
<Tooltip title="在线阅片">
|
|
<Button
|
|
type="text"
|
|
icon={<DesktopOutlined />}
|
|
onClick={() => onViewDicom(record)}
|
|
/>
|
|
</Tooltip>
|
|
<Tooltip title="添加标签">
|
|
<Button
|
|
type="text"
|
|
icon={<TagOutlined />}
|
|
onClick={() => setIsModalOpen(true)}
|
|
/>
|
|
</Tooltip>
|
|
</Space>
|
|
),
|
|
},
|
|
]}
|
|
rowKey="id"
|
|
/>
|
|
<Modal
|
|
open={isModalOpen}
|
|
title="添加标签"
|
|
cancelText="再想想"
|
|
okText="确认"
|
|
onCancel={() => setIsModalOpen(false)}
|
|
onOk={onUpdateLabelForSeries}
|
|
>
|
|
<Select
|
|
mode="multiple"
|
|
allowClear
|
|
style={{ width: "100%" }}
|
|
placeholder="请选择标签"
|
|
defaultValue={[]}
|
|
onChange={onLabelSelectChange}
|
|
options={labelOptions}
|
|
optionFilterProp="label"
|
|
/>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|