重构：把逻辑{work转换为ExtenedbodyPostions}放到body postion list slice中，从bodyPositionLIst组件中移除

src/pages/exam/components/BodyPositionList.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { useEffect } from 'react';
 import {
-  setBodyPositions,
   setSelectedBodyPosition,
   ExtendedBodyPosition,
 } from '../../../states/exam/bodyPositionListSlice';
@@ -13,7 +11,6 @@ import AppendViewIcon from '@/assets/imgs/append-view.svg';
 import ImageViewer from './ImageViewer';
 import { getExposedImageUrl, getViewIconUrl } from '../../../API/bodyPosition';
 import { changeBodyPosition } from '@/API/exam/changeBodyPosition';
-import { fetchViewDetail } from '@/API/patient/viewActions';
 
 interface BodyPositionListProps {
   layout: 'horizontal' | 'vertical';
@@ -60,7 +57,6 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
   // const selectedBodyPosition = useSelector(
   //   (state: RootState) => state.bodyPositionList.selectedBodyPosition
   // );
-  const works = useSelector((state: RootState) => state.examWorksCache.works);
 
   const addBodyPositionClick = () => {
     // dispatch(addBodyPosition({
@@ -70,47 +66,6 @@ const BodyPositionList: React.FC<BodyPositionListProps> = ({
     // }));
   };
 
-  useEffect(() => {
-    const fetchBodyPositions = async () => {
-      // alert(
-      //   `${works.length} works found == ${works[0].Views.length} views in the first work`
-      // );
-      console.log(`体位信息：${JSON.stringify(works)}`);
-      const bodyPositions: ExtendedBodyPosition[] = await Promise.all(
-        works.flatMap((work) =>
-          work.Views.map(async (view) => {
-            const viewDetail = await fetchViewDetail(view.view_id);
-            return {
-              ...viewDetail,
-              // sop_instance_uid: view.sop_instance_uid,
-              collimator_length:
-                viewDetail.config_object.DX.CollimatorSizeLength || 0,
-              collimator_width:
-                viewDetail.config_object.DX.CollimatorSizeWidth || 0,
-              sid: '', //todo 这里还缺少值的来源
-              patient_name: work.PatientName,
-              patient_id: work.PatientID,
-              registration_number: work.AccessionNumber,
-              study_description: work.StudyDescription,
-              body_position_image: viewDetail.view_icon_name,
-              work: work,
-              study_instance_uid: work.StudyInstanceUID,
-              sop_instance_uid: view.PrimarySopUID,
-              dview: view,
-            };
-          })
-        )
-      );
-      dispatch(setBodyPositions(bodyPositions));
-      //选中第一个
-      if (bodyPositions.length > 0) {
-        dispatch(setSelectedBodyPosition(bodyPositions[0]));
-      }
-    };
-    if (!!bodyPositions && bodyPositions.length > 0) return; // 如果已经有体位信息，则不再重新获取
-    fetchBodyPositions();
-  }, [works, dispatch]);
-
   return (
     // 父级是flex，这里是grid，grid的高度需要设置为0，并且flex-grow，这样才能不撑开grid
     <div className={`${layout} grid grid-rows-[1fr_auto] h-0 flex-grow`}>

src/states/exam/bodyPositionListSlice.ts

@@ -1,10 +1,11 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction, Middleware } from '@reduxjs/toolkit';
 import { View as BodyPosition } from '../../API/patient/viewActions';
-import { Work } from './examWorksCacheSlice';
+import { Work, addWork } from './examWorksCacheSlice';
 import { dview } from '@/domain/dview';
 import emitter from '@/utils/eventEmitter';
 import store from '@/states/store';
 import { MqttMessage } from '@/domain/mqttService';
+import { fetchViewDetail } from '@/API/patient/viewActions';
 /**
  * ExtendedBodyPosition即包含体位模块信息，又包含体位实例信息，也包括study（work）信息
  */
@@ -52,6 +53,50 @@ emitter.on('TASK_SUCCESS', (message: MqttMessage) => {
   }
 });
 
+const transformWorksToBodyPositions = async (
+  works: Work[]
+): Promise<ExtendedBodyPosition[]> => {
+  return await Promise.all(
+    works.flatMap((work) =>
+      work.Views.map(async (view) => {
+        const viewDetail = await fetchViewDetail(view.view_id);
+        return {
+          ...viewDetail,
+          collimator_length:
+            viewDetail.config_object.DX.CollimatorSizeLength || 0,
+          collimator_width:
+            viewDetail.config_object.DX.CollimatorSizeWidth || 0,
+          sid: '', // todo 这里还缺少值的来源
+          patient_name: work.PatientName,
+          patient_id: work.PatientID,
+          registration_number: work.AccessionNumber,
+          study_description: work.StudyDescription,
+          body_position_image: viewDetail.view_icon_name,
+          work: work,
+          study_instance_uid: work.StudyInstanceUID,
+          sop_instance_uid: view.PrimarySopUID,
+          dview: view,
+        };
+      })
+    )
+  );
+};
+
+const worksListenerMiddleware: Middleware = (store) => (next) => (action) => {
+  const result = next(action);
+
+  if (addWork.match(action)) {
+    const state = store.getState();
+    const works = state.examWorksCache.works;
+    transformWorksToBodyPositions(works).then((bodyPositions) => {
+      store.dispatch(setBodyPositions(bodyPositions));
+      store.dispatch(setSelectedBodyPosition(bodyPositions[0] || null));
+    });
+  }
+
+  return result;
+};
+
 const bodyPositionListSlice = createSlice({
   name: 'bodyPositionList',
   initialState,
@@ -158,3 +203,4 @@ export const {
   removeBodyPositionBySopInstanceUid,
 } = bodyPositionListSlice.actions;
 export default bodyPositionListSlice.reducer;
+export { worksListenerMiddleware };

src/states/store.ts

@@ -8,7 +8,9 @@ import productReducer from './productSlice';
 import BusinessFlowReducer from './BusinessFlowSlice';
 import systemModeReducer from './systemModeSlice';
 import examWorksCacheReducer from './exam/examWorksCacheSlice';
-import bodyPositionListReducer from './exam/bodyPositionListSlice';
+import bodyPositionListReducer, {
+  worksListenerMiddleware,
+} from './exam/bodyPositionListSlice';
 import bodyPositionDetailReducer from './exam/bodyPositionDetailSlice';
 import aprReducer from './exam/aprSlice';
 import bodyPositionListenerMiddleware from './exam/bodyPositionListener';
@@ -48,6 +50,7 @@ const store = configureStore({
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(
+      worksListenerMiddleware,
       bodyPositionListenerMiddleware,
       aprMiddleware,
       businessFlowMiddleware