试管依赖全局数据

src/pages/Index/Regular.vue

@@ -17,8 +17,11 @@ import { createWebSocket } from '../../websocket/socket'
 import { getServerInfo } from '../../utils/getServerInfo'
 import { onMounted, onDeactivated } from 'vue';
 import type { DeviceWorkStateMessage } from '../../websocket/socket';
-import { useDeviceStore } from '../../store/index';
+import { useDeviceStore, useSettingTestTubeStore } from '../../store/index';
+import { getBloodTypes, getProjectInfo } from '@/services/Index/testTube';
 const deviceStore = useDeviceStore()
+const settingTubeStore = useSettingTestTubeStore()
+
 const { wsUrl } = getServerInfo('/api/v1/app/ws/state')
 const ws = createWebSocket(wsUrl)
 //处理设备状态
@@ -26,6 +29,8 @@ const handleDeviceState = (data: DeviceWorkStateMessage['data']) => {
   deviceStore.setDeviceState(data)
 }
 onMounted(() => {
+  getProjectList()
+  getBloodTypeList()
   ws.connect();
   ws.subscribe<DeviceWorkStateMessage>('DeviceWorkState', handleDeviceState);
 });
@@ -35,6 +40,19 @@ onDeactivated(() => {
   console.log('🚀 ~ onBeforeUnmount ~ regular页面销毁:')
 });
 
+const getProjectList = async () => {
+  const res = await getProjectInfo()
+  if (res.success) {
+    settingTubeStore.setSupportedProjects(res.data)
+  }
+}
+const getBloodTypeList = async () => {
+  const res = await getBloodTypes()
+  if (res.success) {
+    settingTubeStore.setBloodTypes(res.data)
+  }
+}
+
 </script>
 
 <style scoped lang="less">

src/pages/Index/components/TestTube/Tube.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tube-item" @click="$emit('clickTubeItem', index)">
+  <div class="tube-item" @click="$emit('clickTubeItem', tube.tubeIndex)">
     <span v-if="!!showNum" class="order">{{ tube.tubeIndex + 1 }}</span>
     <div class="tube-circle" v-if="tube.projId.length === 0">
       <span class="add-symbol">+</span>
@@ -36,28 +36,19 @@
 <script setup>
 import { ref, watch, useTemplateRef, nextTick, computed } from 'vue'
 import * as R from 'ramda'
+import { useSettingTestTubeStore } from '@/store'
 
 /*
 tube: {userid,projId:number[],bloodType}
-projects: [{projId,projName,color}]
-bloodTypes: [{key,name}]
 */
 const props = defineProps({
   tube: {
     type: Object,
   },
-  index: {
-    type: Number,
-  },
-  projects: {
-    type: Array,
-  },
-  bloodTypes: {
-    type: Array,
-  },
   showNum: { type: Boolean, default: true },
 })
 const emit = defineEmits(['clickTubeItem'])
+const settingTubeStore = useSettingTestTubeStore()
 
 const projIdMap = computed(() => {
   return R.reduce(
@@ -66,7 +57,7 @@ const projIdMap = computed(() => {
       return acc
     },
     {},
-    props.projects || [],
+    settingTubeStore.supportedProjects || [],
   )
 })
 const bloodKeyMap = computed(() => {
@@ -76,7 +67,7 @@ const bloodKeyMap = computed(() => {
       return acc
     },
     {},
-    props.bloodTypes || [],
+    settingTubeStore.bloodTypes || [],
   )
 })
 

src/services/Index/testTube.ts

@@ -12,6 +12,10 @@ import type { TubeActivationStatus, TubeSetting } from '../../types/Index'
   }
 ]
 */
+export type BloodTypeItem = {
+  key: "WHOLE_BLOOD" | "SERUM_OR_PLASMA"
+  name: string
+}
 export const getBloodTypes = async () => {
   try {
     const res = await apiClient.post(

src/store/modules/settingTestTube.ts

@@ -1,60 +1,30 @@
+import { BloodTypeItem } from '@/services/Index/testTube'
+import { ProjectInfo } from '@/websocket/socket'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
-interface TubeSetting {
-  tubeIndex: number
-  userid: string
-  sampleBarcode: string
-  projId: number[]
-  bloodType: string
-}
-
-interface TubeConfig {
-  uuid: string
-  setting: TubeSetting
-}
-
-export const useSettingTestTubeStore = defineStore('settingTestTube', () => {
-  const currentConfig = ref<TubeConfig>({
-    uuid: '',
-    setting: {
-      tubeIndex: 0,
-      userid: '',
-      sampleBarcode: '',
-      projId: [],
-      bloodType: ''
-    }
-  })
-
-  // 更新试管设置
-  const updateTubeSetting = (uuid: string, setting: Partial<TubeSetting> & { tubeIndex: number }) => {
-    currentConfig.value = {
-      uuid,
-      setting: {
-        ...currentConfig.value.setting,
-        ...setting
-      }
+// 这个store用来存储相对稳定的数据
+export const useSettingTestTubeStore = defineStore(
+  'settingTestTube',
+  () => {
+    const bloodTypes = ref<BloodTypeItem[] | undefined>(undefined)
+    const setBloodTypes = (items: BloodTypeItem[]) => {
+      bloodTypes.value = items
     }
-  }
-
-  // 清空配置
-  const clearConfig = () => {
-    currentConfig.value = {
-      uuid: '',
-      setting: {
-        tubeIndex: 0,
-        userid: '',
-        sampleBarcode: '',
-        projId: [],
-        bloodType: ''
-      }
+    const supportedProjects = ref<ProjectInfo[] | undefined>(undefined)
+    const setSupportedProjects = (projects: ProjectInfo[]) => {
+      supportedProjects.value = projects
     }
-  }
 
-  return {
-    currentConfig,
-    updateTubeSetting,
-    clearConfig
-  }
-})
+    return {
+      bloodTypes,
+      setBloodTypes,
 
+      supportedProjects,
+      setSupportedProjects,
+    }
+  },
+  {
+    persist: true,
+  },
+)