Fix Bug #550: AI修复

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

@@ -1,161 +1,221 @@
 <template>
-  <div class="exam-apply-container">
-    <el-row :gutter="16" class="main-layout">
-      <!-- 左侧：检查项目分类 -->
-      <el-col :span="5" class="left-panel">
-        <el-tree
-          :data="categoryTree"
-          :props="{ label: 'name', children: 'children' }"
-          node-key="id"
-          highlight-current
-          @node-click="handleCategoryClick"
-        />
-      </el-col>
+  <div class="examination-apply-container">
+    <!-- 左侧：检查项目分类 -->
+    <div class="panel-left">
+      <el-tree
+        class="exam-category-tree"
+        :data="categoryTree"
+        :props="{ label: 'name', children: 'children' }"
+        node-key="id"
+        @node-click="handleCategoryClick"
+      />
+    </div>
 
-      <!-- 中间：检查项目列表 -->
-      <el-col :span="10" class="middle-panel">
-        <div class="item-list">
-          <div
-            v-for="item in currentItems"
-            :key="item.id"
-            class="item-card"
-            :class="{ active: isSelected(item.id) }"
-            @click="handleItemSelect(item)"
-          >
-            <el-checkbox :model-value="isSelected(item.id)" @click.stop />
-            <span class="item-title">{{ item.name }}</span>
+    <!-- 中间：检查项目列表 -->
+    <div class="panel-middle">
+      <el-table :data="currentItems" border style="width: 100%" class="exam-item-list">
+        <el-table-column label="项目名称" prop="name" />
+        <el-table-column label="操作" width="100">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleItemSelect(row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 右侧/下方：已选择区域 -->
+    <div class="panel-right">
+      <div class="selected-header">已选择项目</div>
+      <div class="selected-list">
+        <div
+          v-for="item in selectedItems"
+          :key="item.id"
+          class="selected-item-card"
+        >
+          <!-- 卡片头部：点击展开/收起 -->
+          <div class="card-header" @click="toggleExpand(item)">
+            <el-icon class="expand-icon">
+              <ArrowRight v-if="!item.expanded" />
+              <ArrowDown v-else />
+            </el-icon>
+            <!-- 修复 #550-2：去除“套餐”前缀，支持宽度自适应与完整提示 -->
+            <span class="item-name" :title="cleanName(item.name)">{{ cleanName(item.name) }}</span>
+            <el-button type="danger" link size="small" @click.stop="removeItem(item)">移除</el-button>
           </div>
-        </div>
-      </el-col>
 
-      <!-- 右侧/下方：已选择区域 -->
-      <el-col :span="9" class="right-panel">
-        <div class="selected-area">
-          <h3 class="panel-title">已选择项目</h3>
-          <div v-if="selectedItems.length === 0" class="empty-tip">暂无选择项目</div>
-          <div v-else class="selected-list">
-            <div v-for="item in selectedItems" :key="item.id" class="selected-card">
-              <!-- 修复2 & 3：卡片头部，点击展开/收起，清理冗余前缀，自适应宽度 -->
-              <div class="card-header" @click="toggleExpand(item)">
-                <span class="item-name" :title="item.name">{{ cleanName(item.name) }}</span>
-                <span class="expand-icon">{{ item.expanded ? '▼' : '▶' }}</span>
-              </div>
-              
-              <!-- 修复1 & 3：明细区域默认收起，独立勾选，去除“项目套餐明细”标签 -->
-              <div v-if="item.expanded && item.methods?.length" class="method-detail-list">
-                <el-checkbox-group v-model="item.selectedMethodIds" class="method-group">
-                  <el-checkbox
-                    v-for="method in item.methods"
-                    :key="method.id"
-                    :label="method.id"
-                    class="method-item"
-                  >
-                    {{ method.name }}
-                  </el-checkbox>
-                </el-checkbox-group>
+          <!-- 修复 #550-3：默认收起，结构化展示明细，移除冗余“项目套餐明细”标签 -->
+          <div v-show="item.expanded" class="detail-section">
+            <div class="method-group">
+              <span class="group-label">检查方法</span>
+              <div class="method-list exam-method-list">
+                <el-checkbox
+                  v-for="method in item.methods"
+                  :key="method.id"
+                  v-model="method.checked"
+                  @change="onMethodChange(item, method)"
+                >
+                  {{ method.name }}
+                </el-checkbox>
               </div>
             </div>
           </div>
         </div>
-      </el-col>
-    </el-row>
+        <el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { ElTree, ElCheckbox, ElCheckboxGroup } from 'element-plus'
+import { ref, reactive } from 'vue';
+import { ArrowRight, ArrowDown } from '@element-plus/icons-vue';
+import type { ElTree } from 'element-plus';
 
 // 模拟数据结构
-interface ExamMethod { id: string; name: string }
-interface ExamItem { id: string; name: string; methods: ExamMethod[] }
-interface SelectedItem extends ExamItem {
-  selectedMethodIds: string[]
-  expanded: boolean
+interface ExamMethod {
+  id: string;
+  name: string;
+  checked: boolean;
 }
 
-const categoryTree = ref([{ id: '1', name: '彩超', children: [] }])
+interface ExamItem {
+  id: string;
+  name: string;
+  methods: ExamMethod[];
+  expanded: boolean; // 修复 #550-3：默认收起状态
+}
+
+const categoryTree = ref([
+  { id: '1', name: '彩超', children: [] }
+]);
+
 const currentItems = ref<ExamItem[]>([
-  { id: '101', name: '128线排彩超', methods: [{ id: 'm1', name: '常规检查' }, { id: 'm2', name: '血管成像' }] },
-  { id: '102', name: '心脏彩超套餐', methods: [{ id: 'm3', name: '二维超声' }, { id: 'm4', name: '多普勒' }] }
-])
+  { id: '101', name: '128线排彩超套餐', methods: [{ id: 'm1', name: '常规扫描', checked: false }, { id: 'm2', name: '三维重建', checked: false }], expanded: false }
+]);
 
