feat (1.22.1 -> 1.23.0): 实现诊断报告功能，包括图像选择、报告模板管理和报告预览保存

- 在 APRActions.ts 中新增获取报告内容和PDF下载API
- 在报告组件中实现图像选择功能，从曝光图像中选择添加到报告
- 完善报告预览和保存流程，支持图像文件名提取
- 优化报告创建流程，限制单选检查项目避免冲突
- 增强报告数据初始化，根据选中工作自动填充患者信息
- 新增报告相关API接口，支持报告列表查询、模板管理和批量下载
- 更新状态管理，支持当前工作数据传递和图像列表处理

改动文件：
- src/API/report/index.ts (新增)
- src/API/report/ReportActions.ts (新增)
- src/API/report/ReportTemplateActions.ts (新增)
- src/API/patient/DiagnosisReportActions.ts (修改)
- src/pages/patient/DiagnosticReport/components/ImageList.tsx (修改)
- src/pages/patient/DiagnosticReport/components/ImageSelection.tsx (修改)
- src/pages/patient/DiagnosticReport/index.tsx (修改)
- src/pages/patient/components/ActionPanel.tsx (修改)
- src/states/patient/DiagnosticReport/previewReportThunk.ts (修改)
- src/states/patient/DiagnosticReport/saveReportThunk.ts (修改)
- src/states/patient/DiagnosticReport/slice.ts (修改)
- CHANGELOG.md (修改)
- package.json (修改)

CHANGELOG.md

@@ -2,6 +2,50 @@
 
 本项目的所有重要变更都将记录在此文件中。
 
+## [1.23.0] - 2025-12-23 16:58
+
+### 新增 (Added)
+- **诊断报告功能完整实现** - 实现完整的诊断报告系统，包括图像选择、报告模板管理和报告预览保存
+  - 新增报告相关API接口:报告列表查询、批量下载、预览、模板管理(增删改查)
+  - 实现报告图像选择功能:从检查曝光图像中选择图像添加到报告
+  - 完善报告预览和保存流程:支持图像列表提取和文件名处理
+  - 优化报告创建流程:限制单选检查项目，避免多选冲突
+  - 增强报告数据初始化:根据选中工作自动填充患者基本信息
+  - 集成报告模板系统:支持模板的创建、修改、删除和列表查询
+
+**核心功能实现:**
+- 报告创建流程:用户从工作列表选择单个检查项目进入报告创建界面
+- 图像选择系统:自动获取检查的曝光图像，用户可以选择添加到报告
+- 报告模板管理:完整的CRUD操作，支持报告模板的复用
+- 报告预览保存:支持PDF预览和数据保存，包含选中的图像列表
+- 数据初始化:根据选中工作自动填充患者姓名、年龄、性别等信息
+- 用户界面优化:中英文界面支持，加载状态和错误处理
+
+**技术实现:**
+- 新增API层:创建 report/ 目录下的 ReportActions.ts 和 ReportTemplateActions.ts
+- 增强诊断报告API:添加 fetchDiagnosisReportContent 和 downloadDiagnosisReportPdf
+- 状态管理扩展:更新 slice 支持当前工作数据传递
+- 组件重构:ImageList 和 ImageSelection 组件实现图像选择逻辑
+- 异步流程优化:previewReportThunk 和 saveReportThunk 支持图像处理
+- 表单初始化:DiagnosticReport 组件根据工作数据自动填充
+
+**改动文件:**
+- src/API/report/index.ts (新增)
+- src/API/report/ReportActions.ts (新增)
+- src/API/report/ReportTemplateActions.ts (新增)
+- src/API/patient/DiagnosisReportActions.ts (修改)
+- src/pages/patient/DiagnosticReport/components/ImageList.tsx (修改)
+- src/pages/patient/DiagnosticReport/components/ImageSelection.tsx (修改)
+- src/pages/patient/DiagnosticReport/index.tsx (修改)
+- src/pages/patient/components/ActionPanel.tsx (修改)
+- src/states/patient/DiagnosticReport/previewReportThunk.ts (修改)
+- src/states/patient/DiagnosticReport/saveReportThunk.ts (修改)
+- src/states/patient/DiagnosticReport/slice.ts (修改)
+- CHANGELOG.md
+- package.json (版本更新: 1.22.1 -> 1.23.0)
+
+---
+
 ## [1.22.1] - 2025-12-23 13:33
 
 ### 变更 (Changed)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zsis",
