Fix Bug #550: AI修复

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

@@ -1,146 +1,207 @@
 <template>
-  <div class="examination-apply-container">
-    <el-row :gutter="16" class="main-layout">
-      <!-- 左侧：检查项目分类 -->
-      <el-col :span="6" class="panel category-panel">
-        <h3>检查项目分类</h3>
-        <el-tree
-          :data="categories"
-          :props="{ label: 'name', children: 'children' }"
-          @node-click="handleCategoryClick"
-          highlight-current
-          default-expand-all
-        />
-      </el-col>
+  <div class="examination-apply-wrapper">
+    <!-- 左侧：检查项目分类 -->
+    <div class="panel category-panel">
+      <el-tree
+        :data="categoryTree"
+        :props="{ label: 'name', children: 'children' }"
+        highlight-current
+        @node-click="handleCategorySelect"
+      />
+    </div>
 
-      <!-- 中间：检查项目列表 -->
-      <el-col :span="9" class="panel item-panel">
-        <h3>检查项目</h3>
-        <el-table 
-          :data="currentItems" 
-          @selection-change="handleItemSelectionChange" 
-          style="width: 100%"
-          row-key="id"
+    <!-- 中间：检查项目列表 -->
+    <div class="panel item-panel">
+      <div class="panel-title">检查项目</div>
+      <el-checkbox-group v-model="tempSelectedIds" @change="handleItemToggle">
+        <el-checkbox
+          v-for="item in currentItems"
+          :key="item.id"
+          :label="item.id"
+          class="item-checkbox"
         >
