添加激活状态判断

src/assets/icon_cross_gray.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3571 11L22 19.6429L19.6429 22L11 13.3571L2.35714 22L0 19.6429L8.64286 11L1.40497e-06 2.35714L2.35714 0L11 8.64286L19.6429 0L22 2.35714L13.3571 11Z" fill="#999999"/>
+</svg>

src/pages/Index/Regular/TestTube.vue

@@ -12,8 +12,9 @@
           :index="index"
           :projects="projectsAvailable"
           :bloodTypes="bloodTypes"
-          @delete:rack="deleteHandle"
-          @clickTubeItem="updateTubeSettingsHandler"
+          @delete:rack="deleteTubeRack"
+          @active:rack="handleActivateChange"
+          @clickTubeItem="updateTubeSettings"
         />
       </div>
       <!-- 添加试管架按钮 -->
@@ -31,8 +32,8 @@
           <div v-for="proj in projectsAvailable" :key="proj.projName">
             <div
               class="project-item"
-              :class="{ active: isElemActive(proj) }"
-              :style="elemStyle(proj)"
+              :class="{ active: isProjElemActive(proj) }"
+              :style="styleOfProjElem(proj)"
               @click="clickProjectItem(proj)"
             >
               <span class="proj-name">{{ proj.projName }}</span>
