Fix Bug #550: fallback修复

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

@@ -0,0 +1,157 @@
+<template>
+  <div class="examination-container">
+    <!-- 检查项目分类树 -->
+    <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-table
+      :data="projectList"
+      style="width: 100%; margin-top: 20px"
+      @selection-change="onProjectSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="name" label="检查项目" />
+      <el-table-column label="检查方法">
+        <!-- 这里的复选框只负责方法本身的勾选，**不**随项目自动勾选 -->
+        <template #default="{ row }">
+          <el-checkbox
+            v-model="row.methodChecked"
+            @change="onMethodChange(row)"
+            class="exam-method-checkbox"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 已选项目卡片区 -->
+    <div class="selected-items" style="margin-top: 20px">
+      <el-card
+        v-for="item in selectedProjects"
+        :key="item.id"
+        class="selected-item-card"
+        shadow="hover"
+      >
+        <div class="card-header" @click="toggleCardDetail(item)">
+          <span class="item-name">{{ 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">
+            <el-tag type="success">已选方法</el-tag>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { ArrowDown } from '@element-plus/icons-vue';
+import request from '@/utils/request';
+
+// 分类树、项目列表等数据
+const categoryTree = ref([]);
+const projectList = ref([]);
+
+// 已选项目（去除套餐前缀、解耦检查方法勾选）
+const selectedProjects = ref([]);
+
+// 加载分类树
+request.get('/api/outpatient/exam/categories').then(res => {
+  categoryTree.value = res.data;
+});
+
+// 分类点击后加载对应检查项目
+function onCategoryClick(node) {
+  request
+    .get('/api/outpatient/exam/projects', { params: { categoryId: node.id } })
+    .then(res => {
+      // 为每条记录添加 UI 状态字段，避免业务数据被污染
+      projectList.value = res.data.map(p => ({
+        ...p,
+        methodChecked: false, // 检查方法默认不勾选
+      }));
+    });
+}
+
+// 项目勾选（仅记录项目本身，不自动勾选检查方法）
+function onProjectSelectionChange(selection) {
+  // 只保留项目本身，方法勾选状态保持独立
+  selectedProjects.value = selection.map(item => ({
+    ...item,
+    methodChecked: item.methodChecked || false,
+    showDetail: false, // 默认收起
+  }));
+}
+
+// 检查方法勾选变化时，同步到已选卡片的状态
+function onMethodChange(row) {
+  const target = selectedProjects.value.find(p => p.id === row.id);
+  if (target) {
+    target.methodChecked = row.methodChecked;
+  }
+}
+
+// 卡片展开/收起
+function toggleCardDetail(item) {
+  item.showDetail = !item.showDetail;
+}
+
+// 格式化显示名称：去掉“套餐”前缀，确保完整名称展示
+function formatItemName(item) {
+  // 有的后端会在名称前加 “套餐”，这里统一去除
+  return item.name.replace(/^套餐\s*/, '');
+}
+</script>
+
+<style scoped>
+.examination-container {
+  padding: 20px;
+}
+.custom-tree-node {
+  font-size: 14px;
+}
+.selected-item-card {
+  margin-bottom: 10px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+.card-detail {
+  margin-top: 10px;
+  color: #606266;
+}
+.rotate {
+  transform: rotate(180deg);
+}
+.hierarchy-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 5px;
+}
+</style>