Browse Source

注册页面,可选列表过滤区域,当患者类型变化时,身体部位列表跟着变化,显示当前患者类型可用的身体部位

dengdx 2 months ago
parent
commit
b351fd54c8

+ 18 - 5
src/pages/patient/components/RegisterAvailableFilterBar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Row, Col, Select, Segmented } from 'antd';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { setCurrentPatientType } from '@/states/patientTypeSlice';
 import { RootState } from '@/states/store';
 import { PatientType } from '@/API/patientType';
 import { BodyPart } from '@/API/bodyPart';
@@ -21,12 +22,17 @@ const RegisterAvailableFilterBar: React.FC<Props> = ({
   setSelected,
   bodyPart,
   setBodyPart,
-  patientType,
   setPatientType,
   enabled,
   setEnabled,
 }) => {
-  const bodyParts = useSelector((state: RootState) => state.bodyPart.items); // [{ label, value }]
+  const dispatch = useDispatch();
+  const bodyParts: BodyPart[] = useSelector(
+    (state: RootState) => state.bodyPart.byPatientType
+  ); // [{ label, value }]
+  const currentPatientType = useSelector(
+    (state: RootState) => state.patientType.current
+  );
   const patientTypes = useSelector(
     (state: RootState) => state.patientType.items
   ); // [{ label, value }]
@@ -61,6 +67,7 @@ const RegisterAvailableFilterBar: React.FC<Props> = ({
             }))}
             value={bodyPart}
             onChange={setBodyPart}
+            disabled={!currentPatientType}
           />
         </Col>
         <Col xs={24} sm={12} md={6} lg={6} xl={6}>
@@ -72,8 +79,14 @@ const RegisterAvailableFilterBar: React.FC<Props> = ({
               label: item.patient_type_name,
               value: item.patient_type_id,
             }))}
-            value={patientType}
-            onChange={setPatientType}
+            value={currentPatientType?.patient_type_id}
+            onChange={(val) => {
+              setPatientType(val);
+              const selectedPatientType = patientTypes.find(
+                (item) => item.patient_type_id === val
+              );
+              dispatch(setCurrentPatientType(selectedPatientType || null));
+            }}
           />
         </Col>
         <Col xs={24} sm={12} md={6} lg={6} xl={4}>

+ 26 - 1
src/states/bodyPartSlice.ts

@@ -1,17 +1,20 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import { fetchBodyParts, BodyPart, BodyPartParams } from '../API/bodyPart';
 import { AxiosError } from 'axios';
+import { setCurrentPatientType } from './patientTypeSlice';
 
 interface BodyPartState {
   items: BodyPart[];
   loading: boolean;
   error: string | null;
+  byPatientType: BodyPart[];
 }
 
 const initialState: BodyPartState = {
   items: [],
   loading: false,
   error: null,
+  byPatientType: [],
 };
 
 export const getBodyParts = createAsyncThunk(
@@ -43,9 +46,31 @@ export const getBodyParts = createAsyncThunk(
 const bodyPartSlice = createSlice({
   name: 'bodyPart',
   initialState,
-  reducers: {},
+  reducers: {
+    // setBodyPartsByPatientType: (state, action: PayloadAction<{ patientTypeId: string }>) => {
+    //   // state.byPatientType[action.payload.patientTypeId] = action.payload.bodyParts;
+    // },
+  },
   extraReducers: (builder) => {
     builder
+      .addCase(setCurrentPatientType, (state, action) => {
+        console.log(
+          '当前 patient type 变化-- bodyPart接收到信号:',
+          action.payload
+        );
+
+        if (action.payload) {
+          const patientTypeId = action.payload.patient_type_id;
+          console.log(
+            '基于 patient type过滤 bodyPart byPatientType:',
+            patientTypeId
+          );
+          state.byPatientType = state.items.filter(
+            (item) => item.patient_type === patientTypeId
+          );
+          console.log('过滤后的 bodyPart byPatientType:', state.byPatientType);
+        }
+      })
       .addCase(getBodyParts.pending, (state) => {
         state.loading = true;
         state.error = null;

+ 25 - 2
src/states/patientTypeSlice.ts

@@ -1,4 +1,9 @@
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import {
+  createSlice,
+  createAsyncThunk,
+  createAction,
+  PayloadAction,
+} from '@reduxjs/toolkit';
 import {
   fetchPatientTypes,
   PatientType,
@@ -10,14 +15,20 @@ interface PatientTypeState {
   items: PatientType[];
   loading: boolean;
   error: string | null;
+  current: PatientType | null;
 }
 
 const initialState: PatientTypeState = {
   items: [],
   loading: false,
   error: null,
+  current: null,
 };
 
+export const setCurrentPatientType = createAction<PatientType | null>(
+  'patientType/setCurrentPatientType'
+);
+
 export const getPatientTypes = createAsyncThunk(
   'patientType/getPatientTypes',
   async (
@@ -47,7 +58,19 @@ export const getPatientTypes = createAsyncThunk(
 const patientTypeSlice = createSlice({
   name: 'patientType',
   initialState,
-  reducers: {},
+  reducers: {
+    setCurrentPatientType: (
+      state,
+      action: PayloadAction<PatientType | null>
+    ) => {
+      console.log('当前 patient type 变化:', action.payload);
+      state.current = action.payload;
+      if (action.payload) {
+        // const patientTypeId = action.payload.patient_type_id;
+        // setBodyPartsByPatientType(patientTypeId);
+      }
+    },
+  },
   extraReducers: (builder) => {
     builder
       .addCase(getPatientTypes.pending, (state) => {