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

---
 .../outpatient/doctor/examination/index.vue   | 301 +++++++++---------
 .../tests/e2e/specs/bug-regression.spec.ts    |   3 +-
 2 files changed, 155 insertions(+), 149 deletions(-)

diff --git a/openhis-ui-vue3/src/views/outpatient/doctor/examination/index.vue b/openhis-ui-vue3/src/views/outpatient/doctor/examination/index.vue
index b15e577ef..8ee1d587e 100644
--- a/openhis-ui-vue3/src/views/outpatient/doctor/examination/index.vue
+++ b/openhis-ui-vue3/src/views/outpatient/doctor/examination/index.vue
@@ -1,15 +1,16 @@
 <template>
-  <div class="examination-application">
-    <el-row :gutter="16" class="layout-row">
+  <div class="examination-application-container">
+    <el-row :gutter="16">
       <!-- 左侧：检查项目分类 -->
-      <el-col :span="5">
-        <el-card shadow="never" class="panel-card">
+      <el-col :span="6">
+        <el-card shadow="never" class="category-panel">
           <template #header>检查项目分类</template>
           <el-tree
-            :data="categories"
+            :data="categoryTree"
+            :props="{ label: 'name', children: 'children' }"
             node-key="id"
             highlight-current
-            @node-click="handleCategoryClick"
+            @node-click="handleCategorySelect"
             data-cy="category-tree"
           />
         </el-card>
@@ -17,65 +18,67 @@
 
       <!-- 中间：检查项目列表 -->
       <el-col :span="9">
-        <el-card shadow="never" class="panel-card">
+        <el-card shadow="never" class="item-panel">
           <template #header>检查项目</template>
-          <div class="item-list">
+          <div class="item-scroll-area">
             <div v-for="item in currentItems" :key="item.id" class="item-row">
               <el-checkbox
-                v-model="item.selected"
+                v-model="item.checked"
                 @change="handleItemToggle(item)"
                 data-cy="item-checkbox"
               >
-                {{ item.name }}
+                {{ cleanDisplayName(item.name) }}
               </el-checkbox>
             </div>
-            <el-empty v-if="currentItems.length === 0" description="请选择左侧分类" />
           </div>
         </el-card>
       </el-col>
 
       <!-- 右侧：已选择区域 -->
-      <el-col :span="10">
-        <el-card shadow="never" class="panel-card">
+      <el-col :span="9">
+        <el-card shadow="never" class="selected-panel">
           <template #header>已选择</template>
-          <div class="selected-list">
+          <div class="selected-scroll-area">
+            <div v-if="selectedItems.length === 0" class="empty-tip">暂无选择项目</div>
             <div
-              v-for="card in selectedCards"
-              :key="card.id"
+              v-for="sel in selectedItems"
+              :key="sel.id"
               class="selected-card"
               data-cy="selected-card"
             >
-              <!-- 卡片头部：名称 + 展开/收起按钮 -->
-              <div class="card-header" @click="toggleCard(card)">
-                <el-tooltip :content="card.displayName" placement="top" :show-after="300">
-                  <span class="card-name" data-cy="selected-card-name">{{ card.displayName }}</span>
+              <div class="card-header" @click="toggleDetail(sel)">
+                <el-icon class="arrow-icon" :class="{ expanded: sel.expanded }">
+                  <ArrowRight />
+                </el-icon>
+                <el-tooltip
+                  :content="cleanDisplayName(sel.name)"
+                  placement="top"
+                  :show-after="300"
+                  :hide-after="0"
+                >
+                  <span class="card-name" data-cy="selected-card-name">
+                    {{ cleanDisplayName(sel.name) }}
+                  </span>
                 </el-tooltip>
                 <el-icon class="expand-toggle" data-cy="expand-toggle">
-                  <ArrowDown v-if="!card.expanded" />
-                  <ArrowUp v-else />
+                  <ArrowDown />
                 </el-icon>
               </div>
 
-              <!-- 卡片明细：检查方法（默认收起，严格父子层级） -->
-              <div v-show="card.expanded" class="card-details">
-                <div
-                  v-for="method in card.methods"
-                  :key="method.id"
-                  class="method-row"
-                  data-cy="method-row"
-                >
-                  <el-checkbox
-                    v-model="method.selected"
-                    @change="handleMethodToggle(method)"
-                    data-cy="method-checkbox"
-                  >
-                    {{ method.name }}
-                  </el-checkbox>
+              <transition name="detail-slide">
+                <div v-show="sel.expanded" class="card-details">
+                  <div v-for="method in sel.methods" :key="method.id" class="method-row">
+                    <el-checkbox
+                      v-model="method.checked"
+                      @change="handleMethodToggle(sel, method)"
+                      data-cy="method-checkbox"
+                    >
+                      {{ method.name }}
+                    </el-checkbox>
+                  </div>
                 </div>
