From a307908c00afa4ec068cb5c776fd6fe49b967050 Mon Sep 17 00:00:00 2001
From: zhaoyun <zhaoyun@gentronhealth.com>
Date: Wed, 27 May 2026 01:13:36 +0800
Subject: [PATCH] =?UTF-8?q?Fix=20Bug=20#550:=20AI=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../examination/ExaminationApply.vue          | 201 ++++++++++++++++++
 1 file changed, 201 insertions(+)
 create mode 100644 openhis-ui-vue3/src/views/outpatient/examination/ExaminationApply.vue

diff --git a/openhis-ui-vue3/src/views/outpatient/examination/ExaminationApply.vue b/openhis-ui-vue3/src/views/outpatient/examination/ExaminationApply.vue
new file mode 100644
index 000000000..c8aa74374
--- /dev/null
+++ b/openhis-ui-vue3/src/views/outpatient/examination/ExaminationApply.vue
@@ -0,0 +1,201 @@
+<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>
+
+      <!-- 中间：检查项目列表 -->
+      <el-col :span="9" class="panel item-panel">
+        <h3>检查项目</h3>
+        <el-table 
+          :data="currentItems" 
+          @selection-change="handleItemSelectionChange" 
+          style="width: 100%"
+          row-key="id"
+        >
+          <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>
+
+      <!-- 右侧：已选择 & 检查方法/明细 -->
+      <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="card-header">
+              <!-- 修复 Bug #550-2：去掉“套餐”前缀，支持宽度自适应与完整名称提示 -->
+              <el-tooltip :content="item.name" placement="top" :show-after="300">
+                <span class="item-name">{{ item.name }}</span>
+              </el-tooltip>
+              <el-icon class="expand-icon" :class="{ 'is-expanded': item.expanded }">
+                <ArrowDown />
+              </el-icon>
+            </div>
+
+            <!-- 修复 Bug #550-3：结构化展示，默认收起，点击展开查看明细 -->
+            <transition name="slide-fade">
+              <div v-if="item.expanded" class="method-detail-list">
+                <div class="hierarchy-path">检查项目 &gt; 检查方法</div>
+                <!-- 修复 Bug #550-1：项目与方法解耦，独立维护勾选状态 -->
+                <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"
+                    class="method-checkbox"
+                  >
+                    {{ method.name }}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
+            </transition>
+          </div>
+          <el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ArrowDown } from '@element-plus/icons-vue'
+
+// 模拟分类数据
+const categories = ref([
+  { id: 1, name: '彩超', children: [] },
+  { id: 2, name: 'CT', children: [] }
+])
+
+// 模拟当前分类下的项目数据
+const currentItems = ref([
+  { id: 101, name: '128线排彩超检查', code: 'US128', methods: [
+    { id: 'm1', name: '常规扫描' },
+    { id: 'm2', name: '增强扫描' }
+  ]},
+  { id: 102, name: '腹部彩超', code: 'US001', methods: [
+    { id: 'm3', name: '平扫' }
+  ]}
+])
+
+// 已选项目状态池
+const selectedItems = ref([])
+
+/**
+ * 修复 Bug #550-1：联动冲突解耦
+ * 中间表格勾选仅同步“项目”维度，绝不自动触发“检查方法”勾选。
+ * 方法勾选完全由右侧独立交互控制。
+ */
+const handleItemSelectionChange = (selection) => {
+  const newSelected = selection.map(item => {
+    const existing = selectedItems.value.find(s => s.id === item.id)
+    // 若已存在则保留其方法勾选状态，否则初始化空数组与收起状态
+    return existing || {
+      ...item,
+      selectedMethods: [],
+      expanded: false
+    }
+  })
+  // 移除未勾选的项目（保持数据纯净）
+  selectedItems.value = newSelected
+}
+
+/**
+ * 修复 Bug #550-3：默认收起，点击切换展开/收起
+ */
+const toggleExpand = (itemId) => {
+  const item = selectedItems.value.find(i => i.id === itemId)
+  if (item) item.expanded = !item.expanded
+}
+
+/**
+ * 修复 Bug #550-1：方法独立变更事件
+ * 仅更新当前 item 的 selectedMethods，不向上冒泡或影响其他项目
+ */
+const handleMethodChange = (item) => {
+  // 实际业务中可在此处同步至后端或计算总价
+  console.log(`[解耦] 项目 ${item.name} 方法变更:`, item.selectedMethods)
+}
+
+const handleCategoryClick = (data) => {
+  // 实际项目中此处会请求对应分类下的项目列表并更新 currentItems
+  console.log('切换分类:', data.name)
+}
+</script>
+
+<style scoped>
+.examination-apply-container { padding: 16px; height: 100%; }
+.main-layout { height: calc(100vh - 140px); }
+.panel { 
+  background: #fff; 
+  padding: 12px; 
+  border-radius: 8px; 
+  height: 100%; 
+  overflow: hidden; 
+  display: flex; 
+  flex-direction: column; 
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+.panel h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #eee; padding-bottom: 8px; }
+.selected-list { flex: 1; overflow-y: auto; padding-right: 4px; }
+
+/* 修复 Bug #550-2：卡片宽度自适应，悬停高亮 */
+.selected-item-card {
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  padding: 10px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: #fafafa;
+  width: 100%;
+  box-sizing: border-box;
+}
+.selected-item-card:hover { border-color: #409eff; background: #f0f9ff; }
+
+.card-header { display: flex; justify-content: space-between; align-items: center; }
+
+/* 修复 Bug #550-2：文本溢出省略，保留完整 title 提示 */
+.item-name {
+  font-weight: 500;
+  max-width: 85%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  color: #303133;
+}
+
+.expand-icon { transition: transform 0.3s; color: #909399; }
+.expand-icon.is-expanded { transform: rotate(180deg); }
+
+/* 修复 Bug #550-3：明细区域层级样式 */
+.method-detail-list { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #dcdfe6; }
+.hierarchy-path { font-size: 12px; color: #909399; margin-bottom: 8px; font-weight: 500; }
+.method-group { display: flex; flex-direction: column; gap: 4px; }
+.method-checkbox { margin-left: 0; }
+
+/* 展开收起动画 */
+.slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.25s ease; }
+.slide-fade-enter-from, .slide-fade-leave-to { opacity: 0; transform: translateY(-6px); }
+</style>