From b03cb76e952d3351d10e327e8e5748fd25cc1dd2 Mon Sep 17 00:00:00 2001
From: zhaoyun <zhaoyun@gentronhealth.com>
Date: Wed, 27 May 2026 08:07:28 +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

---
 .../src/views/outpatient/exam/ExamRequest.vue | 127 ++++++++----------
 .../tests/e2e/specs/bug-regression.spec.ts    |  11 +-
 2 files changed, 62 insertions(+), 76 deletions(-)

diff --git a/openhis-ui-vue3/src/views/outpatient/exam/ExamRequest.vue b/openhis-ui-vue3/src/views/outpatient/exam/ExamRequest.vue
index 1b9e6df4e..c9e191ef3 100644
--- a/openhis-ui-vue3/src/views/outpatient/exam/ExamRequest.vue
+++ b/openhis-ui-vue3/src/views/outpatient/exam/ExamRequest.vue
@@ -30,6 +30,7 @@
       <div v-else class="selected-list">
         <div v-for="item in selectedItems" :key="item.id" class="selected-card">
           <div class="card-header" @click="toggleExpand(item.id)">
+            <!-- 宽度自适应 + 悬停提示完整名称 -->
             <span class="item-title" :title="item.name">{{ formatItemName(item.name) }}</span>
             <el-icon class="expand-icon">
               <ArrowDown v-if="!item.expanded" />
@@ -58,159 +59,139 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, computed } from 'vue'
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 
-// 模拟数据结构（实际应从 API 获取）
-interface ExamItem {
-  id: string
-  name: string
-  methods: { id: string; name: string }[]
-}
-
+// 状态定义
 const categoryTree = ref<any[]>([])
-const currentItems = ref<ExamItem[]>([])
-const selectedItemIds = ref<string[]>([])
-const selectedMethodIds = ref<string[]>([])
-
-// 已选项目状态管理（独立维护展开状态）
-const selectedItems = reactive<{ id: string; name: string; methods: ExamItem['methods']; expanded: boolean }[]>([])
-
-// 格式化名称：去除冗余“套餐”字样
-const formatItemName = (name: string) => {
-  return name.replace(/^套餐|套餐$/g, '').trim()
-}
+const currentItems = ref<any[]>([])
+const selectedItemIds = ref<number[]>([])
+const selectedMethodIds = ref<number[]>([])
+const selectedItems = ref<any[]>([])
 
 // 分类切换