-  "version": "1.22.1",
+  "version": "1.23.0",
   "private": true,
   "description": "医学成像系统",
   "main": "main.js",

src/API/patient/DiagnosisReportActions.ts

@@ -72,3 +72,32 @@ export const fetchDiagnosisReport = async (
   );
   return response.data;
 };
+
+import type { ReportContentResponse } from '../report';
+
+/**
+ * 获取报告内容
+ * GET /dr/api/v1/auth/study/{id}/report_content
+ */
+export const fetchDiagnosisReportContent = async (
+  studyId: string
+): Promise<ReportContentResponse> => {
+  const response = await axiosInstance.get(
+    `/auth/study/${studyId}/report_content`
+  );
+  return response.data;
+};
+
+/**
+ * 获取报告(PDF)
+ * GET /dr/api/v1/auth/study/{id}/report
+ */
+export const downloadDiagnosisReportPdf = async (
+  studyId: string
+): Promise<Blob> => {
+  const response = await axiosInstance.get(
+    `/auth/study/${studyId}/report`,
+    { responseType: 'blob' }
+  );
+  return response.data;
+};

src/API/report/ReportActions.ts

@@ -0,0 +1,138 @@
+/* eslint-disable */
+import axiosInstance from '../interceptor';
+
+// 报告查询参数
+export interface ReportQueryParams {
+  start_time?: string;
+  end_time?: string;
+  page?: number;
+  page_size?: number;
+}
+
+// 报告列表项
+export interface ReportItem {
+  study_instance_uid: string;
+  study_id: string;
+  headers: {
+    age: string;
+    bed_number: string;
+    hospitalization_number: string;
+    inspection_method: string;
+    inspection_number: string;
+    medical_record_number: string;
+    name: string;
+    requesting_department: string;
+    sex: string;
+  };
+  findings: string;
+  impression: string;
+  radiologist: string;
+  review_physician: string;
+  create_time: string;
+}
+
+// 报告内容详情
+export interface ReportContent {
+  '@type': string;
+  study_instance_uid: string;
+  study_id: string;
+  headers: {
+    age: string;
+    bed_number: string;
+    hospitalization_number: string;
+    inspection_method: string;
+    inspection_number: string;
+    medical_record_number: string;
+    name: string;
+    requesting_department: string;
+    sex: string;
+  };
+  findings: string;
+  impression: string;
+  radiologist: string;
+  review_physician: string;
+  images: string[];
+  create_time: string;
+}
+
+// 报告内容响应
+export interface ReportContentResponse {
+  code: string;
+  description: string;
+  solution: string;
+  data: ReportContent;
+}
+
+// 报告列表响应
+export interface ReportListResponse {
+  code: string;
+  description: string;
+  solution: string;
+  data: {
+    '@type': string;
+    count: number;
+    reports: ReportItem[];
+  };
+}
+
+// 报告预览请求
+export interface ReportPreviewRequest {
+  headers: {
+    name: string;
+    sex: string;
+    age: string;
+    medical_record_number?: string;
+    hospitalization_number?: string;
+    bed_number?: string;
+    requesting_department: string;
+    inspection_number: string;
+    inspection_method: string;
+    patient_type?: string;
+    owner_name?: string;
+  };
+  findings: string;
+  impression: string;
+  radiologist: string;
+  review_physician: string;
+  images: string[];
+}
+
+// 报告预览响应
+export interface ReportPreviewResponse extends Blob {}
+
+/**
+ * 获取报告列表
+ * POST /dr/api/v1/auth/report
+ */
+export const getReportList = async (
+  params: ReportQueryParams
+): Promise<ReportListResponse> => {
+  const response = await axiosInstance.post('/auth/report', params);
+  return response.data;
+};
+
+/**
+ * 批量下载报告(xlsx)
+ * POST /dr/api/v1/auth/report/xls
+ */
+export const downloadReportXlsx = async (
+  params: Pick<ReportQueryParams, 'start_time' | 'end_time'>
+): Promise<Blob> => {
+  const response = await axiosInstance.post('/auth/report/xls', params, {
+    responseType: 'blob'
+  });
+  return response.data;
+};
+
+/**
+ * 报告预览
+ * POST /dr/api/v1/auth/report/preview
+ */
+export const previewReport = async (
+  reportData: ReportPreviewRequest
+): Promise<Blob> => {
+  const response = await axiosInstance.post('/auth/report/preview', reportData, {
+    responseType: 'blob'
+  });
+  return response.data;
+};

