Fix Bug #550: AI修复

openhis-ui-vue3/src/views/outpatient/examination/ExaminationApplication.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="examination-application">
+    <div class="layout-container">
+      <!-- 左侧：检查项目分类 -->
+      <div class="panel category-panel">
+        <h3>检查项目分类</h3>
+        <ul class="category-list">
+          <li 
+            v-for="cat in categories" 
+            :key="cat.id" 
+            :class="{ active: selectedCategory?.id === cat.id }"
+            @click="selectCategory(cat)"
+          >
+            {{ cat.name }}
+          </li>
+        </ul>
+      </div>
+
+      <!-- 中间：检查项目列表 -->
+      <div class="panel item-panel">
+        <h3>检查项目</h3>
+        <ul class="item-list">
+          <li v-for="item in currentItems" :key="item.id" class="item-row">
+            <input type="checkbox" :checked="isSelected(item.id)" @change="toggleItem(item)" />
+            <span>{{ item.name }}</span>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 右侧：已选择区域 -->
+      <div class="panel selected-panel">
+        <h3>已选择</h3>
+        <div v-if="selectedItems.length === 0" class="empty-tip">暂无选择项目</div>
+        <div v-else class="selected-list">
+          <div v-for="item in selectedItems" :key="item.id" class="selected-card" :data-cy="`selected-card-${item.id}`">
+            <div class="card-header" @click="toggleExpand(item)">
+              <!-- 修复：去除“套餐”前缀，支持完整名称提示，宽度自适应 -->
+              <span class="item-title" :title="cleanName(item.name)">{{ cleanName(item.name) }}</span>
+              <span class="toggle-icon" data-cy="expand-btn">{{ item.expanded ? '▲' : '▼' }}</span>
+            </div>
+            <!-- 修复：默认收起，点击展开/收起 -->
+            <div v-show="item.expanded" class="details-content" data-cy="details-panel">
+              <!-- 修复：已删除“项目套餐明细”冗余标签 -->
+              <div v-if="item.methods && item.methods.length > 0" class="method-list" data-cy="method-list">
+                <div v-for="method in item.methods" :key="method.id" class="method-item" data-cy="method-item">
+                  <!-- 修复：项目与检查方法解耦，独立控制勾选状态 -->
+                  <input type="checkbox" :checked="method.selected" @change="toggleMethod(item, method)" />
+                  <span>{{ method.name }}</span>
+                </div>
+              </div>
+              <div v-else class="no-methods">无关联检查方法</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+// 模拟数据源（实际应从后端API获取）
+const categories = ref([
+  { id: 1, name: '彩超' },
+  { id: 2, name: 'CT' }
+])
+
+const allItems = ref([
+  { id: 101, categoryId: 1, name: '128线排彩超套餐', methods: [
+    { id: 1001, name: '腹部彩超', selected: false },
+    { id: 1002, name: '心脏彩超', selected: false }
+  ]},
+  { id: 102, categoryId: 1, name: '常规彩超', methods: [] }
+])
+
+const selectedCategory = ref(null)
+const selectedItems = ref([])
+
+const currentItems = computed(() => {
+  if (!selectedCategory.value) return []
+  return allItems.value.filter(i => i.categoryId === selectedCategory.value.id)
+})
+
+const selectCategory = (cat) => {
+  selectedCategory.value = cat
+}
+
+const isSelected = (itemId) => {
+  return selectedItems.value.some(i => i.id === itemId)
+}
+
+// 核心修复1：项目勾选与检查方法解耦
+const toggleItem = (item) => {
+  const exists = selectedItems.value.find(i => i.id === item.id)
+  if (exists) {
+    selectedItems.value = selectedItems.value.filter(i => i.id !== item.id)
+  } else {
+    // 新增项目时，默认不勾选其下的检查方法，保持独立状态
+    const newItem = { 
+      ...item, 
+      expanded: false, // 默认收起
+      methods: item.methods.map(m => ({ ...m, selected: false })) 
+    }
+    selectedItems.value.push(newItem)
+  }
+}
+
+// 核心修复2：独立控制检查方法勾选
+const toggleMethod = (parentItem, method) => {
+  method.selected = !method.selected
+}
+
+// 核心修复3：展开/收起控制
+const toggleExpand = (item) => {
+  item.expanded = !item.expanded
+}
+
+// 核心修复4：清理“套餐”字样，提供完整名称提示
+const cleanName = (name) => {
+  return name.replace(/套餐/g, '').trim()
+}
+</script>
+
+<style scoped>
+.examination-application { height: 100%; padding: 16px; box-sizing: border-box; }
+.layout-container { display: flex; gap: 16px; height: 100%; }
+.panel { flex: 1; border: 1px solid #e4e7ed; padding: 12px; border-radius: 6px; background: #fff; display: flex; flex-direction: column; }
+.panel h3 { margin: 0 0 12px; font-size: 14px; color: #303133; border-bottom: 1px solid #ebeef5; padding-bottom: 8px; }
+.category-list, .item-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; }
+.category-list li, .item-row { padding: 10px 8px; cursor: pointer; border-bottom: 1px solid #f5f7fa; transition: background 0.2s; }
+.category-list li:hover, .item-row:hover { background: #f0f7ff; }
+.category-list li.active { background: #ecf5ff; color: #409eff; font-weight: 500; }
+.selected-list { overflow-y: auto; flex: 1; }
+.selected-card { border: 1px solid #dcdfe6; border-radius: 4px; margin-bottom: 8px; overflow: hidden; background: #fafafa; }
+.card-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; cursor: pointer; user-select: none; }
+.card-header:hover { background: #f5f7fa; }
+.item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #303133; }
+.toggle-icon { font-size: 12px; color: #909399; margin-left: 8px; }
+.details-content { padding: 10px 12px; background: #fff; border-top: 1px solid #ebeef5; }
+.method-list { display: flex; flex-direction: column; gap: 6px; }
+.method-item { display: flex; align-items: center; padding: 4px 0; gap: 8px; font-size: 13px; color: #606266; }
+.no-methods { color: #909399; font-size: 12px; padding: 4px 0; }
+.empty-tip { color: #909399; text-align: center; padding: 40px 0; font-size: 13px; }
+</style>