From 6039e8184ca2147d092dd9031b384695e3ea6381 Mon Sep 17 00:00:00 2001
From: zhaoyun <zhaoyun@gentronhealth.com>
Date: Wed, 27 May 2026 03:27:24 +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

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

diff --git a/openhis-ui-vue3/src/views/outpatient/examination/ExamApplyPanel.vue b/openhis-ui-vue3/src/views/outpatient/examination/ExamApplyPanel.vue
new file mode 100644
index 000000000..258c1ecb7
--- /dev/null
+++ b/openhis-ui-vue3/src/views/outpatient/examination/ExamApplyPanel.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="exam-apply-panel">
+    <!-- 左侧分类 & 中间项目选择区（保持原有布局逻辑） -->
+    <div class="selection-area">
+      <slot name="category-tree" />
+      <slot name="item-list" />
+    </div>
+
+    <!-- 右侧/下方已选择区域 -->
+    <div class="selected-area">
+      <h3 class="area-title">已选择项目</h3>
+      <div v-if="selectedItems.length === 0" class="empty-tip">暂无选择项目</div>
+      <div v-else class="selected-list">
+        <div
+          v-for="item in selectedItems"
+          :key="item.id"
+          class="selected-card"
+          @click="toggleExpand(item)"
+        >
+          <div class="card-header">
+            <el-checkbox
+              v-model="item.checked"
+              @change="handleItemCheck(item)"
+              @click.stop
+            />
+            <el-tooltip :content="item.displayName" placement="top" :show-after="300">
+              <span class="item-name">{{ item.displayName }}</span>
+            </el-tooltip>
+            <span class="expand-icon">{{ item.expanded ? '▼' : '▶' }}</span>
+          </div>
+
+          <!-- 明细/检查方法区域（默认收起，严格遵循 项目 > 检查方法 层级） -->
+          <div v-show="item.expanded" class="details-panel">
+            <!-- 已移除冗余的“项目套餐明细”标签 -->
+            <div v-if="item.methods && item.methods.length > 0" class="method-list">
+              <div
+                v-for="method in item.methods"
+                :key="method.id"
+                class="method-row"
+              >
+                <el-checkbox
+                  v-model="method.checked"
+                  @change="handleMethodCheck(item, method)"
+                  @click.stop
+                />
+                <span class="method-name">{{ method.name }}</span>
+              </div>
+            </div>
+            <div v-else class="no-methods">无关联检查方法</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface ExamMethod {
+  id: string
+  name: string
+  checked: boolean
+}
+
+interface ExamItem {
+  id: string
+  name: string
+  checked: boolean
+  expanded: boolean
+  methods: ExamMethod[]
+}
+
+const selectedItems = ref<ExamItem[]>([])
+
+// 清理名称：去除“套餐”字样，保留核心名称
+const cleanName = (name: string) => name.replace(/套餐/g, '').trim()
+
+// 切换展开/收起
+const toggleExpand = (item: ExamItem) => {
+  item.expanded = !item.expanded
+}
+
+// 项目勾选处理（解耦：不联动检查方法）
+const handleItemCheck = (item: ExamItem) => {
+  // 保持方法状态独立，不自动勾选/取消关联方法
+  // 若业务后续需要级联取消，可在此处添加 item.methods.forEach(m => m.checked = false)
+}
+
+// 检查方法勾选处理（独立）
+const handleMethodCheck = (_item: ExamItem, _method: ExamMethod) => {
+  // 仅更新方法自身状态，不影响父项目或其他方法
+}
+
+// 外部调用接口：添加选中项
+const addItem = (rawItem: any) => {
+  const exists = selectedItems.value.find(i => i.id === rawItem.id)
+  if (!exists) {
+    selectedItems.value.push({
+      id: rawItem.id,
+      name: rawItem.name,
+      displayName: cleanName(rawItem.name),
+      checked: true,
+      expanded: false, // 默认收起
+      methods: (rawItem.methods || []).map((m: any) => ({
+        id: m.id,
+        name: m.name,
+        checked: false // 默认不勾选，彻底解耦
+      }))
+    })
+  }
+}
+
+defineExpose({ addItem, selectedItems })
+</script>
+
+<style scoped>
+.exam-apply-panel {
+  display: flex;
+  gap: 16px;
+  padding: 12px;
+}
+.selected-area {
+  flex: 1;
+  min-width: 320px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  padding: 12px;
+}
+.area-title {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: #303133;
+}
+.selected-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.selected-card {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+  cursor: pointer;
+  background: #fff;
+  transition: all 0.2s;
+}
+.selected-card:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  color: #303133;
+}
+.expand-icon {
+  font-size: 12px;
+  color: #909399;
+  user-select: none;
+}
+.details-panel {
+  margin-top: 8px;
+  padding-left: 24px;
+  border-top: 1px dashed #ebeef5;
+  padding-top: 8px;
+}
+.method-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+.method-name {
+  font-size: 13px;
+  color: #606266;
+}
+.empty-tip {
+  color: #909399;
+  text-align: center;
+  padding: 24px 0;
+  font-size: 13px;
+}
+.no-methods {
+  color: #c0c4cc;
+  font-size: 12px;
+  padding: 4px 0;
+}
+</style>