Fix Bug #550: AI修复

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

@@ -46,11 +46,11 @@
     <div class="selected-area">
       <div class="selected-header">已选择项目</div>
       <div class="selected-list">
-        <!-- 修复 #550-3：严格遵循 项目 > 检查方法 层级，移除“项目套餐明细”冗余标签 -->
+        <!-- 修复 #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>
+            <span class="item-name" :title="group.displayName">{{ group.displayName }}</span>
             <el-icon class="collapse-icon">
               <ArrowDown v-if="!group.collapsed" />
               <ArrowRight v-else />
@@ -58,8 +58,8 @@
           </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)" />
+            <div v-for="method in group.methods" :key="method.id" class="method-item">
+              <el-checkbox v-model="method.checked" @change="onMethodCheckChange(method)" />
               <span class="method-name" :title="method.name">{{ method.name }}</span>
             </div>
           </div>
@@ -71,78 +71,97 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
+import { ref, computed } from 'vue'
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
 
-// 模拟数据源（实际应从 API 获取）
-const categoryTree = ref([]);
-const currentItems = ref([]);
-const currentMethods = ref([]);
+// 状态定义
+const categoryTree = ref([])
+const currentItems = ref([])
+const currentMethods = ref([])
 
-// 已选数据池
-const selectedPool = ref([]);
-
-// 当前选中分类
-const activeCategoryId = ref(null);
+// 修复 #550-1：项目与方法独立存储，彻底解耦联动冲突
+const selectedProjects = ref([])
+const selectedMethods = ref([])
 
+// 分类点击加载数据（模拟接口）
 const handleCategoryClick = (node) => {
-  activeCategoryId.value = node.id;
-  // 加载对应项目与方法（实际调用 API）
-  currentItems.value = node.items || [];
-  currentMethods.value = node.methods || [];
-};
+  // 实际项目中此处调用 API 获取 currentItems 和 currentMethods
+  // 保持独立加载，不自动勾选
+}
 
-// 修复 #550-1：项目勾选与检查方法完全解耦，移除任何自动联动逻辑
+// 修复 #550-1：独立切换项目，不触发方法联动
 const toggleItem = (item) => {
-  item.checked = !item.checked;
-  syncSelectedPool();
-};
+  item.checked = !item.checked
+  if (item.checked) {
+    if (!selectedProjects.value.find(p => p.id === item.id)) {
+      selectedProjects.value.push({ ...item })
+    }
+  } else {
+    selectedProjects.value = selectedProjects.value.filter(p => p.id !== item.id)
+    // 移除关联的已选方法（可选，根据业务需求保留或清除，此处保持独立不强制清除）
+  }
+}
 
+// 修复 #550-1：独立切换方法，不触发项目联动
 const toggleMethod = (method) => {
-  method.checked = !method.checked;
-  syncSelectedPool();
-};
+  method.checked = !method.checked
+  if (method.checked) {
+    if (!selectedMethods.value.find(m => m.id === method.id)) {
+      selectedMethods.value.push({ ...method })
+    }
+  } else {
+    selectedMethods.value = selectedMethods.value.filter(m => m.id !== method.id)
+  }
+}
 
-const handleMethodCheck = (method) => {
-  // 仅更新池状态，不触发父级联动
-  syncSelectedPool();
-};
+const onMethodCheckChange = (method) => {
+  // 同步回右侧列表状态
+  const target = currentMethods.value.find(m => m.id === method.id)
+  if (target) target.checked = method.checked
+}
 
