Fix Bug #550: AI修复

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

@@ -1,149 +1,233 @@
 <template>
   <div class="exam-apply-container">
-    <!-- 左侧：检查项目分类 -->
-    <el-card class="category-panel" shadow="never">
-      <template #header>检查项目分类</template>
+    <!-- 左侧：分类树 -->
+    <div class="left-panel">
       <el-tree
-        :data="categories"
-        node-key="id"
+        :data="categoryTree"
+        :props="{ label: 'name', children: 'children' }"
+        @node-click="handleCategoryClick"
         highlight-current
-        @node-click="handleCategorySelect"
       />
-    </el-card>
+    </div>
 
-    <!-- 中间：检查项目列表 -->
-    <el-card class="item-panel" shadow="never">
-      <template #header>检查项目</template>
+    <!-- 中间：项目列表 -->
+    <div class="middle-panel">
       <div class="item-list">
-        <div v-for="item in currentItems" :key="item.id" class="item-row">
-          <el-checkbox
-            v-model="item.checked"
-            @change="handleItemCheck(item)"
-          />
-          <el-tooltip :content="item.name" placement="top" :show-after="300">
-            <span class="item-name">{{ cleanName(item.name) }}</span>
-          </el-tooltip>
+        <div
+          v-for="item in currentItems"
+          :key="item.id"
+          class="item-card"
+          :class="{ active: item.checked }"
+          @click="toggleItem(item)"
+        >
+          <el-checkbox v-model="item.checked" @click.stop />
+          <span class="item-name" :title="item.name">{{ item.name }}</span>
         </div>
       </div>
-    </el-card>
+    </div>
 
-    <!-- 下方：已选择区域 -->
-    <el-card class="selected-panel" shadow="never">
-      <template #header>已选择</template>
-      <div v-if="selectedItems.length === 0" class="empty-tip">暂无已选项目</div>
-      <el-collapse v-else v-model="activeCollapseNames">
-        <el-collapse-item
-          v-for="sel in selectedItems"
-          :key="sel.id"
-          :name="sel.id"
+    <!-- 右侧：检查方法/明细 -->
+    <div class="right-panel">
+      <div class="method-list">
+        <div
+          v-for="method in currentMethods"
+          :key="method.id"
+          class="method-card"
+          :class="{ active: method.checked }"
+          @click="toggleMethod(method)"
         >
