Fix Bug #550: AI修复

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

@@ -1,130 +1,202 @@
 <template>
   <div class="exam-apply-container">
-    <el-row :gutter="20">
-      <!-- 左侧：分类 -->
-      <el-col :span="6">
-        <el-card shadow="never">
+    <el-row :gutter="16" class="layout-grid">
+      <!-- 左侧：检查项目分类 -->
+      <el-col :span="5">
+        <el-card class="panel-card" shadow="never">
           <template #header>检查项目分类</template>
-          <el-tree :data="categories" :props="{ label: 'name', children: 'children' }" @node-click="handleCategoryClick" />
+          <el-tree
+            :data="categoryTree"
+            :props="{ label: 'name', children: 'children' }"
+            highlight-current
+            @node-click="handleCategorySelect"
+          />
         </el-card>
       </el-col>
-      <!-- 中间：项目列表 -->
-      <el-col :span="9">
-        <el-card shadow="never">
+
+      <!-- 中间：检查项目列表 -->
+      <el-col :span="10">
+        <el-card class="panel-card" shadow="never">
           <template #header>检查项目</template>
-          <div class="item-list">
-            <div v-for="item in currentItems" :key="item.id" class="item-row">
-              <el-checkbox v-model="item.checked" @change="onItemSelect(item)" />
-              <el-tooltip :content="cleanName(item.name)" placement="top" :show-after="500">
-                <span class="item-name">{{ cleanName(item.name) }}</span>
-              </el-tooltip>
-            </div>
+          <div class="exam-item-list">
+            <el-checkbox-group v-model="selectedItemIds" @change="onItemChange">
+              <el-checkbox
+                v-for="item in currentItems"
+                :key="item.id"
+                :label="item.id"
+                :value="item.id"
+                class="item-checkbox"
+              >
+                {{ cleanName(item.name) }}
+              </el-checkbox>
+            </el-checkbox-group>
           </div>
         </el-card>
       </el-col>
-      <!-- 右侧：检查方法/明细 -->
+
+      <!-- 右侧：已选择区域 -->
       <el-col :span="9">
-        <el-card shadow="never">
-          <template #header>检查方法 / 明细</template>
-          <div v-if="selectedItemForMethod" class="method-list">
-            <div v-for="method in selectedItemForMethod.methods" :key="method.id" class="method-row">
-              <el-checkbox v-model="method.checked" @change="onMethodChange(method)" />
-              <span>{{ method.name }}</span>
+        <el-card class="panel-card" shadow="never">
+          <template #header>已选择</template>
+          <div class="selected-list">
+            <div
+              v-for="item in selectedItemsHierarchy"
+              :key="item.id"
+              class="selected-item-wrapper"
+            >
+              <!-- 项目头部：点击展开/收起 -->
+              <div class="item-header" @click="toggleExpand(item.id)">
+                <el-icon class="expand-icon">
+                  <ArrowDown v-if="expandedIds.has(item.id)" />
+                  <ArrowRight v-else />
+                </el-icon>
+                <el-tooltip
+                  :content="cleanName(item.name)"
+                  placement="top"
+                  :show-after="300"
+                  :hide-after="0"
+                >
+                  <span class="item-name">{{ cleanName(item.name) }}</span>
+                </el-tooltip>
+              </div>
+
+              <!-- 检查方法明细：默认折叠，解耦独立勾选 -->
+              <div v-show="expandedIds.has(item.id)" class="method-list exam-method-list">
+                <el-checkbox-group v-model="selectedMethodIds" @change="onMethodChange">
+                  <el-checkbox
+                    v-for="method in item.methods"
+                    :key="method.id"
+                    :label="method.id"
+                    :value="method.id"
+                  >
+                    {{ method.name }}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
             </div>
+            <el-empty v-if="selectedItemIds.length === 0" description="暂无选择项目" />
           </div>
-          <el-empty v-else description="请先选择检查项目" />
         </el-card>
       </el-col>
     </el-row>
-
-    <!-- 已选择区域 -->
-    <el-card shadow="never" class="selected-area">
-      <template #header>已选择项目</template>
-      <div v-if="selectedItems.length === 0" class="empty-tip">暂无选择</div>
-      <div v-else class="selected-cards">
-        <div v-for="group in selectedItems" :key="group.itemId" class="selected-card">
-          <div class="card-header" @click="toggleGroup(group)">
-            <el-icon><ArrowRight v-if="group.collapsed" /><ArrowDown v-else /></el-icon>
-            <el-tooltip :content="cleanName(group.itemName)" placement="top">
-              <span class="card-title">{{ cleanName(group.itemName) }}</span>
-            </el-tooltip>
-          </div>
-          <el-collapse-transition>
-            <div v-show="!group.collapsed" class="card-details">
-              <div v-for="m in group.methods" :key="m.id" class="detail-row">
-                <el-checkbox v-model="m.checked" @change="onMethodChange(m)" />
-                <span>{{ m.name }}</span>
-              </div>
-            </div>
-          </el-collapse-transition>
-        </div>
-      </div>
-    </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
+import { ref, computed, watch } from 'vue'
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
 
