From 5d48acb7a7d3d90989ac3822dbeccab7d2953755 Mon Sep 17 00:00:00 2001
From: zhaoyun <zhaoyun@gentronhealth.com>
Date: Wed, 27 May 2026 02:49:28 +0800
Subject: [PATCH] =?UTF-8?q?Fix=20Bug=20#550:=20fallback=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/outpatient/doctor/Examination.vue   | 223 ++++++++++--------
 1 file changed, 126 insertions(+), 97 deletions(-)

diff --git a/openhis-ui-vue3/src/views/outpatient/doctor/Examination.vue b/openhis-ui-vue3/src/views/outpatient/doctor/Examination.vue
index 736bcbb7c..31627b0e4 100644
--- a/openhis-ui-vue3/src/views/outpatient/doctor/Examination.vue
+++ b/openhis-ui-vue3/src/views/outpatient/doctor/Examination.vue
@@ -1,118 +1,147 @@
 <template>
   <div class="examination-page">
-    <div class="exam-layout">
-      <!-- 左侧：检查项目分类 -->
-      <div class="panel category-panel">
-        <el-tree
-          :data="categoryTree"
-          node-key="id"
-          :props="defaultProps"
-          @node-click="handleCategoryClick"
-          highlight-current
-        />
+    <!-- 检查项目分类树 -->
+    <el-tree
+      :data="categoryTree"
+      node-key="id"
+      :props="defaultProps"
+      @node-click="handleCategoryClick"
+      highlight-current
+    />
+
+    <!-- 检查方法列表 -->
+    <el-table
+      v-if="methodList.length"
+      :data="methodList"
+      style="width: 100%; margin-top: 20px"
+      @row-click="handleMethodRowClick"
+    >
+      <el-table-column prop="name" label="检查方法" />
+      <el-table-column label="选择" width="80" align="center">
+        <template #default="{ row }">
+          <!-- 仅在用户手动点击时才勾选，避免自动勾选冲突 -->
+          <el-checkbox
+            class="exam-method-checkbox"
+            :model-value="isSelected(row)"
+            @change="toggleMethodSelection(row, $event)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 已选检查项目卡片 -->
+    <div v-if="selectedMethod" class="selected-item-card">
+      <div class="card-header" @click="toggleDetail">
+        <span class="item-name">{{ selectedMethod.name }}</span>
+        <el-icon :class="{ rotated: detailVisible }"><arrow-down /></el-icon>
       </div>
-
-      <!-- 中间：检查项目列表 -->
-      <div class="panel item-panel">
-        <el-checkbox-group v-model="checkedIds" @change="syncSelectedItems">
-          <el-checkbox v-for="item in currentItems" :key="item.id" :label="item.id">
-            {{ cleanName(item.name) }}
-          </el-checkbox>
-        </el-checkbox-group>
-      </div>
-
-      <!-- 右侧：已选项目卡片 -->
-      <div class="panel selected-panel">
-        <div class="selected-list">
-          <el-card
-            v-for="item in selectedItems"
-            :key="item.id"
-            class="selected-item-card"
-            shadow="never"
-          >
-            <div class="card-header" @click="toggleDetail(item)">
-              <span class="item-name" :title="item.displayName">{{ item.displayName }}</span>
-              <el-icon :class="{ 'is-rotate': !item.detailCollapsed }">
-                <ArrowDown />
-              </el-icon>
-            </div>
-
-            <div class="card-detail" v-show="!item.detailCollapsed">
-              <div class="hierarchy-tip">检查项目 > 检查方法</div>
-              <div class="exam-method-checkbox">
-                <el-checkbox
-                  v-model="item.methodChecked"
-                  :true-label="1"
-                  :false-label="0"
-                >
-                  检查方法
-                </el-checkbox>
-              </div>
-            </div>
-          </el-card>
+      <div class="card-detail" v-show="detailVisible">
+        <!-- 只展示检查方法的层级信息，避免套餐明细干扰 -->
+        <div class="hierarchy-tip">
+          检查项目 > 检查方法
         </div>
+        <!-- 这里可以放置方法的具体描述或注意事项 -->
+        <p class="method-description">{{ selectedMethod.description }}</p>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { ArrowDown } from '@element-plus/icons-vue'
+import { ref, computed } from 'vue';
+import { ArrowDown } from '@element-plus/icons-vue';
+import { getExamCategories, getMethodsByCategory } from '@/api/outpatient/examination';
 
