fix : 同时删除多个已选择体位的问题和调试控制台显示同key警告的问题

Fixes #9 Fixes10

src/pages/patient/components/register.selected.view.list.tsx

@@ -6,7 +6,7 @@ import { Image } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import { useSelector, useDispatch } from 'react-redux';
 import type { RootState } from '@/states/store';
-import type { View } from '@/states/patient/viewSelection';
+import type { ExtendedView } from '@/states/patient/viewSelection';
 import { removeSelectedView } from '@/states/patient/viewSelection';
 
 const { useBreakpoint } = Grid;
@@ -42,9 +42,9 @@ const SelectedProtocolList: React.FC<SelectedProtocolListProps> = () => {
 
   return (
     <Row className="h-full overflow-auto">
-      {selectedViews.map((item: View) => (
+      {selectedViews.map((item: ExtendedView) => (
         <Card
-          key={item.internal_id}
+          key={item.guid}
           hoverable
           style={{
             width: cardSize.width,
@@ -67,7 +67,7 @@ const SelectedProtocolList: React.FC<SelectedProtocolListProps> = () => {
             type="text"
             size="small"
             icon={<CloseOutlined />}
-            onClick={() => handleRemove(item.view_id)}
+            onClick={() => handleRemove(item.guid)}
             style={{
               position: 'absolute',
               top: 2,

src/states/patient/viewSelection/index.ts

@@ -10,63 +10,16 @@ import { setCurrentBodyPart } from '../../bodyPartSlice';
 import { fetchProcedures, Procedure } from '@/API/patient/procedureActions';
 import { fetchViews, View } from '@/API/patient/viewActions';
 export type { Procedure, View };
+import { v4 as uuidv4 } from 'uuid';
 
 // 体位类型
-// export interface View {
-//   internal_id: string;
-//   view_id: string;
-//   view_name: string;
-//   view_name_local: string;
-//   view_other_name: string;
-//   view_description: string;
-//   view_position: string;
-//   application: string;
-//   anatomic_region: string;
-//   patient_type: string;
-//   body_part_id: string;
-//   view_icon_name: string;
-//   view_big_icon_name: string;
-//   view_coach_name: string;
-//   modality: string;
-//   // config_object: any;
-//   tech_template: string;
-//   img_proc_template: string;
-//   sort: number;
-//   is_enabled: boolean;
-//   product: string;
-//   is_pre_install: boolean;
-// }
 
-// 协议类型
-// export interface Procedure {
-//   ProcedureID: string;
-//   ProcedureCode: string;
-//   ProcedureName: string;
-//   ProcedureOtherName: string;
-//   ProcedureDescription: string;
-//   PatientType: string;
-//   ProcedureGroupID: string;
-//   ProcedureType: string;
-//   FastSearch: boolean;
-//   Enable: boolean;
-//   Order: number;
-//   UserGroupID: string;
-//   ProcedureCategory: string;
-//   Modality: string;
-//   IsImplanted: boolean;
-//   MagFactor: number;
-//   // ProcedureViews: View[];
-//   // ProcedureViewRelations: any[];
-//   ClinicProtocol: boolean;
-//   IsFactoryDefault: boolean;
-//   MinBMI: number;
-//   MaxBMI: number;
-//   AutoDecompression: boolean;
-//   ConfigObjectValue: string;
-// }
+export interface ExtendedView extends View {
+  guid: string; //用于前端唯一标识，用于渲染列表时的key，用于删除操作时的指定key查询
+}
 
 interface ViewSelectionState {
-  selectedViews: View[]; // 已选择体位列表
+  selectedViews: ExtendedView[]; // 已选择体位列表
   availableViews: View[]; // 待选择体位列表
   protocols: Procedure[]; // 协议列表（只会出现在待选择列表）
   currentBodyPart: BodyPart | null;
@@ -137,7 +90,8 @@ const viewSelectionSlice = createSlice({
   reducers: {
     // 添加体位到已选择体位列表
     addSelectedView(state, action: PayloadAction<View>) {
-      state.selectedViews.push(action.payload);
+      const uuid = uuidv4();
+      state.selectedViews.push({ ...action.payload, guid: uuid });
     },
     // 添加协议中的所有体位到已选择体位列表
     // eslint-disable-next-line
@@ -157,7 +111,7 @@ const viewSelectionSlice = createSlice({
     },
     removeSelectedView(state, action: PayloadAction<string>) {
       state.selectedViews = state.selectedViews.filter(
-        (view) => view.view_id !== action.payload
+        (view) => view.guid !== action.payload
       );
     },
   },
@@ -213,11 +167,18 @@ const viewSelectionSlice = createSlice({
       })
       .addCase(fetchViewsByProcedureId.fulfilled, (state, action) => {
         const procedureId = action.meta.arg;
+        //1、得到procedureId下的所有views
         const views = action.payload.map((view) => ({
           ...view,
           procedure_id: procedureId,
         }));
-        state.selectedViews = [...state.selectedViews, ...views];
+        //2、为每个view添加一个唯一的guid
+        const extendedViews = views.map((view) => ({
+          ...view,
+          guid: uuidv4(), // 为每个视图生成一个唯一的guid
+        }));
+        //3、将这些views添加到selectedViews中
+        state.selectedViews = [...extendedViews];
         console.log(
           `Fetching views by procedure ID: fulfilled ${JSON.stringify(state.availableViews)}`
         );