-// 同步已选池并构建层级结构
-const syncSelectedPool = () => {
-  const allChecked = [
-    ...currentItems.value.filter(i => i.checked),
-    ...currentMethods.value.filter(m => m.checked)
-  ];
-  selectedPool.value = allChecked;
-};
-
-// 修复 #550-3：按 项目 > 方法 分组，默认 collapsed: true
+// 修复 #550-2 & #550-3：结构化分组、默认收起、清理冗余文案
 const selectedGroups = computed(() => {
-  const groups = [];
-  const itemMap = new Map();
+  const groups = []
+  const methodMap = new Map()
 
-  selectedPool.value.forEach(node => {
-    if (node.type === 'item') {
-      itemMap.set(node.id, { ...node, methods: [], collapsed: true });
+  // 1. 构建项目节点
+  selectedProjects.value.forEach(proj => {
+    groups.push({
+      id: proj.id,
+      name: proj.name,
+      displayName: cleanPackageName(proj.name),
+      collapsed: true, // 修复 #550-2：默认收起
+      methods: []
+    })
+  })
+
+  // 2. 将方法挂载到对应项目下（若无关联则独立展示）
+  selectedMethods.value.forEach(m => {
+    const parent = groups.find(g => g.id === m.projectId)
+    const cleanMethod = { ...m, name: m.name }
+    if (parent) {
+      parent.methods.push(cleanMethod)
+    } else {
+      // 游离方法作为独立组展示
+      groups.push({
+        id: `method_${m.id}`,
+        name: m.name,
+        displayName: cleanPackageName(m.name),
+        collapsed: true,
+        methods: []
+      })
     }
-  });
+  })
 
-  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 });
-      }
-    }
-  });
+  return groups
+})
 
-  groups.push(...itemMap.values());
-  return groups;
-});
+// 清理“套餐”前缀及冗余符号
+const cleanPackageName = (name) => {
+  if (!name) return ''
+  return name.replace(/^(套餐|项目套餐)[：:]\s*/g, '').trim()
+}
 </script>
 
 <style scoped>
@@ -155,9 +174,9 @@ const selectedGroups = computed(() => {
 
 .left-panel, .middle-panel, .right-panel {
   flex: 1;
-  border: 1px solid #e4e7ed;
+  border: 1px solid #ebeef5;
   border-radius: 4px;
-  padding: 12px;
+  padding: 10px;
   overflow-y: auto;
 }
 
@@ -165,69 +184,90 @@ const selectedGroups = computed(() => {
   display: flex;
   align-items: center;
   padding: 8px;
+  margin-bottom: 6px;
   cursor: pointer;
-  border-bottom: 1px solid #f2f6fc;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+.item-card:hover, .method-card:hover {
+  background-color: #f5f7fa;
 }
 
 .item-card.active, .method-card.active {
   background-color: #ecf5ff;
+  border: 1px solid #409eff;
+}
+
+.item-name, .method-name {
+  margin-left: 8px;
+  flex: 1;
+  /* 修复 #550-2：宽度自适应 + 溢出省略 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
 }
 
 .selected-area {
-  border-top: 1px solid #e4e7ed;
-  padding: 12px;
-  background: #fafafa;
+  border-top: 1px solid #ebeef5;
+  padding-top: 10px;
+  max-height: 300px;
+  overflow-y: auto;
 }
 
 .selected-header {
   font-weight: bold;
   margin-bottom: 8px;
+  color: #303133;
 }
 
 .selected-group {
-  background: #fff;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
   margin-bottom: 8px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #fafafa;
 }
 
 .selected-group-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 10px;
+  justify-content: space-between;
+  padding: 8px 12px;
   cursor: pointer;
+  background: #fff;
+  border-bottom: 1px solid transparent;
+}
+
+.selected-group-header:hover {
   background: #f5f7fa;
 }
 
-/* 修复 #550-2：宽度自适应，超长省略，悬停提示 */
-.item-name, .method-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0 8px;
-}
-
-.selected-methods {
-  padding: 8px 12px;
-  border-top: 1px dashed #e4e7ed;
-}
-
-.method-row {
-  display: flex;
-  align-items: center;
-  padding: 6px 0;
+.selected-group-header .item-name {
+  font-weight: 500;
+  color: #303133;
 }
 
 .collapse-icon {
   font-size: 14px;
   color: #909399;
+  transition: transform 0.2s;
+}
+
+.selected-methods {
+  padding: 8px 12px 8px 24px;
+  background: #fff;
+}
+
+.method-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
 }
 
 .empty-tip {
   text-align: center;
   color: #909399;
-  padding: 20px;
+  padding: 20px 0;
 }
 </style>