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

<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>

      <!-- 中间：检查项目列表 -->
      <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>

      <!-- 右侧：已选择区域 -->
      <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="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="暂无已选项目" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';

const categoryTree = ref([]);
const projectList = ref([]);
const selectedProjects = ref([]);

const defaultProps = { children: 'children', label: 'name' };

// 分类点击加载项目
const onCategoryClick = (data) => {
  projectList.value = data.projects || [];
};

// 项目勾选联动：仅更新已选列表，**不**自动勾选检查方法（解耦核心）
const onProjectSelectionChange = (selection) => {
  selectedProjects.value = selection.map(item => ({
    ...item,
    showDetail: false, // 默认收起
    methodChecked: item.methodChecked || false, // 保持方法独立状态
    details: item.details || []
  }));
};

// 检查方法独立切换
const onMethodChange = (row) => {
  const target = selectedProjects.value.find(p => p.id === row.id);
  if (target) {
    target.methodChecked = row.methodChecked;
  }
};

// 展开/收起卡片详情
const toggleCardDetail = (item) => {
  item.showDetail = !item.showDetail;
};

// 格式化名称：去除“套餐”前缀，支持完整显示
const formatItemName = (item) => {
  let name = item.name || '';
  if (name.startsWith('套餐')) {
    name = name.substring(2);
  }
  return name;
};
</script>

<style scoped>
.examination-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.mb-4 { margin-bottom: 20px; }

.selected-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 5px;
}

.selected-item-card {
  width: 100%;
}

.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;
}

.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;
}
</style>