-const handleCategorySelect = (data: any) => {
-  // TODO: 调用 API 加载对应分类下的项目
-  currentItems.value = data.items || []
+const handleCategorySelect = (node: any) => {
+  currentItems.value = node.items || []
 }
 
-// 项目勾选（核心修复1：解耦，不联动勾选方法）
-const handleItemChange = (ids: string[]) => {
+// 项目勾选变更（核心解耦逻辑）
+const handleItemChange = (ids: number[]) => {
   const addedIds = ids.filter(id => !selectedItemIds.value.includes(id))
   const removedIds = selectedItemIds.value.filter(id => !ids.includes(id))
 
-  // 新增项目
+  // 新增项目：默认 expanded: false，不联动勾选方法
   addedIds.forEach(id => {
     const item = currentItems.value.find(i => i.id === id)
-    if (item && !selectedItems.find(s => s.id === id)) {
-      selectedItems.push({
-        id: item.id,
-        name: item.name,
-        methods: item.methods || [],
-        expanded: false // 核心修复3：默认收起
+    if (item && !selectedItems.value.find(s => s.id === id)) {
+      selectedItems.value.push({
+        ...item,
+        expanded: false, // 修复：默认收起状态
+        methods: item.methods || []
       })
     }
   })
 
-  // 移除项目
+  // 移除项目：同步清理已选列表及对应的方法勾选
   removedIds.forEach(id => {
-    const idx = selectedItems.findIndex(s => s.id === id)
-    if (idx > -1) selectedItems.splice(idx, 1)
-    // 清理该项目关联的已选方法，保持状态干净
-    const item = selectedItems.find(s => s.id === id)
-    if (item) {
-      selectedMethodIds.value = selectedMethodIds.value.filter(mid => !item.methods.some(m => m.id === mid))
+    const target = selectedItems.value.find(s => s.id === id)
+    if (target) {
+      selectedMethodIds.value = selectedMethodIds.value.filter(
+        mId => !target.methods.some(m => m.id === mId)
+      )
     }
+    selectedItems.value = selectedItems.value.filter(s => s.id !== id)
   })
 
   selectedItemIds.value = ids
 }
 
-// 检查方法勾选（核心修复1：独立控制）
-const handleMethodChange = (ids: string[]) => {
+// 检查方法勾选变更（独立维护，不反向影响项目）
+const handleMethodChange = (ids: number[]) => {
   selectedMethodIds.value = ids
 }
 
 // 展开/收起切换
-const toggleExpand = (id: string) => {
-  const item = selectedItems.find(s => s.id === id)
+const toggleExpand = (id: number) => {
+  const item = selectedItems.value.find(i => i.id === id)
   if (item) item.expanded = !item.expanded
 }
+
+// 名称格式化：去除冗余“套餐”字样
+const formatItemName = (name: string) => {
+  return name.replace(/套餐/g, '')
+}
 </script>
 
 <style scoped>
 .exam-request-wrapper {
   display: flex;
   gap: 16px;
+  padding: 16px;
   height: 100%;
+  box-sizing: border-box;
+}
+.left-panel, .middle-panel, .right-panel {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
   padding: 12px;
   background: #fff;
-}
-
-.left-panel, .middle-panel, .right-panel {
-  flex: 1;
-  border: 1px solid #ebeef5;
-  padding: 12px;
-  border-radius: 6px;
   overflow-y: auto;
 }
+.left-panel { width: 20%; }
+.middle-panel { width: 30%; }
+.right-panel { width: 50%; }
 
 .selected-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
-
 .selected-card {
   border: 1px solid #dcdfe6;
   border-radius: 6px;
   padding: 10px;
   background: #fafafa;
-  transition: all 0.2s;
+  width: 100%; /* 修复：宽度自适应容器 */
+  box-sizing: border-box;
 }
-
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   padding: 4px 0;
+  user-select: none;
 }
-
-/* 核心修复2：宽度自适应，超长省略，悬停提示 */
 .item-title {
-  font-weight: 500;
   flex: 1;
-  min-width: 0;
+  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-right: 8px;
-  color: #303133;
+  max-width: 100%; /* 修复：支持文本溢出省略 */
 }
-
 .expand-icon {
+  margin-left: 8px;
   color: #909399;
-  font-size: 14px;
 }
-
 .card-body {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px dashed #e4e7ed;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed #ebeef5;
 }
-
 .method-section {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
-
-/* 核心修复3：移除冗余标签，保留清晰层级 */
 .section-label {
   font-size: 12px;
   color: #909399;
   margin-bottom: 4px;
-  font-weight: 500;
 }
-
 .empty-tip {
-  text-align: center;
   color: #909399;
-  padding: 40px 0;
-  font-size: 14px;
+  text-align: center;
+  padding: 20px;
 }
 </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 76ecf36af..089285e0c 100755
--- a/openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts
+++ b/openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts
@@ -18,9 +18,10 @@ describe('HIS 门诊医生站回归测试', () => {
 
   it('Bug #550: 检查申请项目选择交互优化', { tags: ['@bug550', '@regression'] }, () => {
     // 1. 验证解耦：勾选项目不应自动勾选检查方法
-    cy.get('.category-panel').contains('彩超').click()
-    cy.get('.item-panel').contains('128线排').click()
-    cy.get('.method-panel .el-checkbox').should('not.be.checked')
+    cy.get('.left-panel').contains('彩超').click()
+    cy.get('.middle-panel').contains('128线排').click()
+    // 检查方法区域默认不应被勾选，保持独立
+    cy.get('.right-panel .method-section .el-checkbox').should('not.be.checked')
 
     // 2. 验证卡片显示：去除“套餐”前缀，宽度自适应，悬停提示完整名称
     cy.get('.selected-card .item-title').should('not.contain', '套餐')
@@ -32,5 +33,9 @@ describe('HIS 门诊医生站回归测试', () => {
     cy.get('.selected-card .card-body').should('be.visible')
     cy.get('.selected-card .section-label').should('contain', '检查方法')
     cy.get('.selected-card .section-label').should('not.contain', '项目套餐明细')
+
+    // 4. 验证手动勾选方法不影响项目状态（反向解耦验证）
+    cy.get('.right-panel .method-section .el-checkbox').first().click()
+    cy.get('.middle-panel .el-checkbox').first().should('be.checked')
   })
 })