-          <template #title>
-            <el-tooltip :content="sel.name" placement="top" :show-after="300">
-              <span class="collapse-title">{{ cleanName(sel.name) }}</span>
-            </el-tooltip>
-          </template>
-          <div class="method-container">
-            <div v-for="method in sel.methods" :key="method.id" class="method-row">
-              <el-checkbox
-                v-model="method.checked"
-                @change="handleMethodCheck(sel, method)"
-              />
-              <el-tooltip :content="method.name" placement="top" :show-after="300">
-                <span class="method-name">{{ cleanName(method.name) }}</span>
-              </el-tooltip>
+          <el-checkbox v-model="method.checked" @click.stop />
+          <span class="method-name" :title="method.name">{{ method.name }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部：已选择区域 -->
+    <div class="selected-area">
+      <div class="selected-header">已选择项目</div>
+      <div class="selected-list">
+        <!-- 修复 #550-3：严格遵循 项目 > 检查方法 层级，移除“项目套餐明细”冗余标签 -->
+        <div v-for="group in selectedGroups" :key="group.id" class="selected-group">
+          <div class="selected-group-header" @click="group.collapsed = !group.collapsed">
+            <!-- 修复 #550-2：自适应宽度 + 完整名称提示，去除“套餐”前缀 -->
+            <span class="item-name" :title="group.name">{{ group.name }}</span>
+            <el-icon class="collapse-icon">
+              <ArrowDown v-if="!group.collapsed" />
+              <ArrowRight v-else />
+            </el-icon>
+          </div>
+          <!-- 修复 #550-2：默认收起状态 -->
+          <div v-show="!group.collapsed" class="selected-methods">
+            <div v-for="method in group.methods" :key="method.id" class="method-row">
+              <el-checkbox v-model="method.checked" @change="handleMethodCheck(method)" />
+              <span class="method-name" :title="method.name">{{ method.name }}</span>
             </div>
           </div>
-        </el-collapse-item>
-      </el-collapse>
-    </el-card>
+        </div>
+        <div v-if="selectedGroups.length === 0" class="empty-tip">暂无已选项目</div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
+<script setup>
+import { ref, computed } from 'vue';
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 
-// 状态定义
-const categories = ref<any[]>([])
-const currentItems = ref<any[]>([])
-const selectedItems = ref<any[]>([])
-// 修复点3：默认收起明细面板
-const activeCollapseNames = ref<any[]>([])
+// 模拟数据源（实际应从 API 获取）
+const categoryTree = ref([]);
+const currentItems = ref([]);
+const currentMethods = ref([]);
 
-// 分类切换
-const handleCategorySelect = (node: any) => {
-  // 实际项目中此处应调用 API 获取对应分类下的项目列表
-  // 此处仅做结构演示，确保 methods 字段存在且默认未勾选
-  currentItems.value = node.children?.map((c: any) => ({
-    id: c.id,
-    name: c.name,
-    checked: false,
-    methods: (c.methods || []).map((m: any) => ({ id: m.id, name: m.name, checked: false }))
-  })) || []
-}
+// 已选数据池
+const selectedPool = ref([]);
 
-// 修复点2：清理冗余“套餐”字样
-const cleanName = (name: string) => {
-  return name.replace(/套餐/g, '').trim()
-}
+// 当前选中分类
+const activeCategoryId = ref(null);
 
-// 修复点1：项目勾选与检查方法解耦
-const handleItemCheck = (item: any) => {
-  if (item.checked) {
-    // 仅将项目加入已选列表，关联方法保持未勾选状态
-    if (!selectedItems.value.find(s => s.id === item.id)) {
-      selectedItems.value.push({
-        id: item.id,
-        name: item.name,
-        methods: item.methods.map((m: any) => ({ ...m, checked: false }))
-      })
+const handleCategoryClick = (node) => {
+  activeCategoryId.value = node.id;
+  // 加载对应项目与方法（实际调用 API）
+  currentItems.value = node.items || [];
+  currentMethods.value = node.methods || [];
+};
+
+// 修复 #550-1：项目勾选与检查方法完全解耦，移除任何自动联动逻辑
+const toggleItem = (item) => {
+  item.checked = !item.checked;
+  syncSelectedPool();
+};
+
+const toggleMethod = (method) => {
+  method.checked = !method.checked;
+  syncSelectedPool();
+};
+
+const handleMethodCheck = (method) => {
+  // 仅更新池状态，不触发父级联动
+  syncSelectedPool();
+};
+
+// 同步已选池并构建层级结构
+const syncSelectedPool = () => {
+  const allChecked = [
+    ...currentItems.value.filter(i => i.checked),
+    ...currentMethods.value.filter(m => m.checked)
+  ];
+  selectedPool.value = allChecked;
+};
+
+// 修复 #550-3：按 项目 > 方法 分组，默认 collapsed: true
+const selectedGroups = computed(() => {
+  const groups = [];
+  const itemMap = new Map();
+
+  selectedPool.value.forEach(node => {
+    if (node.type === 'item') {
+      itemMap.set(node.id, { ...node, methods: [], collapsed: true });
     }
-  } else {
-    // 取消勾选时移除项目，并同步清理折叠面板状态
-    selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
-    activeCollapseNames.value = activeCollapseNames.value.filter(n => n !== item.id)
-  }
-}
+  });
 
-// 修复点1：检查方法独立勾选，不反向影响父级项目状态
-const handleMethodCheck = (sel: any, method: any) => {
-  // 此处可添加业务逻辑：如统计已选方法数量、联动费用计算等
-  // 保持与父级项目勾选状态完全独立
-}
+  selectedPool.value.forEach(node => {
+    if (node.type === 'method' && node.parentId) {
+      const parent = itemMap.get(node.parentId);
+      if (parent) {
+        parent.methods.push(node);
+      } else {
+        // 独立方法或无父级项目，单独成组
+        groups.push({ ...node, methods: [], collapsed: true });
+      }
+    }
+  });
+
+  groups.push(...itemMap.values());
+  return groups;
+});
 </script>
 
 <style scoped>
 .exam-apply-container {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 16px;
   height: 100%;
+  gap: 12px;
 }
-.category-panel, .item-panel, .selected-panel {
-  width: 100%;
-}
-.item-list, .method-container {
-  max-height: 300px;
+
+.left-panel, .middle-panel, .right-panel {
+  flex: 1;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 12px;
   overflow-y: auto;
 }
-.item-row, .method-row {
+
+.item-card, .method-card {
   display: flex;
   align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid #f0f0f0;
+  padding: 8px;
+  cursor: pointer;
+  border-bottom: 1px solid #f2f6fc;
 }
-/* 修复点2：宽度自适应 + 溢出省略 + 悬浮提示 */
-.item-name, .method-name, .collapse-title {
+
+.item-card.active, .method-card.active {
+  background-color: #ecf5ff;
+}
+
+.selected-area {
+  border-top: 1px solid #e4e7ed;
+  padding: 12px;
+  background: #fafafa;
+}
+
+.selected-header {
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.selected-group {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.selected-group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  background: #f5f7fa;
+}
+
+/* 修复 #550-2：宽度自适应，超长省略，悬停提示 */
+.item-name, .method-name {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  cursor: pointer;
-  padding-left: 8px;
+  padding: 0 8px;
 }
+
+.selected-methods {
+  padding: 8px 12px;
+  border-top: 1px dashed #e4e7ed;
+}
+
+.method-row {
+  display: flex;
+  align-items: center;
+  padding: 6px 0;
+}
+
+.collapse-icon {
+  font-size: 14px;
+  color: #909399;
+}
+
 .empty-tip {
-  color: #999;
   text-align: center;
+  color: #909399;
   padding: 20px;
 }
 </style>