src/API/report/ReportTemplateActions.ts

@@ -0,0 +1,90 @@
+/* eslint-disable */
+import axiosInstance from '../interceptor';
+
+// 报告模板接口
+export interface ReportTemplate {
+  id?: string;
+  name: string;
+  findings: string;
+  impression: string;
+  tag: string;
+  staple: boolean;
+}
+
+// 报告模板列表查询参数
+export interface ReportTemplateQueryParams {
+  tag?: string;
+  is_staple?: boolean;
+  is_pre_install?: boolean;
+}
+
+// 报告模板响应
+export interface ReportTemplateResponse {
+  code: string;
+  description: string;
+  solution: string;
+  data: any; // 根据实际API响应调整
+}
+
+// 报告模板列表响应
+export interface ReportTemplateListResponse {
+  code: string;
+  description: string;
+  solution: string;
+  data: {
+    templates: ReportTemplate[];
+    count?: number;
+  };
+}
+
+/**
+ * 获取报告模板列表
+ * GET /dr/api/v1/auth/report/template
+ */
+export const getReportTemplateList = async (
+  params?: ReportTemplateQueryParams
+): Promise<ReportTemplateListResponse> => {
+  const response = await axiosInstance.get('/auth/report/template', {
+    params
+  });
+  return response.data;
+};
+
+/**
+ * 新建报告模板
+ * POST /dr/api/v1/auth/report/template
+ */
+export const createReportTemplate = async (
+  template: ReportTemplate
+): Promise<ReportTemplateResponse> => {
+  const response = await axiosInstance.post('/auth/report/template', template);
+  return response.data;
+};
+
+/**
+ * 修改报告模板
+ * POST /dr/api/v1/auth/report/template/{template_id}
+ */
+export const updateReportTemplate = async (
+  templateId: string,
+  template: Partial<ReportTemplate>
+): Promise<ReportTemplateResponse> => {
+  const response = await axiosInstance.post(
+    `/auth/report/template/${templateId}`,
+    template
+  );
+  return response.data;
+};
+
+/**
+ * 删除报告模板
+ * DELETE /dr/api/v1/auth/report/template/{template_id}
+ */
+export const deleteReportTemplate = async (
+  templateId: string
+): Promise<ReportTemplateResponse> => {
+  const response = await axiosInstance.delete(
+    `/auth/report/template/${templateId}`
+  );
+  return response.data;
+};

src/API/report/index.ts

@@ -0,0 +1,14 @@
+// 报告模板相关API和类型
+export * from './ReportTemplateActions';
+
+// 报告列表相关API和类型
+export * from './ReportActions';
+
+// 重新导出诊断报告API中的新增功能
+export {
+  fetchDiagnosisReportContent,
+  downloadDiagnosisReportPdf
+} from '../patient/DiagnosisReportActions';
+
+// 报告内容相关类型
+export type { ReportContent, ReportContentResponse } from './ReportActions';

src/pages/patient/DiagnosticReport/components/ImageList.tsx

