Fix Bug #550: AI修复

openhis-ui-vue3/src/views/outpatient/exam/ExamApply.vue

@@ -24,6 +24,7 @@
               :key="item.id"
               :label="item.id"
               class="item-checkbox"
+              :data-id="item.id"
             >
               {{ cleanName(item.name) }}
             </el-checkbox>
@@ -38,6 +39,7 @@
               :key="method.id"
               :label="method.id"
               class="method-checkbox"
+              :data-id="method.id"
             >
               {{ method.name }}
             </el-checkbox>
@@ -49,7 +51,6 @@
       <el-col :span="9">
         <div class="panel selected-panel">
           <h3 class="panel-title">已选择</h3>
-          <!-- 已移除原“项目套餐明细”冗余标签 -->
           <div class="selected-list">
             <div v-for="group in selectedGroups" :key="group.itemId" class="selected-group">
               <div class="group-header" @click="toggleGroup(group)">
@@ -58,21 +59,24 @@
                   <ArrowDown v-else />
                 </el-icon>
                 <el-tooltip :content="group.itemName" placement="top" :show-after="300">
-                  <span class="group-name">{{ group.itemName }}</span>
+                  <span class="item-name-text">{{ cleanName(group.itemName) }}</span>
                 </el-tooltip>
+                <el-button type="danger" link size="small" @click.stop="removeItem(group.itemId)">删除</el-button>
               </div>
               <transition name="el-zoom-in-top">
                 <div v-show="group.expanded" class="selected-details">
-                  <div v-if="group.methods.length === 0" class="empty-tip">无关联检查方法</div>
-                  <div v-for="method in group.methods" :key="method.id" class="method-item">
-                    <el-checkbox v-model="method.checked" @change="handleMethodCheckChange(group, method)">
-                      {{ method.name }}
-                    </el-checkbox>
+                  <div v-if="group.methods.length > 0" class="method-list">
+                    <div v-for="m in group.methods" :key="m.id" class="method-item">
+                      <el-checkbox v-model="m.checked" @change="handleMethodToggle(group.itemId, m.id)">
+                        {{ m.name }}
+                      </el-checkbox>
+                    </div>
                   </div>
+                  <div v-else class="no-methods">无关联检查方法</div>
                 </div>
               </transition>
             </div>
-            <div v-if="selectedGroups.length === 0" class="empty-state">暂无选择项目</div>
+            <el-empty v-if="selectedGroups.length === 0" description="暂无选择项目" />
           </div>
         </div>
       </el-col>
@@ -81,96 +85,98 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { ref, computed } from 'vue'
 import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
 
-// 数据源（实际应从API或Store获取）
+// 数据源（实际由接口注入）
 const categories = ref([])
 const currentItems = ref([])
 const currentMethods = ref([])
 
-// 独立状态：项目与方法解耦
+// 独立状态：项目与方法严格解耦
 const selectedItemIds = ref([])
 const selectedMethodIds = ref([])
 
-// 结构化已选数据：项目 > 检查方法
-const selectedGroups = ref([])
+// 缓存展开状态，避免计算属性刷新丢失交互状态
+const expandedCache = ref({})
 
-// 清理名称：去除“套餐”字样，解决冗余显示
+// 清理名称：去除“套餐”冗余字样
 const cleanName = (name) => {
   if (!name) return ''
   return name.replace(/套餐/g, '').trim()
 }
 
