Fix Bug #550: AI修复

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

@@ -72,51 +72,53 @@
 import { ref } from 'vue'
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 
+// 状态定义
 const categoryTreeRef = ref(null)
 const categoryTree = ref([])
 const currentItems = ref([])
 const selectedItems = ref([])
 
-// 清理名称：去除“套餐”字样，避免冗余显示
-const cleanName = (name) => {
-  if (!name) return ''
-  return name.replace(/套餐/g, '').trim()
-}
-
-// 切换分类加载项目
+// 分类点击：加载对应项目列表
 const handleCategoryClick = (data) => {
-  // 实际应调用API获取分类下项目，此处为交互逻辑演示
-  currentItems.value = data.children || []
+  // 实际业务中此处调用 API 获取项目列表
+  // currentItems.value = await fetchItemsByCategory(data.id)
 }
 
-// 修复1：项目勾选与检查方法解耦
+// 修复1 & 3：项目选择逻辑解耦，默认收起明细，方法默认不勾选
 const handleItemSelect = (item) => {
-  item.checked = !item.checked
-  
-  if (item.checked) {
-    const exists = selectedItems.value.find(i => i.id === item.id)
-    if (!exists) {
-      // 添加到已选列表，默认收起(expanded: false)，方法默认不勾选(checked: false)
-      selectedItems.value.push({
-        ...item,
-        expanded: false,
-        methods: (item.methods || []).map(m => ({ ...m, checked: false }))
-      })
-    }
+  const exists = selectedItems.value.find(i => i.id === item.id)
+  if (!exists) {
+    selectedItems.value.push({
+      ...item,
+      checked: true,
+      expanded: false, // 默认收起
+      // 解耦：子方法独立状态，默认不勾选
+      methods: (item.methods || []).map(m => ({ ...m, checked: false }))
+    })
   } else {
-    selectedItems.value = selectedItems.value.filter(i => i.id !== item.id)
+    exists.checked = !exists.checked
+    if (!exists.checked) {
+      selectedItems.value = selectedItems.value.filter(i => i.id !== item.id)
+    }
   }
 }
 
-// 修复1：检查方法独立勾选，不触发父级联动
-const handleMethodCheck = (method) => {
-  // 仅更新当前方法状态，保持父子级状态独立
-}
-
-// 修复2/3：展开/收起明细面板
+// 修复3：点击卡片切换明细展开/收起
 const toggleExpand = (item) => {
   item.expanded = !item.expanded
 }
+
+// 修复1：方法勾选独立处理，不向上冒泡或联动父级
+const handleMethodCheck = (method) => {
+  // 仅更新当前方法状态，保持父子解耦
+  // 如需同步总价或校验，可在此处扩展独立逻辑
+}
+
+// 修复2：清理冗余文案，保留核心名称
+const cleanName = (name) => {
+  if (!name) return ''
+  return name.replace(/套餐|项目套餐明细/g, '').trim()
+}
 </script>
 
 <style scoped>
@@ -125,70 +127,79 @@ const toggleExpand = (item) => {
   gap: 16px;
   padding: 16px;
   height: 100%;
-  background: #fff;
+  box-sizing: border-box;
 }
+
 .panel {
   flex: 1;
+  display: flex;
+  flex-direction: column;
   border: 1px solid #ebeef5;
   border-radius: 4px;
   padding: 12px;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
+  background: #fff;
 }
+
 .panel-title {
   margin: 0 0 12px;
-  font-size: 15px;
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: bold;
   color: #303133;
 }
+
 .item-list {
   flex: 1;
   overflow-y: auto;
 }
+
 .item-card {
   display: flex;
   align-items: center;
   padding: 10px;
-  margin-bottom: 8px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
   cursor: pointer;
-  transition: all 0.2s;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background 0.2s;
 }
+
+.item-card:hover {
+  background-color: #f5f7fa;
+}
+
 .item-card.active {
   background-color: #ecf5ff;
-  border-color: #409eff;
 }
+
 .item-name {
   margin-left: 8px;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: #606266;
 }
+
 .selected-list {
   flex: 1;
   overflow-y: auto;
 }
+
 .selected-group {
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
+
+/* 修复2：卡片自适应宽度，支持文本溢出省略与悬停提示 */
 .selected-card {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 10px 12px;
+  justify-content: space-between;
+  padding: 10px;
   background: #f5f7fa;
-  border: 1px solid #e4e7ed;
   border-radius: 4px;
   cursor: pointer;
-  min-width: 0;
   transition: background 0.2s;
+  border: 1px solid #e4e7ed;
 }
+
 .selected-card:hover {
-  background: #eef1f6;
+  background: #e6e8eb;
 }
+
 .card-name {
   flex: 1;
   overflow: hidden;
@@ -196,31 +207,32 @@ const toggleExpand = (item) => {
   white-space: nowrap;
   margin-right: 8px;
   font-weight: 500;
+  color: #303133;
 }
+
 .expand-icon {
   font-size: 14px;
   color: #909399;
   flex-shrink: 0;
 }
+
+/* 修复3：明细层级缩进与视觉隔离 */
 .method-detail-list {
-  margin-top: 8px;
-  padding-left: 16px;
-  border-left: 2px solid #409eff;
-  background: #fafafa;
-  border-radius: 0 4px 4px 0;
+  padding-left: 24px;
+  margin-top: 6px;
+  border-left: 2px solid #dcdfe6;
 }
+
 .method-item {
-  padding: 8px 0;
+  padding: 6px 0;
   display: flex;
   align-items: center;
-  border-bottom: 1px dashed #ebeef5;
-}
-.method-item:last-child {
-  border-bottom: none;
+  color: #606266;
 }
+
 .empty-tip {
-  color: #909399;
   text-align: center;
+  color: #909399;
   margin-top: 40px;
   font-size: 14px;
 }