@@ -1,24 +1,73 @@
 import React from 'react';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Tooltip, Modal } from 'antd';
+import { Button, Tooltip, Modal, message } from 'antd';
 import { ImageSelection } from './ImageSelection';
 import { DiagnosticReportImageViewer } from './DiagnosticReportImageViewer';
 import { useAppSelector, useAppDispatch } from '@/states/store';
 import { removeImage } from '@/states/patient/DiagnosticReport/imageListSlice';
+import { setCandidates, cancelSelection } from '@/states/patient/DiagnosticReport/imageSelectionSlice';
+import { fetchTaskDetails } from '@/API/patient/workActions';
+import { getExposedImageUrl } from '@/API/bodyPosition';
 
 export const ImageList: React.FC = () => {
   const [isModalVisible, setIsModalVisible] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
   const images = useAppSelector((s) => s.imageList.images);
+  const studyId = useAppSelector((s) => s.baseInfo.studyId);
   const dispatch = useAppDispatch();
 
+  // 获取候选图像数据
+  const handleOpenModal = async () => {
+    if (!studyId) {
+      message.warning('未找到检查信息，请先选择患者');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const studyDetails = await fetchTaskDetails(studyId);
+
+      // 提取所有曝光图像的缩略图 URL
+      const imageUrls: string[] = [];
+      studyDetails.series.forEach(series => {
+        series.images.forEach(image => {
+          if (image.expose_status === 'Exposed') {
+            const thumbnailUrl = getExposedImageUrl(image.sop_instance_uid);
+            imageUrls.push(thumbnailUrl);
+          }
+        });
+      });
+
+      if (imageUrls.length === 0) {
+        message.info('该检查暂无曝光图像');
+        return;
+      }
+
+      dispatch(setCandidates(imageUrls));
+      setIsModalVisible(true);
+    } catch (error) {
+      console.error('获取检查图像失败:', error);
+      message.error('获取图像失败，请稍后重试');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 关闭 Modal
+  const handleModalClose = () => {
+    setIsModalVisible(false);
+    dispatch(cancelSelection());
+  };
+
   return (
     <div>
       <div className="flex items-center gap-2 overflow-x-auto">
-        <Tooltip title="Upload Images">
+        <Tooltip title="添加图像">
           <Button
             className="w-24 h-24 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-blue-500"
             icon={<PlusOutlined className="text-gray-400" />}
-            onClick={() => setIsModalVisible(true)}
+            onClick={handleOpenModal}
+            loading={isLoading}
           ></Button>
         </Tooltip>
         {images.map((src, idx) => (
@@ -30,12 +79,12 @@ export const ImageList: React.FC = () => {
         ))}
       </div>
       <Modal
-        title="Select Images"
+        title="选择图像"
         open={isModalVisible}
-        onCancel={() => setIsModalVisible(false)}
+        onCancel={handleModalClose}
         footer={null}
       >
-        <ImageSelection />
+        <ImageSelection onClose={handleModalClose} />
       </Modal>
     </div>
   );

src/pages/patient/DiagnosticReport/components/ImageSelection.tsx

@@ -6,12 +6,35 @@ import {
   confirmSelection,
   cancelSelection,
 } from '@/states/patient/DiagnosticReport/imageSelectionSlice';
+import { addImage } from '@/states/patient/DiagnosticReport/imageListSlice';
 
-export const ImageSelection: React.FC = () => {
+interface ImageSelectionProps {
+  onClose?: () => void;
+}
+
+export const ImageSelection: React.FC<ImageSelectionProps> = ({ onClose }) => {
   const images = useAppSelector((s) => s.imageSelection.candidates);
   const selected = useAppSelector((s) => s.imageSelection.selected);
   const dispatch = useAppDispatch();
 
+  // 确认选择
+  const handleConfirm = () => {
+    // 将选中的图像添加到报告图像列表
+    selected.forEach(imageUrl => {
+      dispatch(addImage(imageUrl));
+    });
+
+    // 清空选择状态并关闭 Modal
+    dispatch(confirmSelection());
+    onClose?.();
+  };
+
+  // 取消选择
+  const handleCancel = () => {
+    dispatch(cancelSelection());
+    onClose?.();
+  };
+
   return (
     <div className="flex flex-col gap-3">
       {/* 图像卡片区域 */}
@@ -36,8 +59,8 @@ export const ImageSelection: React.FC = () => {
 
       {/* 按钮行 */}
       <Row justify="end" gutter={8}>
-        <Button onClick={() => dispatch(cancelSelection())}>取消</Button>
-        <Button type="primary" onClick={() => dispatch(confirmSelection())}>
+        <Button onClick={handleCancel}>取消</Button>
+        <Button type="primary" onClick={handleConfirm}>
           确定
         </Button>
       </Row>

src/pages/patient/DiagnosticReport/index.tsx

@@ -1,17 +1,37 @@
 import React from 'react';
-import { useAppDispatch } from '@/states/store';
+import { useAppDispatch, useAppSelector } from '@/states/store';
 import { ReportHeader } from './components/ReportHeader';
 import { ReportMain } from './components/ReportMain';
 import { ReportFooter } from './components/ReportFooter';
 import PdfPreviewModal from '@/states/patient/DiagnosticReport/PdfPreviewModal';
+import { updateField } from '@/states/patient/DiagnosticReport/baseInfoSlice';
 
 const DiagnosticReport: React.FC = () => {
   const dispatch = useAppDispatch();
+  const currentWork = useAppSelector((state) => state.diagnosticReport.currentWork);
   const reportData = {}; // Define reportData here or fetch it from state or props
 
+  // 初始化报告数据
   React.useEffect(() => {
-    // dispatch(resetReport());
-  }, [dispatch]);
+    if (currentWork) {
+      // 初始化 baseInfo slice
+      dispatch(updateField({ key: 'studyId', value: currentWork.StudyID }));
+      dispatch(updateField({ key: 'patientName', value: currentWork.PatientName || currentWork.DisplayPatientName }));
+      dispatch(updateField({ key: 'patientNo', value: currentWork.PatientID }));
+      dispatch(updateField({ key: 'examTime', value: currentWork.StudyStartDatetime || '' }));
+      dispatch(updateField({ key: 'examDesc', value: currentWork.StudyDescription }));
+      dispatch(updateField({ key: 'age', value: currentWork.PatientAge }));
+      dispatch(updateField({ key: 'gender', value: currentWork.PatientSex === 'M' ? '男' : '女' }));
+      // 暂时注释掉没有的字段，后续根据实际需要添加
+      // dispatch(updateField({ key: 'department', value: currentWork.department || '' }));
+      // dispatch(updateField({ key: 'examPosition', value: currentWork.body_part || '' }));
+
+      // 初始化动物信息（如果适用）
+      if (currentWork.owner_name) {
+        // 这里可以添加动物信息的初始化
+      }
+    }
+  }, [currentWork, dispatch]);
 
   return (
     <div className="flex flex-col h-full">

src/pages/patient/components/ActionPanel.tsx

@@ -156,7 +156,25 @@ const ActionPanel: React.FC = () => {
   };
 
   const handleShowReport = () => {
-    dispatch(setVisible(true));
+    const selectedIds = getSelectedWorkIds();
+
+    if (selectedIds.length === 0) {
+      message.warning('请先选择一个检查项目');
+      return;
+    }
+
+    if (selectedIds.length > 1) {
+      message.warning('只能为一个检查项目创建报告');
+      return;
+    }
+
+    const selectedWork = getSelectedWorks();
+    if (!selectedWork) {
+      message.error('找不到选中的检查数据');
+      return;
+    }
+
+    dispatch(setVisible({ visible: true, work: selectedWork }));
   };
 
   const getWorksFromWorklistOrHistory = () => {

src/states/patient/DiagnosticReport/previewReportThunk.ts

@@ -16,6 +16,15 @@ export const previewReportThunk = createAsyncThunk(
     const state = getState() as RootState;
     const productName = state.product.productName;
 
+    // 提取图像文件名
+    const extractImageFilename = (url: string): string => {
+      // 从 URL 中提取文件名部分
+      const urlParts = url.split('/');
+      return urlParts[urlParts.length - 1]; // 获取最后一部分
+    };
+
+    const images = state.imageList.images.map(extractImageFilename);
+
     const report = productName === 'VETDROS'
       ? {
           headers: {
@@ -31,6 +40,7 @@ export const previewReportThunk = createAsyncThunk(
           impression: state.diagnosis.diagnosisDescription,
           radiologist: state.animalBaseInfo.radiologist,
           review_physician: state.animalBaseInfo.reviewPhysician,
+          images: images, // 添加图像列表
         }
       : {
           headers: {
@@ -48,6 +58,7 @@ export const previewReportThunk = createAsyncThunk(
           impression: state.diagnosis.diagnosisDescription,
           radiologist: state.baseInfo.radiologist,
           review_physician: state.baseInfo.reviewPhysician,
+          images: images, // 添加图像列表
         };
 
     const response = await previewDiagnosisReport(report);

src/states/patient/DiagnosticReport/saveReportThunk.ts

@@ -10,6 +10,15 @@ export const saveReportThunk = createAsyncThunk(
     const studyId = state.baseInfo.studyId;
     const productName = state.product.productName;
 
+    // 提取图像文件名
+    const extractImageFilename = (url: string): string => {
+      // 从 URL 中提取文件名部分
+      const urlParts = url.split('/');
+      return urlParts[urlParts.length - 1]; // 获取最后一部分
+    };
+
+    const images = state.imageList.images.map(extractImageFilename);
+
     const report =
       productName === 'VETDROS'
         ? {
@@ -26,6 +35,7 @@ export const saveReportThunk = createAsyncThunk(
             impression: state.diagnosis.diagnosisDescription,
             radiologist: state.animalBaseInfo.radiologist,
             review_physician: state.animalBaseInfo.reviewPhysician,
+            images: images, // 添加图像列表
           }
         : {
             headers: {
@@ -43,6 +53,7 @@ export const saveReportThunk = createAsyncThunk(
             impression: state.diagnosis.diagnosisDescription,
             radiologist: state.baseInfo.radiologist,
             review_physician: state.baseInfo.reviewPhysician,
+            images: images, // 添加图像列表
           };
 
     const response = await saveDiagnosisReport(studyId, report);

src/states/patient/DiagnosticReport/slice.ts

@@ -1,6 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { saveReportThunk } from './saveReportThunk';
 import { previewReportThunk } from './previewReportThunk';
+import { Task } from '@/domain/work';
 
 interface DiagnosticReportState {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -12,6 +13,7 @@ interface DiagnosticReportState {
   isFinished: boolean;
   visible: boolean;
   needsPreview: boolean;
+  currentWork: Task | null; // 当前选中的工作
 }
 
 const initialState: DiagnosticReportState = {
@@ -22,6 +24,7 @@ const initialState: DiagnosticReportState = {
   isFinished: false,
   visible: false,
   needsPreview: false,
+  currentWork: null,
 };
 
 const diagnosticReportSlice = createSlice({
@@ -31,8 +34,15 @@ const diagnosticReportSlice = createSlice({
     finishReport(state) {
       state.isFinished = true;
     },
-    setVisible(state, action: PayloadAction<boolean>) {
-      state.visible = action.payload;
+    setVisible(state, action: PayloadAction<boolean | { visible: boolean; work?: Task }>) {
+      if (typeof action.payload === 'boolean') {
+        state.visible = action.payload;
+      } else {
+        state.visible = action.payload.visible;
+        if (action.payload.work) {
+          state.currentWork = action.payload.work;
+        }
+      }
     },
     toggleVisible(state) {
       state.visible = !state.visible;