Fix Bug #550: AI修复

openhis-ui-vue3/src/views/outpatient/examination/ExaminationApplication.vue

@@ -57,89 +57,94 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
-// 状态定义
+// 模拟分类与项目数据（实际应从 API 获取）
 const categories = ref([
   { id: 1, name: '彩超' },
   { id: 2, name: 'CT' },
   { id: 3, name: 'MRI' }
 ])
-const selectedCategory = ref(null)
-const currentItems = ref([])
-const selectedItems = ref([])
 
-// 模拟数据获取（实际应替换为 API 调用）
-const fetchItemsByCategory = (catId) => {
-  return [
+const itemsMap = {
+  1: [
     { id: 101, name: '128线排彩超套餐', methods: [
       { id: 1001, name: '腹部彩超', selected: false },
       { id: 1002, name: '心脏彩超', selected: false }
     ]},
     { id: 102, name: '常规彩超', methods: [] }
-  ]
+  ],
+  2: [{ id: 201, name: '胸部CT', methods: [] }],
+  3: [{ id: 301, name: '头颅MRI', methods: [] }]
 }
 
+const selectedCategory = ref(null)
+const selectedItems = ref([])
+
+const currentItems = computed(() => {
+  return selectedCategory.value ? (itemsMap[selectedCategory.value.id] || []) : []
+})
+
 const selectCategory = (cat) => {
   selectedCategory.value = cat
-  currentItems.value = fetchItemsByCategory(cat.id)
 }
 
-const isSelected = (itemId) => {
-  return selectedItems.value.some(i => i.id === itemId)
+const isSelected = (id) => {
+  return selectedItems.value.some(i => i.id === id)
 }
 
-// 修复1：解耦项目与检查方法勾选逻辑，新增时不自动勾选方法
+// 修复1：项目勾选与检查方法解耦，新增项目时不自动勾选其下属方法
 const toggleItem = (item) => {
-  const idx = selectedItems.value.findIndex(i => i.id === item.id)
-  if (idx > -1) {
-    selectedItems.value.splice(idx, 1)
+  const index = selectedItems.value.findIndex(i => i.id === item.id)
+  if (index > -1) {
+    selectedItems.value.splice(index, 1)
   } else {
-    // 默认收起状态，方法保持未勾选
     selectedItems.value.push({
       ...item,
-      expanded: false,
+      expanded: false, // 修复3：默认收起状态
       methods: item.methods ? item.methods.map(m => ({ ...m, selected: false })) : []
     })
   }
 }
 
-// 修复2：清理名称，去除“套餐”前缀，避免冗余显示
-const cleanName = (name) => {
-  return name.replace(/套餐/g, '')
+// 修复1：独立控制检查方法勾选状态，与父项目解耦
+const toggleMethod = (parentItem, method) => {
+  const target = selectedItems.value.find(i => i.id === parentItem.id)
+  if (target) {
+    const m = target.methods.find(m => m.id === method.id)
+    if (m) {
+      m.selected = !m.selected
+    }
+  }
 }
 
 const toggleExpand = (item) => {
   item.expanded = !item.expanded
 }
 
-// 修复1：独立控制检查方法勾选状态
-const toggleMethod = (item, method) => {
-  method.selected = !method.selected
+// 修复2：清理冗余“套餐”字样，保持名称简洁
+const cleanName = (name) => {
+  return name.replace(/套餐/g, '').trim()
 }
 </script>
 
 <style scoped>
-.examination-application { padding: 16px; height: 100%; box-sizing: border-box; }
-.layout-container { display: flex; gap: 16px; height: 100%; }
-.panel { border: 1px solid #e0e0e0; border-radius: 6px; padding: 12px; overflow-y: auto; background: #fff; }
+.layout-container { display: flex; gap: 16px; padding: 16px; height: 100%; box-sizing: border-box; }
+.panel { border: 1px solid #e8e8e8; border-radius: 8px; padding: 12px; background: #fff; display: flex; flex-direction: column; }
 .category-panel { width: 20%; }
 .item-panel { width: 35%; }
 .selected-panel { width: 45%; }
-.category-list, .item-list { list-style: none; padding: 0; margin: 0; }
-.category-list li, .item-row { padding: 10px 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f5f5f5; }
-.category-list li:hover, .item-row:hover { background: #f9f9f9; }
+.category-list, .item-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; }
+.category-list li, .item-row { padding: 10px; cursor: pointer; border-bottom: 1px solid #f5f5f5; display: flex; align-items: center; gap: 8px; transition: background 0.2s; }
+.category-list li:hover, .item-row:hover { background: #fafafa; }
 .category-list li.active { background: #e6f7ff; color: #1890ff; font-weight: 500; }
-.selected-list { display: flex; flex-direction: column; gap: 10px; }
-.selected-card { border: 1px solid #e8e8e8; border-radius: 6px; background: #fafafa; overflow: hidden; }
-.card-header { padding: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #fff; }
-.card-header:hover { background: #f5f5f5; }
-/* 修复2：宽度自适应，超长省略，鼠标悬停显示完整名称 */
+.selected-list { flex: 1; overflow-y: auto; padding-top: 8px; }
+.selected-card { border: 1px solid #d9d9d9; border-radius: 6px; margin-bottom: 8px; overflow: hidden; background: #fff; }
+.card-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #fafafa; cursor: pointer; user-select: none; }
 .item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
 .toggle-icon { font-size: 12px; color: #888; margin-left: 8px; }
-.details-content { padding: 10px 12px; border-top: 1px dashed #ddd; background: #fff; }
-.method-list { display: flex; flex-direction: column; gap: 6px; }
-.method-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; color: #555; }
+.details-content { padding: 10px 12px; border-top: 1px solid #eee; background: #fff; }
+.method-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: #555; }
 .no-methods { color: #999; font-size: 13px; padding: 4px 0; }
-.empty-tip { color: #999; text-align: center; margin-top: 40px; font-size: 14px; }
+.empty-tip { color: #999; text-align: center; padding: 30px 0; }
 </style>