Fix Bug #550: AI修复

openhis-ui-vue3/src/views/outpatient/doctor-workstation/ExaminationApplication.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="exam-application-container">
-    <el-row :gutter="16" class="layout-grid">
+  <div class="examination-application-container">
+    <el-row :gutter="16" class="main-layout">
       <!-- 左侧：检查项目分类 -->
-      <el-col :span="6">
+      <el-col :span="5">
         <el-card shadow="never" class="panel-card">
           <template #header>检查项目分类</template>
           <el-tree
-            :data="categories"
-            :props="{ label: 'name', children: 'children' }"
+            ref="categoryTreeRef"
+            :data="categoryList"
             node-key="id"
             highlight-current
             @node-click="handleCategoryClick"
@@ -20,64 +20,60 @@
       <el-col :span="9">
         <el-card shadow="never" class="panel-card">
           <template #header>检查项目</template>
-          <div class="item-list" v-loading="loadingItems">
-            <el-checkbox-group v-model="selectedItemIds" @change="onItemSelect">
-              <div
-                v-for="item in currentItems"
-                :key="item.id"
-                class="item-row"
-                :data-cy="`item-${item.id}`"
+          <div class="item-scroll-area" data-cy="item-list">
+            <div v-for="item in currentItems" :key="item.id" class="item-row">
+              <el-checkbox
+                v-model="item.checked"
+                @change="handleItemCheck(item)"
+                :label="item.name"
               >
-                <el-checkbox :label="item.id" :value="item.id">
-                  {{ cleanItemName(item.name) }}
-                </el-checkbox>
-              </div>
-            </el-checkbox-group>
+                {{ formatItemName(item.name) }}
+              </el-checkbox>
+            </div>
           </div>
         </el-card>
       </el-col>
 
-      <!-- 右侧/下方：已选择区域 -->
-      <el-col :span="9">
+      <!-- 右侧：已选择区域 -->
+      <el-col :span="10">
         <el-card shadow="never" class="panel-card">
-          <template #header>已选择项目</template>
-          <div class="selected-list" v-if="selectedItems.length > 0">
+          <template #header>已选择</template>
+          <div class="selected-scroll-area" data-cy="selected-list">
+            <div v-if="selectedItems.length === 0" class="empty-tip">暂无已选项目</div>
             <div
-              v-for="item in selectedItems"
-              :key="item.id"
+              v-for="sel in selectedItems"
+              :key="sel.id"
               class="selected-card"
-              :title="cleanItemName(item.name)"
-              :data-cy="`selected-card-${item.id}`"
+              data-cy="selected-card"
             >
-              <div class="card-header" @click="toggleExpand(item)">
-                <span class="item-name">{{ cleanItemName(item.name) }}</span>
-                <el-icon class="expand-icon" data-cy="expand-toggle">
-                  <ArrowUp v-if="item.expanded" />
-                  <ArrowDown v-else />
+              <div class="card-header" @click="toggleDetails(sel.id)">
+                <el-tooltip
+                  :content="formatItemName(sel.name)"
+                  placement="top"
+                  :show-after="300"
+                >
+                  <span class="item-name" data-cy="item-name">{{ formatItemName(sel.name) }}</span>
+                </el-tooltip>
+                <el-icon class="expand-icon">
+                  <ArrowDown v-if="sel.expanded" />
+                  <ArrowRight v-else />
                 </el-icon>
               </div>
-              
-              <!-- 检查方法明细（默认收起，独立勾选） -->
-              <div v-show="item.expanded" class="card-details" data-cy="detail-content">
-                <div class="method-section">
-                  <span class="section-label">检查方法</span>
-                  <el-checkbox-group v-model="item.selectedMethods" class="method-grid">
-                    <div
-                      v-for="method in item.methods"
-                      :key="method.id"
-                      class="method-item"
-                      data-cy="method-item"
-                    >
-                      <el-checkbox :label="method.id" :value="method.id">
-                        {{ method.name }}
-                      </el-checkbox>
-                    </div>
-                  </el-checkbox-group>
+              <!-- 检查方法明细（默认收起，独立勾选，移除冗余标签） -->
+              <div v-show="sel.expanded" class="method-list" data-cy="method-list">
+                <div v-for="method in sel.methods" :key="method.id" class="method-row">
+                  <el-checkbox
+                    v-model="method.checked"
+                    @change="handleMethodCheck(sel, method)"
+                    class="method-checkbox"
+                    data-cy="method-checkbox"
+                  >
+                    {{ method.name }}
+                  </el-checkbox>
                 </div>
               </div>
             </div>
           </div>
-          <el-empty v-else description="暂无已选项目" />
         </el-card>
       </el-col>
     </el-row>
@@ -85,108 +81,88 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
+import { ref } from 'vue'
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
 