-interface ExamMethod { id: string; name: string; checked: boolean }
-interface ExamItem { id: string; name: string; checked: boolean; methods: ExamMethod[] }
-interface SelectedGroup { itemId: string; itemName: string; methods: ExamMethod[]; collapsed: boolean }
+// 类型定义
+interface ExamMethod { id: string; name: string }
+interface ExamItem { id: string; name: string; methods?: ExamMethod[] }
+interface CategoryNode { id: string; name: string; children: ExamItem[] }
 
-const categories = ref<any[]>([])
+// 状态管理
+const categoryTree = ref<CategoryNode[]>([])
 const currentItems = ref<ExamItem[]>([])
-const selectedItemForMethod = ref<ExamItem | null>(null)
-const selectedItems = ref<SelectedGroup[]>([])
-const isDetailCollapsed = ref(true)
+const selectedItemIds = ref<string[]>([])
+const selectedMethodIds = ref<string[]>([])
+const expandedIds = ref<Set<string>>(new Set())
 
-const handleCategoryClick = (data: any) => {
-  currentItems.value = data.items || []
+// 清理名称：去除冗余的“套餐”前缀及冒号
+const cleanName = (name: string) => name.replace(/^套餐[：:]/, '').trim()
+
+// 构建已选项目的层级结构（项目 > 检查方法）
+const selectedItemsHierarchy = computed(() => {
+  const allItems = categoryTree.value.flatMap(c => c.children || [])
+  return allItems.filter(item => selectedItemIds.value.includes(item.id))
+})
+
+// 分类切换
+const handleCategorySelect = (data: CategoryNode) => {
+  currentItems.value = data.children || []
 }
 
-// 修复 Bug #550: 解耦项目勾选与检查方法勾选，禁止联动自动勾选
-const onItemSelect = (item: ExamItem) => {
-  if (item.checked) {
-    const exists = selectedItems.value.find(g => g.itemId === item.id)
-    if (!exists) {
-      selectedItems.value.push({
-        itemId: item.id,
-        itemName: item.name,
-        methods: item.methods.map(m => ({ ...m, checked: false })), // 方法默认不勾选，保持独立
-        collapsed: true // 默认收起明细
-      })
-    }
+// 项目勾选变更（解耦：不联动检查方法）
+const onItemChange = (ids: string[]) => {
+  selectedItemIds.value = ids
+  // 新增项目默认保持收起状态，不自动展开或勾选方法
+}
+
+// 方法勾选变更（独立维护）
+const onMethodChange = (ids: string[]) => {
+  selectedMethodIds.value = ids
+}
+
+// 展开/收起控制
+const toggleExpand = (id: string) => {
+  if (expandedIds.value.has(id)) {
+    expandedIds.value.delete(id)
   } else {
-    selectedItems.value = selectedItems.value.filter(g => g.itemId !== item.id)
+    expandedIds.value.add(id)
   }
 }
-
-// 修复 Bug #550: 独立的方法勾选逻辑，不反向影响父项目状态
-const onMethodChange = (method: ExamMethod) => {
-  // 仅更新当前方法状态，解耦父子联动
-}
-
-// 修复 Bug #550: 清理冗余名称，去除“套餐”及“项目套餐明细”标签
-const cleanName = (name: string) => {
-  if (!name) return ''
-  if (name.includes('项目套餐明细')) return ''
-  return name.replace(/套餐/g, '').trim()
-}
-
-const toggleGroup = (group: SelectedGroup) => {
-  group.collapsed = !group.collapsed
-}
 </script>
 
 <style scoped>
-.exam-apply-container { padding: 20px; }
-.item-list, .method-list { max-height: 400px; overflow-y: auto; }
-.item-row, .method-row, .detail-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px dashed #eee; }
-.item-name { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
-.selected-area { margin-top: 20px; }
-.selected-cards { display: flex; flex-wrap: wrap; gap: 10px; }
-.selected-card { border: 1px solid #dcdfe6; border-radius: 4px; padding: 10px; min-width: 200px; max-width: 100%; background: #fafafa; }
-.card-header { display: flex; align-items: center; cursor: pointer; font-weight: bold; margin-bottom: 5px; }
-.card-title { margin-left: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.card-details { padding-left: 20px; }
-.empty-tip { color: #909399; text-align: center; padding: 20px; }
+.exam-apply-container {
+  padding: 16px;
+  height: 100%;
+  background: #f5f7fa;
+}
+.layout-grid {
+  height: 100%;
+}
+.panel-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.panel-card :deep(.el-card__body) {
+  flex: 1;
+  overflow-y: auto;
+}
+.exam-item-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.item-checkbox {
+  margin-right: 0;
+}
+.selected-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.selected-item-wrapper {
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  background: #fff;
+  overflow: hidden;
+}
+.item-header {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  cursor: pointer;
+  background: #fafafa;
+  transition: background 0.2s;
+}
+.item-header:hover {
+  background: #f0f2f5;
+}
+.expand-icon {
+  margin-right: 8px;
+  color: #909399;
+  transition: transform 0.2s;
+}
+.item-name {
+  flex: 1;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+.method-list {
+  padding: 10px 12px 10px 32px;
+  border-top: 1px dashed #ebeef5;
+  background: #fff;
+}
 </style>