删除试管架前提示确认

src/pages/Index/Regular/TestTube.vue

@@ -60,11 +60,29 @@
         </div>
       </section>
     </div>
+    <el-dialog v-model="deleteRackDialogVisible" title="注意" width="400">
+      <span>存在配置了检测项目的试管，确定删除？</span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="deleteRackDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmDeleteTube">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick, computed, onActivated } from 'vue'
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  computed,
+  onActivated,
+} from 'vue'
 import * as R from 'ramda'
 import { useRouter } from 'vue-router'
 import TestTubeRack from '../components/TestTube/TestTubeRack.vue'
@@ -76,13 +94,13 @@ import {
   getBloodTypes,
   updateTubeActivationStatus,
 } from '../../../services/Index/testTube'
-import { eventBus } from '../../../eventBus';
+import { eventBus } from '../../../eventBus'
 import {
   useConsumablesStore,
   useTestTubeStore,
   useSettingTestTubeStore,
 } from '../../../store'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElDialog } from 'element-plus'
 
 const router = useRouter()
 
@@ -97,6 +115,8 @@ const loading = ref(false) // 控制加载状态
 const selectedProjIds = ref([]) // number[]
 const selectedBloodTypeKey = ref('WHOLE_BLOOD')
 
+const deleteRackDialogVisible = ref(false)
+
 const onTubeSettingUpdate = () => {
   getTubeData()
 }
@@ -108,7 +128,7 @@ onMounted(() => {
 })
 onBeforeUnmount(() => {
   eventBus.off('AppTubeSettingUpdateEvent', onTubeSettingUpdate)
-});
+})
 
 const isProjElemActive = (proj) => {
   return selectedProjIds.value.includes(proj.projId)
@@ -150,8 +170,11 @@ const clickBloodTypeItem = (type) => {
 }
 
 const projectsAvailable = computed(() => {
-  const group = R.groupBy((p) => p.projName, consumables.consumableData.reactionPlateGroup)
-  const pNames = R.keys(group).filter(n => n !== 'null')
+  const group = R.groupBy(
+    (p) => p.projName,
+    consumables.consumableData.reactionPlateGroup,
+  )
+  const pNames = R.keys(group).filter((n) => n !== 'null')
 
   const projArr = pNames.map((n) =>
     R.reduce(
@@ -250,22 +273,19 @@ const handleChangeUser = async (index) => {
 }
 
 const existValidProject = (tubeRack) => {
-  return tubeRack.tubeSettings.some(s => (s.projId || []).length > 0 && !!s.bloodType)
+  return tubeRack.tubeSettings.some(
+    (s) => (s.projId || []).length > 0 && !!s.bloodType,
+  )
 }
 
-//删除试管架
-const deleteTubeRack = async (idx) => {
-  const rack = tubeRacks.value[idx]
-  if (rack.state !== 'INACTIVE') {
-    ElMessage({
-      message: '试管架处理激活状态，不可删除',
-      type: 'error',
-    })
-    return
-  }
-  const res = await deleteTube(rack.uuid)
+let confirmDeleteRackUuid = null
+const confirmDeleteTube = async () => {
+  deleteRackDialogVisible.value = false
+  const res = await deleteTube(confirmDeleteRackUuid)
   if (res.success) {
-    tubeRacks.value = tubeRacks.value.filter((v, i) => i !== idx)
+    tubeRacks.value = tubeRacks.value.filter(
+      (v) => v.uuid !== confirmDeleteRackUuid,
+    )
     ElMessage({
       message: '删除成功',
       type: 'success',
@@ -278,6 +298,24 @@ const deleteTubeRack = async (idx) => {
     })
   }
 }
+
+//删除试管架
+const deleteTubeRack = async (idx) => {
+  const rack = tubeRacks.value[idx]
+  if (rack.state !== 'INACTIVE') {
+    ElMessage({
+      message: '试管架处理激活状态，不可删除',
+      type: 'error',
+    })
+    return
+  }
+  confirmDeleteRackUuid = rack.uuid
+  if (existValidProject(rack)) {
+    deleteRackDialogVisible.value = true
+    return
+  }
+  confirmDeleteTube()
+}
 // 添加新试管架
 const addTubeRack = async () => {
   loading.value = true