-const categoryTree = ref([])
-const defaultProps = { children: 'children', label: 'name' }
-const currentItems = ref([])
-const checkedIds = ref([])
-const selectedItems = ref([])
+// 分类树数据
+const categoryTree = ref([]);
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+};
 
-// 清理冗余“套餐”字样
-const cleanName = (name) => name ? name.replace(/套餐/g, '') : ''
+// 当前选中的检查方法（单选，解耦套餐与方法的勾选）
+const selectedMethod = ref(null);
+const detailVisible = ref(false);
 
-const handleCategoryClick = (data) => {
-  // 实际项目中此处应调用 API 获取项目列表
-  currentItems.value = data.children || []
-  checkedIds.value = []
-}
+// 方法列表
+const methodList = ref([]);
 
-// 核心解耦逻辑：仅同步项目勾选状态，绝不自动联动检查方法
-const syncSelectedItems = (newCheckedIds) => {
-  const updated = []
-  for (const id of newCheckedIds) {
-    const existing = selectedItems.value.find(i => i.id === id)
-    if (existing) {
-      updated.push(existing)
-    } else {
-      const raw = currentItems.value.find(i => i.id === id)
-      if (raw) {
-        updated.push({
-          id: raw.id,
-          name: raw.name,
-          displayName: cleanName(raw.name),
-          detailCollapsed: true, // 默认收起明细
-          methodChecked: 0       // 默认不勾选，与父项目完全解耦
-        })
-      }
+// 加载检查项目分类
+(async () => {
+  const res = await getExamCategories();
+  categoryTree.value = res.data || [];
+})();
+
+// 分类点击后加载对应的检查方法
+const handleCategoryClick = async (node) => {
+  const res = await getMethodsByCategory(node.id);
+  methodList.value = res.data || [];
+  // 切换分类时自动清除已选方法，防止跨分类残留
+  selectedMethod.value = null;
+  detailVisible.value = false;
+};
+
+// 判断方法是否已被选中（仅用于 UI 绑定）
+const isSelected = (method) => {
+  return selectedMethod.value && selectedMethod.value.id === method.id;
+};
+
+// 勾选框点击事件：完全由用户行为决定是否选中
+const toggleMethodSelection = (method, checked) => {
+  if (checked) {
+    // 只保留当前选中的方法，自动取消其他已选（单选）
+    selectedMethod.value = method;
+    detailVisible.value = false;
+  } else {
+    // 取消勾选时清空选中状态
+    if (selectedMethod.value && selectedMethod.value.id === method.id) {
+      selectedMethod.value = null;
+      detailVisible.value = false;
     }
   }
-  selectedItems.value = updated
-}
+};
 
-const toggleDetail = (item) => {
-  item.detailCollapsed = !item.detailCollapsed
-}
+// 行点击同样触发勾选，提升交互体验
+const handleMethodRowClick = (row) => {
+  const currentlyChecked = isSelected(row);
+  toggleMethodSelection(row, !currentlyChecked);
+};
+
+// 展开/收起详情卡片
+const toggleDetail = () => {
+  detailVisible.value = !detailVisible.value;
+};
 </script>
 
 <style scoped>
-.examination-page { height: 100%; padding: 12px; box-sizing: border-box; }
-.exam-layout { display: flex; gap: 12px; height: 100%; }
-.panel { flex: 1; border: 1px solid #ebeef5; border-radius: 4px; padding: 10px; overflow-y: auto; background: #fff; }
-.selected-item-card { margin-bottom: 10px; cursor: pointer; transition: box-shadow 0.2s; }
-.selected-item-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
-.card-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
-.item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; margin-right: 8px; }
-.is-rotate { transform: rotate(180deg); transition: transform 0.2s ease; }
-.card-detail { padding-top: 8px; border-top: 1px dashed #e4e7ed; margin-top: 8px; }
-.hierarchy-tip { font-size: 12px; color: #909399; margin-bottom: 6px; }
-.exam-method-checkbox { margin-left: 4px; }
+.examination-page {
+  padding: 20px;
+}
+.selected-item-card {
+  margin-top: 20px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.item-name {
+  font-weight: 600;
+}
+.card-detail {
+  padding: 10px;
+  background-color: #fff;
+}
+.hierarchy-tip {
+  color: #909399;
+  margin-bottom: 8px;
+}
+.rotated {
+  transform: rotate(180deg);
+}
 </style>