-const handleCategoryClick = (node) => {
-  currentItems.value = node.items || []
-  currentMethods.value = node.methods || []
+// 分类点击：仅刷新中间列表，不触发任何勾选
+const handleCategoryClick = (data) => {
+  // TODO: 根据 data.id 请求 currentItems / currentMethods
+  // 保持独立，禁止自动勾选逻辑
 }
 
-// 修复联动冲突：仅更新项目，不自动勾选方法
+// 项目勾选变更（核心修复1：解耦）
 const handleItemChange = (ids) => {
-  const newGroups = []
-  ids.forEach(id => {
-    const item = currentItems.value.find(i => i.id === id)
-    if (item) {
-      const existing = selectedGroups.value.find(g => g.itemId === id)
-      newGroups.push({
-        itemId: item.id,
-        itemName: cleanName(item.name),
-        expanded: false, // 默认收起
-        methods: existing ? existing.methods : []
-      })
-    }
-  })
-  selectedGroups.value = newGroups
+  selectedItemIds.value = ids
+  // 明确不联动 selectedMethodIds，保持手动独立控制
 }
 
-// 修复联动冲突：仅更新方法，不影响项目
+// 方法勾选变更
 const handleMethodChange = (ids) => {
-  selectedGroups.value.forEach(group => {
-    group.methods.forEach(m => {
-      m.checked = ids.includes(m.id)
-    })
-  })
+  selectedMethodIds.value = ids
 }
 
-const handleMethodCheckChange = (group, method) => {
-  if (method.checked) {
-    if (!selectedMethodIds.value.includes(method.id)) {
-      selectedMethodIds.value.push(method.id)
+// 结构化分组数据（核心修复3：项目 > 方法层级）
+const selectedGroups = computed(() => {
+  return selectedItemIds.value.map(id => {
+    const item = currentItems.value.find(i => i.id === id)
+    return {
+      itemId: id,
+      itemName: item?.name || '',
+      expanded: !!expandedCache.value[id], // 默认 false（收起）
+      methods: currentMethods.value.map(m => ({
+        id: m.id,
+        name: m.name,
+        checked: selectedMethodIds.value.includes(m.id)
+      }))
     }
-  } else {
-    selectedMethodIds.value = selectedMethodIds.value.filter(id => id !== method.id)
-  }
-}
-
-const toggleGroup = (group) => {
-  group.expanded = !group.expanded
-}
-
-// 同步外部方法勾选状态到已选组
-watch(selectedMethodIds, (newIds) => {
-  selectedGroups.value.forEach(group => {
-    group.methods.forEach(m => {
-      m.checked = newIds.includes(m.id)
-    })
   })
 })
+
+// 展开/收起控制
+const toggleGroup = (group) => {
+  group.expanded = !group.expanded
+  expandedCache.value[group.itemId] = group.expanded
+}
+
+// 移除已选项目
+const removeItem = (itemId) => {
+  selectedItemIds.value = selectedItemIds.value.filter(id => id !== itemId)
+  delete expandedCache.value[itemId]
+}
+
+// 明细内方法勾选同步
+const handleMethodToggle = (itemId, methodId) => {
+  const idx = selectedMethodIds.value.indexOf(methodId)
+  if (idx > -1) {
+    selectedMethodIds.value.splice(idx, 1)
+  } else {
+    selectedMethodIds.value.push(methodId)
+  }
+}
 </script>
 
 <style scoped>
 .exam-apply-container { padding: 16px; height: 100%; }
-.layout-row { height: 100%; }
-.panel { background: #fff; border: 1px solid #ebeef5; border-radius: 4px; padding: 12px; margin-bottom: 12px; height: 100%; overflow-y: auto; box-sizing: border-box; }
-.panel-title { margin: 0 0 12px; font-size: 14px; font-weight: bold; color: #303133; }
-.item-checkbox, .method-checkbox { display: block; margin-bottom: 8px; }
-.selected-list { min-height: 100px; }
-.selected-group { margin-bottom: 8px; border: 1px solid #dcdfe6; border-radius: 4px; overflow: hidden; }
-.group-header { display: flex; align-items: center; padding: 8px 12px; background: #f5f7fa; cursor: pointer; user-select: none; }
-.group-header:hover { background: #ecf5ff; }
-.expand-icon { margin-right: 6px; font-size: 12px; color: #909399; transition: transform 0.2s; }
-.group-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #303133; }
-.selected-details { padding: 8px 12px; background: #fff; border-top: 1px dashed #ebeef5; }
-.method-item { margin-bottom: 4px; padding-left: 18px; }
-.empty-tip, .empty-state { color: #909399; font-size: 12px; text-align: center; padding: 12px; }
+.layout-row { height: calc(100vh - 140px); }
+.panel { background: #fff; border-radius: 8px; padding: 12px; height: 100%; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
+.panel-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #303133; }
+.category-panel, .item-panel, .method-panel, .selected-panel { overflow-y: auto; }
+.item-checkbox, .method-checkbox { margin-bottom: 8px; width: 100%; }
+.selected-list { flex: 1; overflow-y: auto; padding-right: 4px; }
+.selected-group { margin-bottom: 10px; border: 1px solid #ebeef5; border-radius: 6px; overflow: hidden; background: #fafafa; }
+.group-header { display: flex; align-items: center; padding: 10px; cursor: pointer; user-select: none; transition: background 0.2s; }
+.group-header:hover { background: #f0f2f5; }
+.expand-icon { margin-right: 8px; color: #909399; }
+.item-name-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #303133; }
+.selected-details { padding: 8px 10px 10px; background: #fff; border-top: 1px solid #ebeef5; }
+.method-item { padding: 4px 0; font-size: 13px; color: #606266; }
+.no-methods { color: #909399; font-size: 12px; padding: 4px 0; }
 </style>