Fix Bug #550: fallback修复

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

@@ -1,200 +1,194 @@
 <template>
-  <div class="examination-container">
-    <el-row :gutter="20">
-      <!-- 左侧：检查项目分类 -->
-      <el-col :span="6">
-        <el-card header="检查项目分类" class="mb-4">
-          <el-tree
-            :data="categoryTree"
-            node-key="id"
-            :props="defaultProps"
-            @node-click="onCategoryClick"
-            highlight-current
-          />
-        </el-card>
-      </el-col>
+  <div class="examination-page">
+    <!-- 检查项目分类树 -->
+    <el-tree
+      :data="categoryTree"
+      node-key="id"
+      :props="defaultProps"
+      @node-click="onCategoryClick"
+      highlight-current
+    >
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ data.name }}</span>
+      </span>
+    </el-tree>
 
-      <!-- 中间：检查项目列表 -->
-      <el-col :span="10">
-        <el-card header="检查项目列表" class="mb-4">
-          <el-table
-            :data="projectList"
-            @selection-change="onProjectSelectionChange"
-            border
-            style="width: 100%"
-          >
-            <el-table-column type="selection" width="55" />
-            <el-table-column prop="name" label="检查项目" show-overflow-tooltip />
-            <el-table-column label="检查方法" width="120">
-              <template #default="{ row }">
-                <!-- 独立复选框，不随项目勾选联动 -->
-                <el-checkbox
-                  v-model="row.methodChecked"
-                  @change="onMethodChange(row)"
-                  class="exam-method-checkbox"
-                />
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
+    <!-- 检查项目列表 -->
+    <div class="exam-item-list" v-if="selectedCategory">
+      <el-checkbox-group v-model="checkedItems">
+        <el-checkbox
+          v-for="item in examItems"
+          :key="item.id"
+          :label="item.id"
+          class="exam-item-checkbox"
+        >
+          {{ item.name }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
 
-      <!-- 右侧：已选择区域 -->
-      <el-col :span="8">
-        <el-card header="已选择" class="mb-4">
-          <div class="selected-items">
-            <el-card
-              v-for="item in selectedProjects"
-              :key="item.id"
-              class="selected-item-card"
-              shadow="hover"
+    <!-- 已选检查项目卡片区 -->
+    <div class="selected-items">
+      <el-card
+        v-for="item in selectedItems"
+        :key="item.id"
+        class="selected-item-card"
+      >
+        <div class="card-header" @click="toggleDetail(item)">
+          <span class="item-name">{{ item.name }}</span>
+          <el-icon :class="{ 'rotate': !item.detailCollapsed }">
+            <arrow-down />
+          </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"
             >
-              <div class="card-header" @click="toggleCardDetail(item)">
-                <span class="item-name" :title="formatItemName(item)">
-                  {{ formatItemName(item) }}
-                </span>
-                <el-icon :class="{ 'rotate': item.showDetail }">
-                  <arrow-down />
-                </el-icon>
-              </div>
-
-              <!-- 详情区默认收起 -->
-              <div class="card-detail" v-show="item.showDetail">
-                <p class="hierarchy-tip">检查项目 > 检查方法</p>
-                
-                <!-- 仅展示已勾选的检查方法 -->
-                <div v-if="item.methodChecked" class="method-item">
-                  <el-checkbox v-model="item.methodChecked" disabled>已选检查方法</el-checkbox>
-                </div>
-
-                <!-- 结构化明细展示，移除冗余“项目套餐明细”标签 -->
-                <ul v-if="item.details && item.details.length" class="detail-list">
-                  <li v-for="(detail, idx) in item.details" :key="idx">{{ detail }}</li>
-                </ul>
-              </div>
-            </el-card>
-            <el-empty v-if="selectedProjects.length === 0" description="暂无已选项目" />
+              检查方法
+            </el-checkbox>
           </div>
-        </el-card>
-      </el-col>
-    </el-row>
+
+          <!-- 这里可以放置其他详情信息，确保不出现“项目套餐明细”等冗余标签 -->
+          <div class="detail-content">
+            <!-- 示例：显示项目编码或说明 -->
+            <p>编码：{{ item.code }}</p>
+            <p>说明：{{ item.description }}</p>
+          </div>
+        </div>
+      </el-card>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
+import { getExamCategoryTree, getExamItemsByCategory } from '@/api/outpatient/examination';
 
+// ---------------------------
+// 数据定义
+// ---------------------------
 const categoryTree = ref([]);
-const projectList = ref([]);
-const selectedProjects = ref([]);
-
-const defaultProps = { children: 'children', label: 'name' };
-
-// 分类点击加载项目
-const onCategoryClick = (data) => {
-  projectList.value = data.projects || [];
+const defaultProps = {
+  children: 'children',
+  label: 'name',
 };
 
-// 项目勾选联动：仅更新已选列表，**不**自动勾选检查方法（解耦核心）
-const onProjectSelectionChange = (selection) => {
-  selectedProjects.value = selection.map(item => ({
-    ...item,
-    showDetail: false, // 默认收起
-    methodChecked: item.methodChecked || false, // 保持方法独立状态
-    details: item.details || []
-  }));
-};
+const selectedCategory = ref(null);
+const examItems = ref([]); // 当前分类下的检查项目
+const checkedItems = ref([]); // 选中的项目 ID（仅用于 UI 勾选展示）
 
-// 检查方法独立切换
-const onMethodChange = (row) => {
-  const target = selectedProjects.value.find(p => p.id === row.id);
-  if (target) {
-    target.methodChecked = row.methodChecked;
-  }
-};
+// 已选项目的完整信息，包含展开/收起状态、方法勾选状态等
+const selectedItems = ref([]);
 
-// 展开/收起卡片详情
-const toggleCardDetail = (item) => {
-  item.showDetail = !item.showDetail;
-};
+// ---------------------------
+// 初始化分类树
+// ---------------------------
+getExamCategoryTree().then(res => {
+  categoryTree.value = res.data;
+});
 
-// 格式化名称：去除“套餐”前缀，支持完整显示
-const formatItemName = (item) => {
-  let name = item.name || '';
-  if (name.startsWith('套餐')) {
-    name = name.substring(2);
-  }
-  return name;
-};
+// ---------------------------
+// 分类点击处理
+// ---------------------------
+function onCategoryClick(nodeData) {
+  selectedCategory.value = nodeData;
+  // 加载该分类下的检查项目
+  getExamItemsByCategory(nodeData.id).then(res => {
+    examItems.value = res.data;
+    // 清空之前的勾选，防止跨分类残留
+    checkedItems.value = [];
+  });
+}
+
+// ---------------------------
+// 监听项目勾选变化 → 更新已选卡片列表
+// ---------------------------
+watch(
+  checkedItems,
+  (newVals) => {
+    // 只保留当前已勾选的项目，去重
+    const newSelected = newVals.map(id => {
+      const src = examItems.value.find(i => i.id === id);
+      return {
+        id: src.id,
+        name: src.name,               // 直接使用项目名称，不添加任何前缀
+        code: src.code,
+        description: src.description,
+        detailCollapsed: true,        // 默认收起
+        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 }
+);
+
+// ---------------------------
+// 卡片展开/收起切换
+// ---------------------------
+function toggleDetail(item) {
+  item.detailCollapsed = !item.detailCollapsed;
+}
 </script>
 
 <style scoped>
-.examination-container {
+.examination-page {
   padding: 20px;
-  background-color: #f5f7fa;
-  min-height: 100vh;
 }
-.mb-4 { margin-bottom: 20px; }
-
+.exam-item-list {
+  margin-top: 20px;
+}
 .selected-items {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: 500px;
-  overflow-y: auto;
-  padding-right: 5px;
+  margin-top: 30px;
 }
-
 .selected-item-card {
-  width: 100%;
+  margin-bottom: 15px;
 }
-
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  padding: 8px 0;
-  user-select: none;
 }
-
 .item-name {
   font-weight: 600;
-  font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 85%;
 }
-
-.rotate {
-  transform: rotate(180deg);
-  transition: transform 0.3s ease;
-}
-
 .card-detail {
   margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px dashed #e4e7ed;
-  font-size: 13px;
+  padding-left: 10px;
 }
-
 .hierarchy-tip {
-  font-size: 12px;
   color: #909399;
-  margin: 0 0 8px 0;
-  font-weight: 500;
-}
-
-.method-item {
   margin-bottom: 8px;
-  padding-left: 4px;
 }
-
-.detail-list {
-  padding-left: 20px;
-  margin: 0;
-  color: #606266;
+.rotate {
+  transform: rotate(180deg);
 }
 </style>