@@ -72,7 +73,8 @@ import {
   deleteTube,
   updateTubeConfig,
   getBloodTypes,
-} from '../../../services/Index/Test-tube/test-tube'
+  updateTubeActivationStatus,
+} from '../../../services/Index/testTube'
 // import type { DataItem, TubeSetting } from '../../../types/Index/index'
 // import { ConsumableGroupBase } from '../../../websocket/socket'
 import {
@@ -106,12 +108,12 @@ onMounted(() => {
 const onClickTubeItem = (rackIdx, tubeIdx) => {
   console.log(rackIdx, tubeIdx)
 }
-const isElemActive = (proj) => {
+const isProjElemActive = (proj) => {
   return selectedProjIds.value.includes(proj.projId)
 }
 
-const elemStyle = (proj) => {
-  const active = isElemActive(proj)
+const styleOfProjElem = (proj) => {
+  const active = isProjElemActive(proj)
   if (active) {
     return {
       border: 'solid 1px #FFF',
@@ -220,7 +222,6 @@ const getTubeData = async () => {
   }
   loading.value = false
 }
-const selectedProject = ref(null)
 
 //编辑患者信息
 const handleChangeUser = async (uuid) => {
@@ -231,15 +232,22 @@ const handleChangeUser = async (uuid) => {
   )
   if (!selectedTube) return
   testTubeStore.setTubeInfo(selectedTube)
-  await updateTubeSettingsHandler()
+  await updateTubeSettings()
   router.push({
     path: '/index/change-user',
   })
 }
 
 //删除试管架
-const deleteHandle = async (idx) => {
+const deleteTubeRack = async (idx) => {
   const rack = tubeRacks.value[idx]
+  if (rack.state !== 'INACTIVE') {
+    ElMessage({
+      message: '试管架处理激活状态，不可删除',
+      type: 'error',
+    })
+    return
+  }
   const res = await deleteTube(rack.uuid)
   if (res.success) {
     tubeRacks.value = tubeRacks.value.filter((v, i) => i !== idx)
@@ -272,106 +280,48 @@ const addTubeRack = async () => {
 }
 
 // 处理试管架激活状态变化
-const handleActivateChange = (update) => {
-  //: { uuid: string; active: boolean }
-  const rack = tubeRacks.value.find((t) => t.uuid === update.uuid)
-  if (rack) {
-    rack.active = update.active
-  }
-}
-const handleSampleUpdate = async ({
-  projectIds, // number[]
-  bloodType, // string
-}) => {
-  // Promise<void>
-  if (selectedSampleIdsInParent.value.length > 0) {
-    // 创建 tubeRacks 的深拷贝
-    const updatedTubeRacks = JSON.parse(JSON.stringify(tubeRacks.value))
-    // 找到对应的 tubeRack
-    const targetTubeRack = updatedTubeRacks.find(
-      // t: DataItem
-      (t) => t.uuid === UUID.value,
-    )
-    if (targetTubeRack) {
-      targetTubeRack.tubeSettings = targetTubeRack.tubeSettings.map(
-        //tube; TubeSetting
-        (tube) => {
-          if (selectedSampleIdsInParent.value.includes(tube.tubeIndex)) {
-            return {
-              ...tube,
-              projId: [...projectIds],
-              bloodType: bloodType,
-            }
-          }
-          return tube
-        },
-      )
-
-      // 清空数组再重新赋值，确保响应式更新
-      tubeRacks.value = []
-      await nextTick()
-      tubeRacks.value = updatedTubeRacks // 新赋值触发响应式
-      console.log(
-        '🚀 ~ handleSampleUpdate ~ updatedTubeRacks:',
-        updatedTubeRacks,
-      )
-      const selectedTube = updatedTubeRacks.find((t) => t.uuid === UUID.value)
-      console.log('🚀 ~ handleSampleUpdate ~ selectedTube:', selectedTube)
-      testTubeStore.setTubeInfo(selectedTube)
-      console.log(
-        '🚀 ~ handleSampleUpdate ~ testTubeStore.$state.tubeInfo:',
-        testTubeStore.$state.tubeInfo,
-      )
-      selectedProject.value = null // 选择后清空选中状态
-      await nextTick()
-
+const handleActivateChange = async (index) => {
+  const rack = tubeRacks.value[index]
+  if (rack.state === 'LOCKED') {
     ElMessage({
-        message: '样本信息已更新',
-        type: 'success',
-        duration: 2000,
+      message: '试管已锁定，不能修改',
+      type: 'error',
     })
+    return
   }
-  } else {
-    ElMessage({
-      message: '请先选择样本后再选择项目',
-      type: 'warning',
-      duration: 2000,
+  let destState = rack.state === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE'
+  const res = await updateTubeActivationStatus({
+    uuid: rack.uuid,
+    active: destState === 'ACTIVE',
   })
+  if (res.success) {
+    tubeRacks.value = tubeRacks.value.map((rack, idx) => {
+      if (idx === index) {
+        rack.state = destState
       }
-}
-
-// 当前选中的样本ID列表
-const selectedSampleIdsInParent = ref([]) //<number[]>
-
-const showProjectSelector = ref(false)
-
-// 父组件代码
-const handleUpdateSelectedSamples = ({
-  sampleIds, //number[]
-  uuid,
-}) => {
-  // 更新特定试管架的选中状态
-  const tubeRack = tubeRacks.value.find((tube) => tube.uuid === uuid)
-  if (tubeRack) {
-    // 如果是取消选中（sampleIds为空），则关闭弹窗并清空状态
-    if (sampleIds.length === 0) {
-      showProjectSelector.value = false
-      selectedSampleIdsInParent.value = []
+      return rack
+    })
   } else {
-      selectedSampleIdsInParent.value = sampleIds
-
-      showProjectSelector.value = true
-    }
+    ElMessage({
+      message: '更改激活状态失败',
+      type: 'error',
+    })
   }
 }
 
-// 添加更新试管设置的方法
-const updateTubeSettingsHandler = async (rackIdx, tubeIdx) => {
+const updateTubeSettings = async (rackIdx, tubeIdx) => {
   if (!selectedBloodTypeKey.value) {
     ElMessage.error('请选择血液类型')
     return
   }
   const rack = tubeRacks.value[rackIdx]
+  if (rack.state !== 'INACTIVE') {
+    ElMessage({
+      message: '试管架已激活，不能修改',
+      type: 'error',
+    })
+    return
+  }
   if (tubeIdx < rack.tubeSettings.length) {
     const setting = rack.tubeSettings[tubeIdx]
     const updSetting = {

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

@@ -1,9 +1,13 @@
 <template>
-  <div class="test-tube-rack">
+  <div class="test-tube-rack" :class="{ locked: tubeRack.state === 'LOCKED' }">
     <!--状态-->
-    <div class="tube-rack-state">
+    <div class="tube-rack-state" @click="$emit('active:rack', index)">
       <div class="status-icon">
-        <img src="@/assets/Vector.svg" alt="Status Icon" v-if="tubeRack.state==='INACTIVE'" />
+        <img
+          src="@/assets/Vector.svg"
+          alt="Status Icon"
+          v-if="tubeRack.state === 'INACTIVE'"
+        />
         <img src="@/assets/Active-Vector.svg" alt="Status Icon" v-else />
       </div>
     </div>
@@ -11,15 +15,29 @@
     <!--试管区-->
     <section class="tube-list">
       <div v-for="(tube, idx) in tubeRack.tubeSettings">
-        <Tube :tube="tube" :index="idx" :projects="projects" :bloodTypes="bloodTypes" @clickTubeItem="onClickTubeItem" />
+        <Tube
+          :tube="tube"
+          :index="idx"
+          :projects="projects"
+          :bloodTypes="bloodTypes"
+          @clickTubeItem="onClickTubeItem"
+        />
       </div>
     </section>
   </div>
-  <div class="test-tube-rack-op">
-    <div class="rack-op">修改试管架</div>
+  <div
+    class="test-tube-rack-op"
+    :class="{ active: tubeRack.state !== 'INACTIVE' }"
+  >
+    <div class="rack-op rack-edit">修改试管架</div>
     <div class="rack-op">编辑患者信息</div>
     <div class="rack-op rack-del" @click="$emit('delete:rack', index)">
-      <img src="@/assets/icon_cross.svg" alt="del" />
+      <img
+        v-if="tubeRack.state === 'INACTIVE'"
+        src="@/assets/icon_cross.svg"
+        alt="del"
+      />
+      <img v-else src="@/assets/icon_cross_gray.svg" alt="del" />
       <span>删除试管架</span>
     </div>
   </div>
@@ -28,7 +46,7 @@
 <script setup>
 import Tube from './Tube.vue'
 const props = defineProps(['tubeRack', 'index', 'projects', 'bloodTypes'])
-const emit = defineEmits(['delete:rack', 'clickTubeItem'])
+const emit = defineEmits(['delete:rack', 'active:rack', 'clickTubeItem'])
 
 const onClickTubeItem = (idx) => {
   emit('clickTubeItem', props.index, idx)
@@ -41,9 +59,15 @@ const onClickTubeItem = (idx) => {
   height: 150px;
   display: flex;
   align-items: center;
-
+  &.locked {
+    background-color: #C8C8C8;
+  }
   .tube-rack-state {
+    align-self: stretch;
     width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     .status-icon img {
       width: 56px;
     }
@@ -73,9 +97,20 @@ const onClickTubeItem = (idx) => {
 
   font-size: 22px;
   font-weight: 600;
+  &.active {
+    color: #999;
+    .rack-op {
+      &.rack-del {
+        color: #999;
+      }
+    }
+  }
   .rack-op {
     align-self: stretch;
     line-height: @op-bar-height;
+    &.rack-edit {
+      color: #999;
+    }
     &.rack-del {
       display: flex;
       align-items: center;

src/services/Index/index.ts

@@ -1,7 +1,7 @@
 export * from './regular'
 export * from './emergency'
 export * from './history'
-export * from './Test-tube/test-tube'
+export * from './testTube'
 export * from './user-manage'
 export * from './idCard'
 export * from './init'

src/services/Index/Test-tube/test-tube.ts → src/services/Index/testTube.ts

@@ -1,5 +1,5 @@
-import apiClient from '../../../utils/axios'
-import type { TubeActivationStatus, TubeSetting } from '../../../types/Index'
+import apiClient from '../../utils/axios'
+import type { TubeActivationStatus, TubeSetting } from '../../types/Index'
 /* 
 "data": [
   {
@@ -88,7 +88,8 @@ export const updateTubeActivationStatus = async (
   try {
     const res = await apiClient.post(
       '/api/v1/app/appTubeSettingMgr/updateActiveState',
-      data,
+      null,
+      { params: data },
     )
     return res.data
   } catch (error) {