-                <div v-if="!card.methods?.length" class="empty-method">无关联检查方法</div>
-              </div>
+              </transition>
             </div>
-            <el-empty v-if="selectedCards.length === 0" description="暂无已选项目" />
           </div>
         </el-card>
       </el-col>
@@ -85,182 +88,186 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
 
 // 类型定义
-interface Method {
+interface ExamMethod {
   id: string
   name: string
-  selected: boolean
+  checked: boolean
 }
 
 interface ExamItem {
   id: string
   name: string
-  selected: boolean
-  methods: Method[]
+  checked: boolean
+  methods: ExamMethod[]
 }
 
-interface Category {
+interface CategoryNode {
   id: string
   name: string
-  children: ExamItem[]
+  children?: CategoryNode[]
+  items?: ExamItem[]
 }
 
 // 状态管理
-const categories = ref<Category[]>([])
+const categoryTree = ref<CategoryNode[]>([])
 const currentItems = ref<ExamItem[]>([])
 const selectedItems = ref<ExamItem[]>([])
 
-// 1. 联动解耦：仅切换项目自身状态，绝不自动勾选关联方法
+// 核心修复1：名称清洗，去除冗余“套餐”字样
+const cleanDisplayName = (name: string) => {
+  if (!name) return ''
+  return name.replace(/套餐/g, '').trim()
+}
+
+// 分类切换
+const handleCategorySelect = (data: CategoryNode) => {
+  currentItems.value = data.items || []
+}
+
+// 核心修复2：项目与方法解耦，禁止自动联动勾选
 const handleItemToggle = (item: ExamItem) => {
-  if (item.selected) {
-    // 新增时，方法状态强制初始化为 false，保持独立
-    const newItem = {
-      ...item,
-      expanded: false, // 默认收起
-      methods: item.methods.map(m => ({ ...m, selected: false }))
+  if (item.checked) {
+    const exists = selectedItems.value.find(s => s.id === item.id)
+    if (!exists) {
+      selectedItems.value.push({
+        ...item,
+        expanded: false, // 核心修复3：默认收起状态
+        methods: item.methods?.map(m => ({ ...m, checked: false })) || [] // 方法默认不勾选
+      })
     }
-    selectedItems.value.push(newItem)
   } else {
-    selectedItems.value = selectedItems.value.filter(i => i.id !== item.id)
+    selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
   }
 }
 
-// 2. 方法独立勾选：仅更新方法自身状态，不影响父级项目
-const handleMethodToggle = (method: Method) => {
-  // 此处可触发后续业务逻辑（如价格计算），但绝不反向修改 item.selected
+// 方法独立勾选（不反向影响父级项目）
+const handleMethodToggle = (parent: ExamItem, method: ExamMethod) => {
+  // 仅记录方法状态，不触发父级联动逻辑
+  if (!method.checked) {
+    ElMessage.info(`已取消方法：${method.name}`)
+  }
 }
 
-// 3. 卡片展开/收起控制
-const toggleCard = (card: any) => {
-  card.expanded = !card.expanded
+// 核心修复3：展开/收起明细交互
+const toggleDetail = (sel: ExamItem) => {
+  sel.expanded = !sel.expanded
 }
-
-// 4. 名称清洗与展示优化：去除“套餐”前缀，保留完整名称供 Tooltip 显示
-const selectedCards = computed(() => {
-  return selectedItems.value.map(item => ({
-    ...item,
-    displayName: item.name.replace(/^套餐[：:]/, '').replace(/套餐$/, '')
-  }))
-})
-
-// 分类切换逻辑
-const handleCategoryClick = (data: Category) => {
-  currentItems.value = data.children || []
-}
-
-// 初始化 Mock 数据（实际项目应从 API 获取）
-const initMockData = () => {
-  categories.value = [
-    {
-      id: 'cat_1',
-      name: '彩超',
-      children: [
-        {
-          id: 'item_1',
-          name: '套餐：128线排彩超检查',
-          selected: false,
-          methods: [
-            { id: 'm1', name: '常规扫查', selected: false },
-            { id: 'm2', name: '血流多普勒', selected: false }
-          ]
-        },
-        {
-          id: 'item_2',
-          name: '腹部彩超',
-          selected: false,
-          methods: []
-        }
-      ]
-    }
-  ]
-}
-
-initMockData()
 </script>
 
 <style scoped>
-.examination-application {
+.examination-application-container {
   padding: 16px;
   background: #f5f7fa;
   min-height: 100vh;
 }
 
-.panel-card {
-  height: 100%;
+.category-panel, .item-panel, .selected-panel {
+  height: 600px;
+  display: flex;
+  flex-direction: column;
 }
 
-.item-list {
-  max-height: 600px;
+.category-panel :deep(.el-card__body),
+.item-panel :deep(.el-card__body),
+.selected-panel :deep(.el-card__body) {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.item-scroll-area, .selected-scroll-area {
+  flex: 1;
   overflow-y: auto;
+  padding-right: 8px;
 }
 
 .item-row {
-  padding: 8px 0;
+  padding: 10px 0;
   border-bottom: 1px dashed #ebeef5;
 }
 
-/* 修复 Bug #550-2：卡片宽度自适应，移除固定宽度限制 */
-.selected-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: 600px;
-  overflow-y: auto;
-}
-
+/* 核心修复2：卡片宽度自适应，去除固定宽度导致的截断 */
 .selected-card {
-  background: #fff;
   border: 1px solid #dcdfe6;
   border-radius: 6px;
-  padding: 12px;
-  width: 100%; /* 自适应父容器 */
+  margin-bottom: 12px;
+  background: #fff;
+  width: 100%;
   box-sizing: border-box;
-  transition: all 0.2s;
-}
-
-.selected-card:hover {
-  border-color: #409eff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
 }
 
 .card-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  padding: 12px;
   cursor: pointer;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+  transition: background 0.2s;
+}
+
+.card-header:hover {
+  background: #f0f2f5;
+}
+
+.arrow-icon {
+  transition: transform 0.25s ease;
+  margin-right: 6px;
+}
+
+.arrow-icon.expanded {
+  transform: rotate(90deg);
 }
 
 .card-name {
+  flex: 1;
   font-weight: 500;
-  color: #303133;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 85%;
-}
-
-.expand-toggle {
-  color: #909399;
-  transition: transform 0.2s;
+  white-space: nowrap;
+  margin-right: 8px;
 }
 
 .card-details {
-  padding-top: 8px;
-  padding-left: 16px;
+  padding: 8px 12px 12px 32px;
+  background: #fcfcfc;
+  border-top: 1px solid #ebeef5;
 }
 
 .method-row {
   padding: 6px 0;
-  color: #606266;
+  display: flex;
+  align-items: center;
 }
 
-.empty-method {
-  color: #c0c4cc;
-  font-size: 12px;
-  padding: 4px 0;
+.expand-toggle {
+  color: #909399;
+  font-size: 14px;
+}
+
+.empty-tip {
+  text-align: center;
+  color: #909399;
+  padding: 40px 0;
+}
+
+.detail-slide-enter-active,
+.detail-slide-leave-active {
+  transition: all 0.3s ease;
+  max-height: 200px;
+  opacity: 1;
+}
+
+.detail-slide-enter-from,
+.detail-slide-leave-to {
+  max-height: 0;
+  opacity: 0;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 </style>
diff --git a/openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts b/openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts
index 74e73f8ce..ddd8d41c1 100755
--- a/openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts
+++ b/openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts
@@ -42,7 +42,6 @@ describe('Bug #550 Regression', { tags: ['@bug550', '@regression'] }, () => {
     // 3. 验证名称显示：去除“套餐”前缀，且支持完整显示/Tooltip
     cy.get('[data-cy="selected-card-name"]').should('not.contain', '套餐')
     cy.get('[data-cy="selected-card-name"]').should('contain', '128线排')
-    // 验证卡片宽度自适应，无固定宽度导致的截断溢出
     cy.get('[data-cy="selected-card"]').invoke('css', 'width').should('not.equal', '0px')
 
     // 4. 验证默认收起状态
@@ -54,6 +53,6 @@ describe('Bug #550 Regression', { tags: ['@bug550', '@regression'] }, () => {
     cy.get('[data-cy="selected-card"]').find('.method-row').should('have.length.greaterThan', 0)
     
     // 6. 验证无冗余标签
-    cy.get('[data-cy="selected-card"]').contains('项目套餐明细').should('not.exist')
+    cy.get('[data-cy="selected-card"]').should('not.contain', '项目套餐明细')
   })
 })