feat(patient-register): trigger query for available positions or protocols when body part is selected in anatomy diagram

src/components/HumanBody.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { message } from 'antd';
 
 // 直接 import 本地图片（推荐写法）
 import Abdomen from '../assets/imgs/VirtualHuman/Abdomen.png';
@@ -25,6 +24,10 @@ import UpperLimb_Left_dow from '../assets/imgs/VirtualHuman/UpperLimb_Left_dow.p
 
 import UpperLimb_Right from '../assets/imgs/VirtualHuman/UpperLimb_Right.png';
 import UpperLimb_Right_dow from '../assets/imgs/VirtualHuman/UpperLimb_Right_dow.png';
+import { AppDispatch, RootState } from '@/states/store';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchViewsOrProtocols } from '@/states/patient/viewSelection';
+import { setCurrentBodyPart } from '@/states/bodyPartSlice';
 
 // import VirtualHuman from "../assets/imgs/VirtualHuman/VirtualHuman.png";
 // import VirtualHuman_dow from "../assets/imgs/VirtualHuman/VirtualHuman_dow.png";
@@ -52,6 +55,7 @@ const bodyParts = {
       height: '93px',
       zIndex: 2,
     },
+    serverName: 'Human_SKULL', //服务端认识的名字
   },
   Thorax: {
     normal: Thorax,
@@ -63,6 +67,7 @@ const bodyParts = {
       height: '148px',
       zIndex: 1,
     },
+    serverName: 'Human_THORAX', //服务端认识的名字
   },
   Abdomen: {
     normal: Abdomen,
@@ -74,6 +79,7 @@ const bodyParts = {
       height: '116px',
       zIndex: 1,
     },
+    serverName: 'Human_ABDOMEN', //服务端认识的名字
   },
   Spine: {
     normal: Spine,
@@ -85,6 +91,7 @@ const bodyParts = {
       height: '264px',
       zIndex: 1,
     },
+    serverName: 'Human_SPINE', //服务端认识的名字
   },
   UpperLimb_Left: {
     normal: UpperLimb_Left,
@@ -96,6 +103,7 @@ const bodyParts = {
       height: '280px',
       zIndex: 1,
     },
+    serverName: 'Human_UPPER LIMB', //服务端认识的名字
   },
   UpperLimb_Right: {
     normal: UpperLimb_Right,
@@ -107,6 +115,7 @@ const bodyParts = {
       height: '280px',
       zIndex: 1,
     },
+    serverName: 'Human_UPPER LIMB', //服务端认识的名字
   },
   LowerLimb_Left: {
     normal: LowerLimb_Left,
@@ -118,6 +127,7 @@ const bodyParts = {
       height: '337px',
       zIndex: 1,
     },
+    serverName: 'Human_LOWER LIMB', //服务端认识的名字
   },
   LowerLimb_Right: {
     normal: LowerLimb_Right,
@@ -129,15 +139,39 @@ const bodyParts = {
       height: '337px',
       zIndex: 1,
     },
+    serverName: 'Human_LOWER LIMB', //服务端认识的名字
   },
 };
 
 export default function HumanBody() {
   const [activePart, setActivePart] = useState(null);
+  const dispatch = useDispatch<AppDispatch>();
+  const currentPatientType = useSelector(
+    (state: RootState) => state.patientType.current
+  );
+  const bodyPartsState = useSelector(
+    (state: RootState) => state.bodyPart.byPatientType
+  );
+  //选择的是体位还是协议
+  const selected = useSelector((state: RootState) => state.selection.selected);
 
   const handleClick = (part) => {
     setActivePart(part);
-    message.info(`你点击了：${part}`);
+    // 映射表。界面上身体部位与服务定义的身体部位有个映射
+    // message.info(`你点击了：${part}`);
+    const selectedBodyPartId = bodyParts[part].serverName;
+    const selectedBodyPart =
+      bodyPartsState.find((item) => item.body_part_id == selectedBodyPartId) ||
+      null;
+    dispatch(setCurrentBodyPart(selectedBodyPart));
+    // message.info(`得到对应的身体部位的ID：${selectedBodyPartId}`);
+    dispatch(
+      fetchViewsOrProtocols({
+        selection: selected,
+        patientType: currentPatientType?.patient_type_id ?? null,
+        bodyPart: selectedBodyPartId ?? null,
+      })
+    );
   };
 
   return (