Fix Bug #550: AI修复

openhis-ui-vue3/src/views/outpatient/doctor/Examination.vue

@@ -1,194 +1,118 @@
 <template>
   <div class="examination-page">
-    <!-- 检查项目分类树 -->
+    <div class="exam-layout">
-    <el-tree
+      <!-- 左侧：检查项目分类 -->
-      :data="categoryTree"
+      <div class="panel category-panel">
-      node-key="id"
+        <el-tree
-      :props="defaultProps"
+          :data="categoryTree"
-      @node-click="onCategoryClick"
+          node-key="id"
-      highlight-current
+          :props="defaultProps"
-    >
+          @node-click="handleCategoryClick"
-      <span class="custom-tree-node" slot-scope="{ node, data }">
+          highlight-current
-        <span>{{ data.name }}</span>
+        />
-      </span>
+      </div>
-    </el-tree>
 
-    <!-- 检查项目列表 -->
+      <!-- 中间：检查项目列表 -->
-    <div class="exam-item-list" v-if="selectedCategory">
+      <div class="panel item-panel">
-      <el-checkbox-group v-model="checkedItems">
+        <el-checkbox-group v-model="checkedIds" @change="syncSelectedItems">
-        <el-checkbox
+          <el-checkbox v-for="item in currentItems" :key="item.id" :label="item.id">
-          v-for="item in examItems"
+            {{ cleanName(item.name) }}
-          :key="item.id"
+          </el-checkbox>
-          :label="item.id"
+        </el-checkbox-group>
-          class="exam-item-checkbox"
+      </div>
-        >
-          {{ item.name }}
-        </el-checkbox>
-      </el-checkbox-group>
-    </div>
 
-    <!-- 已选检查项目卡片区 -->
+      <!-- 右侧：已选项目卡片 -->
-    <div class="selected-items">
+      <div class="panel selected-panel">
-      <el-card
+        <div class="selected-list">
-        v-for="item in selectedItems"
+          <el-card
-        :key="item.id"
+            v-for="item in selectedItems"
-        class="selected-item-card"
+            :key="item.id"
-      >
+            class="selected-item-card"
-        <div class="card-header" @click="toggleDetail(item)">
+            shadow="never"
-          <span class="item-name">{{ item.name }}</span>
+          >
-          <el-icon :class="{ 'rotate': !item.detailCollapsed }">
+            <div class="card-header" @click="toggleDetail(item)">
-            <arrow-down />
+              <span class="item-name" :title="item.displayName">{{ item.displayName }}</span>
-          </el-icon>
+              <el-icon :class="{ 'is-rotate': !item.detailCollapsed }">
+                <ArrowDown />
+              </el-icon>
+            </div>
+
+            <div class="card-detail" v-show="!item.detailCollapsed">
+              <div class="hierarchy-tip">检查项目 > 检查方法</div>
+              <div class="exam-method-checkbox">
+                <el-checkbox
+                  v-model="item.methodChecked"
+                  :true-label="1"
+                  :false-label="0"
+                >
+                  检查方法
+                </el-checkbox>
+              </div>
+            </div>
+          </el-card>
         </div>
-
+      </div>
-        <!-- 检查方法（勾选框）与层级提示 -->
-        <div class="card-detail" v-show="!item.detailCollapsed">
-          <div class="hierarchy-tip">检查项目 > 检查方法</div>
-
-          <!-- 检查方法复选框，**不**随项目自动勾选 -->
-          <div class="exam-method-checkbox">
-            <el-checkbox
-              v-model="item.methodChecked"
-              :true-label="1"
-              :false-label="0"
-            >
-              检查方法
-            </el-checkbox>
-          </div>
-
-          <!-- 这里可以放置其他详情信息，确保不出现“项目套餐明细”等冗余标签 -->
-          <div class="detail-content">
-            <!-- 示例：显示项目编码或说明 -->
-            <p>编码：{{ item.code }}</p>
-            <p>说明：{{ item.description }}</p>
-          </div>
-        </div>
-      </el-card>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref } from 'vue'
-import { ArrowDown } from '@element-plus/icons-vue';
+import { ArrowDown } from '@element-plus/icons-vue'
-import { getExamCategoryTree, getExamItemsByCategory } from '@/api/outpatient/examination';
 
-// ---------------------------
+const categoryTree = ref([])
-// 数据定义
+const defaultProps = { children: 'children', label: 'name' }
-// ---------------------------
+const currentItems = ref([])
-const categoryTree = ref([]);
+const checkedIds = ref([])
-const defaultProps = {
+const selectedItems = ref([])
-  children: 'children',
-  label: 'name',
-};
 