-// 模拟分类与项目数据（实际应从 API 获取）
-const categories = ref([
-  { id: 'ultrasound', name: '彩超', children: [] }
+// 分类数据（实际应从后端API获取）
+const categoryList = ref([
+  { id: 'c1', label: '彩超', children: [] },
+  { id: 'c2', label: 'CT', children: [] }
 ])
 
 const currentItems = ref([])
-const loadingItems = ref(false)
-const selectedItemIds = ref([])
 const selectedItems = ref([])
 
-// 清理冗余“套餐”字样
-const cleanItemName = (name) => {
+// 格式化名称：去除冗余的“套餐”字样，避免显示混乱
+const formatItemName = (name) => {
   if (!name) return ''
   return name.replace(/套餐/g, '').trim()
 }
 
 // 切换分类加载项目
-const handleCategoryClick = (data) => {
-  loadingItems.value = true
-  // 模拟异步请求
-  setTimeout(() => {
-    currentItems.value = [
-      { id: '128', name: '128线排彩超', methods: [
-        { id: 'm1', name: '常规检查方法' },
-        { id: 'm2', name: '血管多普勒' }
-      ]},
-      { id: '192', name: '192线排彩超', methods: [
-        { id: 'm3', name: '心脏专项检查' }
-      ]}
-    ]
-    loadingItems.value = false
-  }, 300)
+const handleCategoryClick = (node) => {
+  // 实际项目中此处调用API获取项目列表
+  currentItems.value = [
+    { id: 'i1', name: '128线排套餐', checked: false, methods: [{ id: 'm1', name: '常规扫描', checked: false }, { id: 'm2', name: '增强扫描', checked: false }] },
+    { id: 'i2', name: '腹部彩超', checked: false, methods: [] }
+  ]
 }
 
-// 核心修复：项目与检查方法解耦
-const onItemSelect = (ids) => {
-  // 1. 移除未勾选的项目
-  selectedItems.value = selectedItems.value.filter(item => ids.includes(item.id))
-  
-  // 2. 新增勾选的项目（默认收起，方法独立）
-  ids.forEach(id => {
-    if (!selectedItems.value.find(i => i.id === id)) {
-      const sourceItem = currentItems.value.find(i => i.id === id)
-      if (sourceItem) {
-        selectedItems.value.push({
-          id: sourceItem.id,
-          name: sourceItem.name,
-          methods: sourceItem.methods || [],
-          selectedMethods: [], // 独立维护方法勾选状态
-          expanded: false      // 默认收起
-        })
-      }
+// 勾选项目：解耦逻辑，不自动勾选检查方法
+const handleItemCheck = (item) => {
+  if (item.checked) {
+    const exists = selectedItems.value.find(s => s.id === item.id)
+    if (!exists) {
+      selectedItems.value.push({
+        id: item.id,
+        name: item.name,
+        expanded: false, // 默认收起明细
+        methods: (item.methods || []).map(m => ({ ...m, checked: false })) // 保持独立，不联动勾选
+      })
     }
-  })
+  } else {
+    selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
+  }
+}
+
+// 勾选检查方法：独立控制，不影响父级项目状态
+const handleMethodCheck = (parentItem, method) => {
+  // 仅更新方法状态，不触发父级联动。可根据业务需要在此处添加校验逻辑
 }
 
 // 展开/收起明细
-const toggleExpand = (item) => {
-  item.expanded = !item.expanded
+const toggleDetails = (id) => {
+  const target = selectedItems.value.find(s => s.id === id)
+  if (target) {
+    target.expanded = !target.expanded
+  }
 }
 </script>
 
 <style scoped>
-.exam-application-container {
+.examination-application-container {
   padding: 16px;
   background: #f5f7fa;
   min-height: 100vh;
 }
-
 .panel-card {
   height: 100%;
 }
-
-.item-list {
-  max-height: 500px;
+.item-scroll-area, .selected-scroll-area {
+  height: 500px;
   overflow-y: auto;
-}
-
-.item-row {
   padding: 8px 0;
-  border-bottom: 1px dashed #ebeef5;
 }
-
-.selected-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: 500px;
-  overflow-y: auto;
+.item-row {
+  padding: 8px 12px;
+  border-bottom: 1px solid #ebeef5;
 }
-
 .selected-card {
+  margin-bottom: 12px;
   border: 1px solid #dcdfe6;
-  border-radius: 6px;
+  border-radius: 4px;
   background: #fff;
-  width: 100%; /* 宽度自适应 */
-  box-sizing: border-box;
 }
-
 .card-header {
   display: flex;
   justify-content: space-between;
@@ -194,42 +170,34 @@ const toggleExpand = (item) => {
   padding: 10px 12px;
   cursor: pointer;
   background: #fafafa;
-  border-radius: 6px 6px 0 0;
+  border-bottom: 1px solid #ebeef5;
 }
-
 .item-name {
-  font-weight: 500;
-  color: #303133;
-  white-space: nowrap;
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 85%;
+  white-space: nowrap;
+  font-weight: 500;
+  color: #303133;
 }
-
 .expand-icon {
+  margin-left: 8px;
   color: #909399;
-  transition: transform 0.2s;
 }
-
-.card-details {
-  padding: 12px;
-  border-top: 1px solid #ebeef5;
+.method-list {
+  padding: 8px 12px;
+  background: #fff;
 }
-
-.section-label {
-  display: block;
-  font-size: 12px;
+.method-row {
+  padding: 6px 0;
+  border-bottom: 1px dashed #ebeef5;
+}
+.method-row:last-child {
+  border-bottom: none;
+}
+.empty-tip {
+  text-align: center;
   color: #909399;
-  margin-bottom: 8px;
-}
-
-.method-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.method-item {
-  padding-left: 8px;
+  padding: 40px 0;
 }
 </style>