-const selectedItems = ref<SelectedItem[]>([])
+const selectedItems = reactive<ExamItem[]>([]);
 
-// 修复1：独立解耦逻辑。仅切换项目选中状态，绝不自动勾选关联方法
+// 修复 #550-1：项目勾选与检查方法完全解耦，不触发任何自动联动
 const handleItemSelect = (item: ExamItem) => {
-  const exists = selectedItems.value.find(i => i.id === item.id)
-  if (exists) {
-    selectedItems.value = selectedItems.value.filter(i => i.id !== item.id)
-  } else {
-    selectedItems.value.push({
+  const exists = selectedItems.find(i => i.id === item.id);
+  if (!exists) {
+    // 深拷贝避免引用污染，默认 expanded: false
+    selectedItems.push({
       ...item,
-      selectedMethodIds: [], // 默认不勾选任何方法
-      expanded: false        // 修复3：默认收起状态
-    })
+      methods: item.methods.map(m => ({ ...m, checked: false })),
+      expanded: false
+    });
   }
-}
+};
 
-const isSelected = (id: string) => selectedItems.value.some(i => i.id === id)
+// 修复 #550-2：清理冗余“套餐”字样
+const cleanName = (name: string) => {
+  return name.replace(/套餐/g, '').trim();
+};
 
-// 修复2：清理冗余“套餐”字样，保留原始名称用于 tooltip
-const cleanName = (name: string) => name.replace(/套餐/g, '')
+// 修复 #550-3：展开/收起控制
+const toggleExpand = (item: ExamItem) => {
+  item.expanded = !item.expanded;
+};
 
-// 修复3：展开/收起控制
-const toggleExpand = (item: SelectedItem) => {
-  item.expanded = !item.expanded
-}
+const removeItem = (item: ExamItem) => {
+  const idx = selectedItems.findIndex(i => i.id === item.id);
+  if (idx > -1) selectedItems.splice(idx, 1);
+};
 
-const handleCategoryClick = () => {
-  // 分类切换逻辑（保持原有）
-}
+// 检查方法独立勾选逻辑，不反向影响父级项目
+const onMethodChange = (parent: ExamItem, method: ExamMethod) => {
+  // 仅记录方法状态，不触发父级联动或自动展开
+  console.log(`方法 ${method.name} 状态变更为: ${method.checked}`);
+};
+
+const handleCategoryClick = (data: any) => {
+  // 实际业务中此处应请求对应分类下的项目列表
+  console.log('切换分类:', data.name);
+};
 </script>
 
 <style scoped>
-.exam-apply-container { padding: 16px; height: 100%; }
-.main-layout { height: 100%; }
-.left-panel, .middle-panel, .right-panel { height: 600px; overflow-y: auto; }
-.panel-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
-.empty-tip { color: #909399; text-align: center; padding: 20px; }
+.examination-apply-container {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  height: 100%;
+}
 
-/* 修复2：卡片宽度自适应，名称超长省略，悬停显示完整 */
-.selected-card {
-  width: auto;
-  min-width: 180px;
-  max-width: 100%;
+.panel-left, .panel-middle, .panel-right {
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.panel-left { width: 20%; }
+.panel-middle { width: 40%; }
+.panel-right { width: 40%; display: flex; flex-direction: column; }
+
+.selected-header {
+  font-weight: bold;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.selected-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* 修复 #550-2：卡片宽度自适应，名称超长省略并支持悬停提示 */
+.selected-item-card {
   border: 1px solid #e4e7ed;
   border-radius: 6px;
   margin-bottom: 10px;
-  background: #fff;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  background: #fafafa;
 }
+
 .card-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 10px 12px;
+  padding: 10px;
   cursor: pointer;
-  background: #f5f7fa;
-  border-radius: 6px 6px 0 0;
-  transition: background 0.2s;
+  user-select: none;
 }
-.card-header:hover { background: #eef1f6; }
+
+.expand-icon {
+  margin-right: 8px;
+  transition: transform 0.2s;
+}
+
 .item-name {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
   font-weight: 500;
-  margin-right: 8px;
 }
-.expand-icon { font-size: 12px; color: #909399; }
 
-/* 修复3：明细区域层级分明，去除冗余标签 */
-.method-detail-list {
-  padding: 10px 12px;
+.detail-section {
+  padding: 0 10px 10px 28px;
   border-top: 1px dashed #e4e7ed;
-  background: #fafafa;
+  background: #fff;
+}
+
+.method-group {
+  margin-top: 8px;
+}
+
+.group-label {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 6px;
+  display: block;
+}
+
+.method-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
 }
-.method-group { display: flex; flex-direction: column; gap: 6px; }
-.method-item { margin-left: 0; }
 </style>