注册页面，用户点击协议列表中的协议后，在已选列表中添加对应的体位

src/API/patient/viewActions.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-interface View {
+export interface View {
   internal_id: string;
   view_id: string;
   view_name: string;
@@ -40,7 +40,7 @@ export const fetchViews = async (
   patient_type: string | null,
   body_part: string | null,
   is_enabled: boolean,
-  procedure_id: string | null
+  procedure_id: string | null | undefined
 ): Promise<FetchViewsResponse> => {
   const response = await axios.get('/dr/api/v1/auth/protocol/view', {
     //todo get header info

src/pages/patient/components/ProcedureCard.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import { Card } from 'antd';
 import { useDispatch } from 'react-redux';
-import { addProtocolViews } from '../../../states/patient/viewSelection';
+import { fetchViewsByProcedureId } from '../../../states/patient/viewSelection';
 import type { Procedure } from '../../../states/patient/viewSelection';
 import type { CardProps } from 'antd';
+import { AppDispatch } from '@/states/store';
 
 interface ProcedureCardProps extends CardProps {
   procedure: Procedure;
 }
 
 const ProcedureCard: React.FC<ProcedureCardProps> = ({ procedure, style }) => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   const handleClick = () => {
-    dispatch(addProtocolViews(procedure));
+    dispatch(fetchViewsByProcedureId(procedure.procedure_id));
   };
 
   return (

src/states/patient/viewSelection/index.ts

@@ -8,34 +8,34 @@ import {
 } from '@/states/patient/register/SelectionTypeSlice';
 import { setCurrentBodyPart } from '../../bodyPartSlice';
 import { fetchProcedures, Procedure } from '@/API/patient/procedureActions';
-import { fetchViews } from '@/API/patient/viewActions';
-export type { Procedure };
+import { fetchViews, View } from '@/API/patient/viewActions';
+export type { Procedure, View };
 
 // 体位类型
-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 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 {
@@ -76,54 +76,7 @@ interface ViewSelectionState {
 
 const initialState: ViewSelectionState = {
   selectedViews: [],
-  availableViews: [
-    {
-      internal_id: '1',
-      view_id: 'AP',
-      view_name: 'Anteroposterior',
-      view_name_local: '前后位',
-      view_other_name: 'AP View',
-      view_description: '前后体位描述',
-      view_position: 'Standing',
-      application: 'General',
-      anatomic_region: 'Chest',
-      patient_type: 'Adult',
-      body_part_id: 'CHEST',
-      view_icon_name: 'ap_icon.png',
-      view_big_icon_name: 'ap_big_icon.png',
-      view_coach_name: 'ap_coach.png',
-      modality: 'X-Ray',
-      tech_template: 'default',
-      img_proc_template: 'default',
-      sort: 1,
-      is_enabled: true,
-      product: 'Standard',
-      is_pre_install: true,
-    },
-    {
-      internal_id: '2',
-      view_id: 'LAT',
-      view_name: 'Lateral',
-      view_name_local: '侧位',
-      view_other_name: 'LAT View',
-      view_description: '侧体位描述',
-      view_position: 'Standing',
-      application: 'General',
-      anatomic_region: 'Chest',
-      patient_type: 'Adult',
-      body_part_id: 'CHEST',
-      view_icon_name: 'lat_icon.png',
-      view_big_icon_name: 'lat_big_icon.png',
-      view_coach_name: 'lat_coach.png',
-      modality: 'X-Ray',
-      tech_template: 'default',
-      img_proc_template: 'default',
-      sort: 2,
-      is_enabled: true,
-      product: 'Standard',
-      is_pre_install: true,
-    },
-  ],
+  availableViews: [],
   protocols: [],
   currentBodyPart: null,
   currentPatientType: null,
@@ -134,6 +87,7 @@ export interface FilterCondition {
   selection: string;
   patientType: string | null;
   bodyPart: string | null;
+  procedureId?: string | null;
 }
 
 export const fetchViewsOrProtocols = createAsyncThunk(
@@ -155,7 +109,7 @@ export const fetchViewsOrProtocols = createAsyncThunk(
           filter.patientType,
           filter.bodyPart,
           true,
-          null
+          filter.procedureId
         );
         return response.data.view_list;
       }
@@ -165,6 +119,18 @@ export const fetchViewsOrProtocols = createAsyncThunk(
   }
 );
 
+export const fetchViewsByProcedureId = createAsyncThunk(
+  'data/fetchViewsByProcedureId',
+  async (procedureId: string, { rejectWithValue }) => {
+    try {
+      const response = await fetchViews(null, null, true, procedureId);
+      return response.data.view_list;
+    } catch (error) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
+
 const viewSelectionSlice = createSlice({
   name: 'viewSelection',
   initialState,
@@ -235,6 +201,22 @@ const viewSelectionSlice = createSlice({
       // eslint-disable-next-line
       .addCase(fetchViewsOrProtocols.rejected, (state, action) => {
         console.log(`查询view或者protocals： rejected`);
+      })
+      // eslint-disable-next-line
+      .addCase(fetchViewsByProcedureId.pending, (state) => {
+        console.log('Fetching views by procedure ID: pending');
+      })
+      .addCase(fetchViewsByProcedureId.fulfilled, (state, action) => {
+        state.selectedViews = [...state.selectedViews, ...action.payload];
+        console.log(
+          `Fetching views by procedure ID: fulfilled ${JSON.stringify(state.availableViews)}`
+        );
+      })
+
+      .addCase(fetchViewsByProcedureId.rejected, (state, action) => {
+        console.log(
+          `Fetching views by procedure ID: rejected ${action.error.message}`
+        );
       });
   },
 });