-          <el-table-column type="selection" width="55" />
-          <el-table-column prop="name" label="项目名称" show-overflow-tooltip />
-          <el-table-column prop="code" label="编码" width="100" />
-        </el-table>
-      </el-col>
+          {{ cleanPackageName(item.name) }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
 
-      <!-- 右侧：已选择 & 检查方法/明细 -->
-      <el-col :span="9" class="panel selected-panel">
-        <h3>已选择项目</h3>
-        <div class="selected-list">
-          <div
-            v-for="item in selectedItems"
-            :key="item.id"
-            class="selected-item-card"
-            @click.stop="toggleExpand(item.id)"
+    <!-- 右侧：已选择区域 -->
+    <div class="panel selected-panel">
+      <div class="panel-title">已选择</div>
+      <div v-if="selectedItems.length === 0" class="empty-tip">暂无选择项目</div>
+      <div
+        v-for="item in selectedItems"
+        :key="item.id"
+        class="selected-card"
+      >
+        <!-- 卡片头部：名称自适应 + 展开收起控制 -->
+        <div class="card-header" @click="toggleDetail(item)">
+          <el-tooltip
+            :content="cleanPackageName(item.name)"
+            placement="top"
+            :disabled="!isNameOverflow(item.name)"
           >
-            <div class="card-header">
-              <el-tooltip :content="cleanName(item.name)" placement="top" :show-after="300">
-                <span class="item-name">{{ cleanName(item.name) }}</span>
-              </el-tooltip>
-              <el-icon class="expand-icon" :class="{ 'is-expanded': item.expanded }">
-                <ArrowDown />
-              </el-icon>
-            </div>
-
-            <transition name="slide-fade">
-              <div v-if="item.expanded" class="method-detail-list">
-                <div class="hierarchy-path">检查项目 &gt; 检查方法</div>
-                <el-checkbox-group 
-                  v-model="item.selectedMethods" 
-                  @change="handleMethodChange(item)"
-                  class="method-group"
-                >
-                  <el-checkbox 
-                    v-for="method in item.methods" 
-                    :key="method.id" 
-                    :label="method.id"
-                    @click.stop
-                  >
-                    {{ method.name }}
-                  </el-checkbox>
-                </el-checkbox-group>
-              </div>
-            </transition>
-          </div>
-          <el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
+            <span class="item-name" :title="cleanPackageName(item.name)">
+              {{ cleanPackageName(item.name) }}
+            </span>
+          </el-tooltip>
+          <el-icon class="expand-icon">
+            <ArrowDown v-if="item.expanded" />
+            <ArrowRight v-else />
+          </el-icon>
         </div>
-      </el-col>
-    </el-row>
+
+        <!-- 明细区域：默认收起，严格遵循 项目 > 检查方法 层级 -->
+        <div v-show="item.expanded" class="details-section">
+          <div class="method-group">
+            <span class="group-label">检查方法</span>
+            <el-checkbox-group v-model="item.selectedMethods" @change="handleMethodChange(item)">
+              <el-checkbox
+                v-for="method in item.methods"
+                :key="method.id"
+                :label="method.id"
+                class="method-checkbox"
+              >
+                {{ method.name }}
+              </el-checkbox>
+            </el-checkbox-group>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue';
-import { ArrowDown } from '@element-plus/icons-vue';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
+import type { ElTree } from 'element-plus';
 
-const categories = ref([]);
-const currentItems = ref([]);
-const selectedItems = ref([]);
+// 类型定义
+interface ExamMethod { id: string; name: string; }
+interface ExamItem { id: string; name: string; methods: ExamMethod[]; }
+interface SelectedItem extends ExamItem {
+  selectedMethods: string[];
+  expanded: boolean;
+}
 
-const handleCategoryClick = (node) => {
-  // 实际业务中此处应调用 API 获取分类下的项目列表
-  currentItems.value = node.children || [];
+// 状态管理
+const categoryTree = ref<any[]>([]);
+const currentItems = ref<ExamItem[]>([]);
+const tempSelectedIds = ref<string[]>([]);
+const selectedItems = ref<SelectedItem[]>([]);
+
+// 核心修复1：清理冗余“套餐”字样
+const cleanPackageName = (name: string) => name.replace(/套餐/g, '').trim();
+
+// 核心修复2：名称是否溢出判断（用于 Tooltip 触发）
+const isNameOverflow = (name: string) => cleanPackageName(name).length > 12;
+
+// 分类切换
+const handleCategorySelect = (data: any) => {
+  currentItems.value = data.items || [];
+  tempSelectedIds.value = selectedItems.value.map(i => i.id);
 };
 
-const handleItemSelectionChange = (rows) => {
-  const currentIds = new Set(rows.map(r => r.id));
-  
-  // 移除未勾选的项目
-  selectedItems.value = selectedItems.value.filter(item => currentIds.has(item.id));
-  
-  // 新增勾选的项目，严格解耦：默认不勾选方法，默认收起明细
-  rows.forEach(row => {
-    if (!selectedItems.value.find(i => i.id === row.id)) {
+// 核心修复3：项目勾选与检查方法完全解耦
+const handleItemToggle = (ids: string[]) => {
+  const addedIds = ids.filter(id => !selectedItems.value.some(i => i.id === id));
+  const removedIds = selectedItems.value.filter(i => !ids.includes(i.id)).map(i => i.id);
+
+  // 新增项目：独立初始化，不联动任何方法
+  addedIds.forEach(id => {
+    const item = currentItems.value.find(i => i.id === id);
+    if (item) {
       selectedItems.value.push({
-        id: row.id,
-        name: row.name,
-        methods: row.methods || [],
-        selectedMethods: [], // 修复 Bug #550-1：独立解耦，禁止自动联动勾选
-        expanded: false      // 修复 Bug #550-3：默认收起状态
+        ...item,
+        selectedMethods: [], // 默认不勾选方法
+        expanded: false      // 默认收起明细
       });
     }
   });
+
+  // 移除项目
+  selectedItems.value = selectedItems.value.filter(i => !removedIds.includes(i.id));
 };
 
-const cleanName = (name) => {
-  // 修复 Bug #550-2：清理冗余“套餐”字样，保留核心名称
-  return name ? name.replace(/套餐/g, '').trim() : '';
+// 展开/收起明细
+const toggleDetail = (item: SelectedItem) => {
+  item.expanded = !item.expanded;
 };
 
-const toggleExpand = (id) => {
-  const item = selectedItems.value.find(i => i.id === id);
-  if (item) item.expanded = !item.expanded;
-};
-
-const handleMethodChange = (item) => {
-  // 修复 Bug #550-1：仅维护当前项目下的方法勾选状态，不向上/向下触发联动
-  // 可在此处扩展：如根据 selectedMethods 计算预估费用、校验必填项等
+// 方法勾选独立处理（仅更新当前项目下的方法状态）
+const handleMethodChange = (item: SelectedItem) => {
+  // 此处可触发后续业务逻辑（如价格计算、校验等），与项目勾选状态无关
+  console.log(`项目 ${item.name} 方法变更:`, item.selectedMethods);
 };
 </script>
 
 <style scoped>
-.examination-apply-container { padding: 16px; }
-.main-layout { height: calc(100vh - 100px); }
-.panel { height: 100%; overflow-y: auto; background: #fff; padding: 12px; border-radius: 4px; box-sizing: border-box; }
-.panel h3 { margin: 0 0 12px; font-size: 16px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
-.selected-list { display: flex; flex-direction: column; gap: 10px; }
-.selected-item-card {
-  border: 1px solid #dcdfe6; border-radius: 6px; padding: 10px; cursor: pointer;
-  transition: all 0.2s; background: #fafafa;
+.examination-apply-wrapper {
+  display: flex;
+  gap: 16px;
+  height: 600px;
+  padding: 16px;
+  background: #fff;
+}
+.panel {
+  flex: 1;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 12px;
+  overflow-y: auto;
+}
+.panel-title {
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: #303133;
+}
+.item-checkbox, .method-checkbox {
+  display: block;
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+.selected-card {
+  border: 1px solid #dcdfe6;
+  border-radius: 6px;
+  margin-bottom: 10px;
+  background: #fafafa;
+  transition: all 0.2s;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  color: #303133;
+}
+.expand-icon {
+  margin-left: 8px;
+  color: #909399;
+}
+.details-section {
+  padding: 0 12px 12px;
+  border-top: 1px dashed #e4e7ed;
+  background: #fff;
+}
+.group-label {
+  display: block;
+  font-size: 12px;
+  color: #606266;
+  margin-bottom: 6px;
+}
+.empty-tip {
+  text-align: center;
+  color: #909399;
+  padding: 40px 0;
 }
-.selected-item-card:hover { border-color: #409eff; background: #f0f7ff; }
-.card-header { display: flex; justify-content: space-between; align-items: center; }
-.item-name { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.expand-icon { transition: transform 0.3s; }
-.expand-icon.is-expanded { transform: rotate(180deg); }
-.method-detail-list { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #eee; }
-.hierarchy-path { font-size: 12px; color: #909399; margin-bottom: 6px; }
-.method-group { display: flex; flex-direction: column; gap: 4px; }
-.slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.3s ease; }
-.slide-fade-enter-from, .slide-fade-leave-to { opacity: 0; transform: translateY(-10px); }
 </style>