Fix Bug #550: AI修复

openhis-ui-vue3/src/views/outpatient/ExaminationApply.vue

@@ -57,61 +57,63 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
 
-// 状态定义
-const categories = ref([])
-const currentItems = ref([])
+// 模拟数据源（实际应从后端API获取）
+const categories = ref([
+  { id: 1, name: '彩超', children: [] }
+])
+const currentItems = ref([
+  { id: 128, name: '128线排彩超套餐', methods: [{ id: 'm1', name: '常规扫描' }, { id: 'm2', name: '增强扫描' }] },
+  { id: 129, name: '腹部彩超', methods: [{ id: 'm3', name: '平扫' }] }
+])
+
 const selectedItemIds = ref([])
 const selectedList = ref([])
 
-// 清理冗余“套餐”字样
-const cleanName = (name) => name.replace(/套餐/g, '')
-
-// 分类切换
-const handleCategoryClick = (data) => {
-  currentItems.value = data.items || []
+// 清理名称：去除“套餐”字样，避免界面冗余
+const cleanName = (name) => {
+  return name ? name.replace(/套餐/g, '').trim() : ''
 }
 
-// 项目勾选（解耦：不联动方法）
+const handleCategoryClick = (node) => {
+  // 实际逻辑：根据分类ID请求后端获取对应项目列表
+  currentItems.value = node.children || []
+}
+
+// 核心修复：项目勾选与检查方法解耦，支持独立手动勾选
 const handleItemSelect = (ids) => {
-  const newSelected = ids.map(id => {
-    const existing = selectedList.value.find(s => s.id === id)
-    if (existing) return existing
-    const item = currentItems.value.find(i => i.id === id)
-    return {
-      id: item.id,
-      name: item.name,
-      displayName: cleanName(item.name),
-      checked: true,
-      expanded: false, // 默认收起
-      methods: item.methods || [],
-      selectedMethods: []
+  const newIds = new Set(ids)
+  // 移除已取消勾选的项目
+  selectedList.value = selectedList.value.filter(item => newIds.has(item.id))
+
+  // 新增勾选的项目，默认收起且方法不自动勾选
+  currentItems.value.forEach(item => {
+    if (newIds.has(item.id) && !selectedList.value.find(s => s.id === item.id)) {
+      selectedList.value.push({
+        id: item.id,
+        displayName: cleanName(item.name),
+        checked: true,
+        expanded: false, // 默认收起状态
+        methods: item.methods || [],
+        selectedMethods: [] // 方法独立初始化，不联动勾选
+      })
     }
   })
-  // 同步移除已取消勾选的项目
-  selectedList.value = newSelected
 }
 
-// 展开/收起明细
-const toggleDetail = (item) => {
-  item.expanded = !item.expanded
+const handleCardCheck = (selected, val) => {
+  selected.checked = val
 }
 
-// 卡片级勾选控制
-const handleCardCheck = (item, val) => {
-  item.checked = val
-  if (!val) {
-    selectedItemIds.value = selectedItemIds.value.filter(id => id !== item.id)
-    selectedList.value = selectedList.value.filter(s => s.id !== item.id)
-  }
+const handleMethodSelect = (selected) => {
+  // 方法勾选状态变更，不反向影响父级项目勾选状态（已解耦）
+  // 可在此处触发费用计算或状态同步逻辑
 }
 
-// 方法勾选（独立状态，不影响父级）
-const handleMethodSelect = (item) => {
-  // 仅记录或触发后续业务逻辑，不修改项目勾选状态
-  console.log(`项目 ${item.displayName} 方法已更新:`, item.selectedMethods)
+const toggleDetail = (selected) => {
+  selected.expanded = !selected.expanded
 }
 </script>
 
@@ -119,8 +121,8 @@ const handleMethodSelect = (item) => {
 .examination-apply-container {
   display: flex;
   gap: 16px;
-  padding: 16px;
   height: 100%;
+  padding: 16px;
   background: #f5f7fa;
 }
 .panel {
@@ -128,53 +130,41 @@ const handleMethodSelect = (item) => {
   border-radius: 6px;
   padding: 12px;
   background: #fff;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  display: flex;
+  flex-direction: column;
 }
-.category-panel { width: 22%; }
-.item-panel { width: 28%; }
-.selected-panel { flex: 1; overflow-y: auto; }
+.category-panel { width: 20%; }
+.item-panel { width: 35%; overflow-y: auto; }
+.selected-panel { width: 45%; overflow-y: auto; }
 .panel-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #303133; }
-.empty-tip { color: #909399; text-align: center; padding: 20px 0; }
 .item-row, .method-row { padding: 8px 0; border-bottom: 1px dashed #f0f0f0; }
-.item-row:last-child, .method-row:last-child { border-bottom: none; }
-
 .selected-card {
-  border: 1px solid #dcdfe6;
+  margin-bottom: 12px;
+  border: 1px solid #e4e7ed;
   border-radius: 6px;
-  margin-bottom: 10px;
-  background: #fafafa;
-  transition: all 0.2s;
+  overflow: hidden;
+  transition: box-shadow 0.2s;
 }
-.selected-card:hover { border-color: #409eff; }
+.selected-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
 .card-header {
   display: flex;
   align-items: center;
-  padding: 10px 12px;
+  padding: 10px;
   cursor: pointer;
+  background: #fafafa;
   gap: 8px;
   user-select: none;
 }
 .card-name {
   flex: 1;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
   font-weight: 500;
   color: #303133;
 }
-.toggle-icon {
-  color: #909399;
-  transition: transform 0.2s;
-}
-.card-detail {
-  padding: 0 12px 12px 36px;
-  border-top: 1px dashed #ebeef5;
-  background: #fff;
-}
-.detail-title {
-  font-size: 12px;
-  color: #909399;
-  margin: 8px 0 4px;
-  font-weight: 500;
-}
+.toggle-icon { margin-left: auto; color: #909399; }
+.card-detail { padding: 10px; background: #fff; border-top: 1px solid #ebeef5; }
+.detail-title { font-size: 13px; color: #909399; margin-bottom: 8px; }
+.empty-tip { color: #909399; text-align: center; padding: 30px 0; }
 </style>