-const selectedCategory = ref(null);
+// 清理冗余“套餐”字样
-const examItems = ref([]); // 当前分类下的检查项目
+const cleanName = (name) => name ? name.replace(/套餐/g, '') : ''
-const checkedItems = ref([]); // 选中的项目 ID（仅用于 UI 勾选展示）
 
-// 已选项目的完整信息，包含展开/收起状态、方法勾选状态等
+const handleCategoryClick = (data) => {
-const selectedItems = ref([]);
+  // 实际项目中此处应调用 API 获取项目列表
-
+  currentItems.value = data.children || []
-// ---------------------------
+  checkedIds.value = []
-// 初始化分类树
-// ---------------------------
-getExamCategoryTree().then(res => {
-  categoryTree.value = res.data;
-});
-
-// ---------------------------
-// 分类点击处理
-// ---------------------------
-function onCategoryClick(nodeData) {
-  selectedCategory.value = nodeData;
-  // 加载该分类下的检查项目
-  getExamItemsByCategory(nodeData.id).then(res => {
-    examItems.value = res.data;
-    // 清空之前的勾选，防止跨分类残留
-    checkedItems.value = [];
-  });
 }
 
-// ---------------------------
+// 核心解耦逻辑：仅同步项目勾选状态，绝不自动联动检查方法
-// 监听项目勾选变化 → 更新已选卡片列表
+const syncSelectedItems = (newCheckedIds) => {
-// ---------------------------
+  const updated = []
-watch(
+  for (const id of newCheckedIds) {
-  checkedItems,
+    const existing = selectedItems.value.find(i => i.id === id)
-  (newVals) => {
+    if (existing) {
-    // 只保留当前已勾选的项目，去重
+      updated.push(existing)
-    const newSelected = newVals.map(id => {
+    } else {
-      const src = examItems.value.find(i => i.id === id);
+      const raw = currentItems.value.find(i => i.id === id)
-      return {
+      if (raw) {
-        id: src.id,
+        updated.push({
-        name: src.name,               // 直接使用项目名称，不添加任何前缀
+          id: raw.id,
-        code: src.code,
+          name: raw.name,
-        description: src.description,
+          displayName: cleanName(raw.name),
-        detailCollapsed: true,        // 默认收起
+          detailCollapsed: true, // 默认收起明细
-        methodChecked: 0,             // 检查方法默认未勾选，且与项目勾选解耦
+          methodChecked: 0       // 默认不勾选，与父项目完全解耦
-      };
+        })
-    });
-
-    // 合并已有的展开状态（如果用户已经展开了某卡片）
-    selectedItems.value = selectedItems.value
-      .filter(item => newVals.includes(item.id))
-      .map(item => {
-        const fresh = newSelected.find(i => i.id === item.id);
-        return {
-          ...fresh,
-          detailCollapsed: item.detailCollapsed,
-          methodChecked: item.methodChecked,
-        };
-      });
-
-    // 添加新选中的项目（未在列表中的）
-    newSelected.forEach(item => {
-      if (!selectedItems.value.some(i => i.id === item.id)) {
-        selectedItems.value.push(item);
       }
-    });
+    }
-  },
+  }
-  { deep: true }
+  selectedItems.value = updated
-);
+}
 
-// ---------------------------
+const toggleDetail = (item) => {
-// 卡片展开/收起切换
+  item.detailCollapsed = !item.detailCollapsed
-// ---------------------------
-function toggleDetail(item) {
-  item.detailCollapsed = !item.detailCollapsed;
 }
 </script>
 
 <style scoped>
-.examination-page {
+.examination-page { height: 100%; padding: 12px; box-sizing: border-box; }
-  padding: 20px;
+.exam-layout { display: flex; gap: 12px; height: 100%; }
-}
+.panel { flex: 1; border: 1px solid #ebeef5; border-radius: 4px; padding: 10px; overflow-y: auto; background: #fff; }
-.exam-item-list {
+.selected-item-card { margin-bottom: 10px; cursor: pointer; transition: box-shadow 0.2s; }
-  margin-top: 20px;
+.selected-item-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
-}
+.card-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
-.selected-items {
+.item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; margin-right: 8px; }
-  margin-top: 30px;
+.is-rotate { transform: rotate(180deg); transition: transform 0.2s ease; }
-}
+.card-detail { padding-top: 8px; border-top: 1px dashed #e4e7ed; margin-top: 8px; }
-.selected-item-card {
+.hierarchy-tip { font-size: 12px; color: #909399; margin-bottom: 6px; }
-  margin-bottom: 15px;
+.exam-method-checkbox { margin-left: 4px; }
-}
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-}
-.item-name {
-  font-weight: 600;
-}
-.card-detail {
-  margin-top: 10px;
-  padding-left: 10px;
-}
-.hierarchy-tip {
-  color: #909399;
-  margin-bottom: 8px;
-}
-.rotate {
-  transform: rotate(180deg);
-}
 </style>