From 35053a8fd07e06aa073e40bf3f089a01b6c2dcbb Mon Sep 17 00:00:00 2001
From: zhaoyun <zhaoyun@gentronhealth.com>
Date: Wed, 27 May 2026 05:25:32 +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

---
 .../components/ExamOrderPanel.vue             | 261 ++++++++++++++++++
 1 file changed, 261 insertions(+)
 create mode 100644 openhis-ui-vue3/src/views/outpatient/doctor-station/components/ExamOrderPanel.vue

diff --git a/openhis-ui-vue3/src/views/outpatient/doctor-station/components/ExamOrderPanel.vue b/openhis-ui-vue3/src/views/outpatient/doctor-station/components/ExamOrderPanel.vue
new file mode 100644
index 000000000..fe1123898
--- /dev/null
+++ b/openhis-ui-vue3/src/views/outpatient/doctor-station/components/ExamOrderPanel.vue
@@ -0,0 +1,261 @@
+<template>
+  <div class="exam-order-panel">
+    <!-- 左侧分类 & 中间项目列表 -->
+    <div class="selection-area">
+      <div class="category-list">
+        <div
+          v-for="cat in categories"
+          :key="cat.id"
+          class="category-item"
+          :class="{ active: currentCategoryId === cat.id }"
+          @click="selectCategory(cat)"
+        >
+          {{ cat.name }}
+        </div>
+      </div>
+      <div class="item-list">
+        <div v-for="item in currentItems" :key="item.id" class="item-row">
+          <!-- 修复1：项目勾选独立，@change 仅处理自身状态，阻断向检查方法的自动联动 -->
+          <el-checkbox
+            v-model="item.selected"
+            @change="handleItemCheck(item)"
+            :data-testid="`item-checkbox-${item.name}`"
+          >
+            {{ item.name }}
+          </el-checkbox>
+        </div>
+      </div>
+    </div>
+
+    <!-- 下方已选择区域 -->
+    <div class="selected-area">
+      <h3>已选择项目</h3>
+      <div class="selected-cards">
+        <div
+          v-for="group in selectedGroups"
+          :key="group.itemId"
+          class="selected-card"
+          :class="{ 'is-expanded': group.expanded }"
+          :data-testid="'selected-card'"
+        >
+          <!-- 修复2：卡片宽度自适应，去除“套餐”前缀，悬停提示完整名称 -->
+          <div class="card-header" @click="toggleExpand(group)">
+            <span
+              class="item-name"
+              :title="group.cleanName"
+              :data-testid="'selected-card-name'"
+            >
+              {{ group.cleanName }}
+            </span>
+            <el-icon class="expand-icon" :data-testid="'selected-card-expand-btn'">
+              <ArrowRight v-if="!group.expanded" />
+              <ArrowDown v-else />
+            </el-icon>
+          </div>
+
+          <!-- 修复3：结构化展示明细/方法，默认收起，严格遵循 项目 > 检查方法 层级，移除冗余标签 -->
+          <transition name="slide">
+            <div v-show="group.expanded" class="card-details" :data-testid="'selected-card-details'">
+              <div v-if="group.methods && group.methods.length" class="method-list">
+                <div
+                  v-for="method in group.methods"
+                  :key="method.id"
+                  class="method-item"
+                  :data-testid="'method-list-item'"
+                >
+                  <!-- 检查方法独立勾选，不反向影响父级项目 -->
+                  <el-checkbox v-model="method.selected" @change="handleMethodCheck(method)">
+                    {{ method.name }}
+                  </el-checkbox>
+                </div>
+              </div>
+              <div v-else class="no-methods">无关联检查方法</div>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { ArrowRight, ArrowDown } from '@element-plus/icons-vue';
+
+// 模拟分类与项目数据结构
+const categories = ref([
+  { id: 1, name: '彩超' },
+  { id: 2, name: 'CT' }
+]);
+
+const currentCategoryId = ref(1);
+const currentItems = ref([
+  {
+    id: 101,
+    name: '128线排彩超检查套餐',
+    selected: false,
+    methods: [
+      { id: 201, name: '腹部彩超', selected: false },
+      { id: 202, name: '心脏彩超', selected: false }
+    ]
+  },
+  {
+    id: 102,
+    name: '常规彩超',
+    selected: false,
+    methods: []
+  }
+]);
+
+// 修复2：清理名称逻辑，全局移除“套餐”字样并去除首尾空格
+const cleanItemName = (name) => name.replace(/套餐/g, '').trim();
+
+// 已选项目分组计算属性（项目 > 检查方法）
+const selectedGroups = computed(() => {
+  return currentItems.value
+    .filter(item => item.selected)
+    .map(item => ({
+      itemId: item.id,
+      cleanName: cleanItemName(item.name),
+      methods: item.methods || [],
+      expanded: false // 修复3：默认收起状态
+    }));
+});
+
+const selectCategory = (cat) => {
+  currentCategoryId.value = cat.id;
+  // 此处应调用后端接口加载对应分类下的项目列表
+  // loadItemsByCategory(cat.id);
+};
+
+// 修复1：项目勾选解耦处理
+const handleItemCheck = (item) => {
+  // 仅切换项目选中状态，不自动勾选或取消关联的检查方法
+  // 保持父子状态独立，由医生手动控制
+};
+
+// 检查方法独立勾选处理
+const handleMethodCheck = (method) => {
+  // 独立处理检查方法状态，不向上冒泡影响项目勾选
+};
+
+const toggleExpand = (group) => {
+  group.expanded = !group.expanded;
+};
+</script>
+
+<style scoped>
+.exam-order-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 12px;
+  background: #fff;
+}
+
+.selection-area {
+  display: flex;
+  gap: 16px;
+  min-height: 300px;
+}
+
+.category-list, .item-list {
+  flex: 1;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 8px;
+  overflow-y: auto;
+}
+
+.category-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-bottom: 4px;
+}
+.category-item.active {
+  background: #ecf5ff;
+  color: #409eff;
+  font-weight: 500;
+}
+
+.item-row {
+  padding: 6px 0;
+  border-bottom: 1px dashed #f0f0f0;
+}
+
+.selected-area {
+  border-top: 1px solid #ebeef5;
+  padding-top: 12px;
+}
+
+.selected-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.selected-card {
+  border: 1px solid #dcdfe6;
+  border-radius: 6px;
+  padding: 10px;
+  min-width: 220px;
+  max-width: 100%; /* 修复2：宽度自适应容器 */
+  background: #fafafa;
+  transition: box-shadow 0.2s;
+}
+.selected-card:hover {
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  font-weight: 500;
+  color: #303133;
+}
+
+.item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 85%;
+  font-size: 14px;
+}
+
+.expand-icon {
+  font-size: 14px;
+  color: #909399;
+}
+
+.card-details {
+  margin-top: 10px;
+  padding-left: 12px;
+  border-left: 2px solid #409eff;
+  background: #fff;
+  border-radius: 0 0 4px 4px;
+}
+
+.method-item {
+  margin: 6px 0;
+  font-size: 13px;
+  color: #606266;
+}
+
+.no-methods {
+  color: #909399;
+  font-size: 12px;
+  padding: 4px 0;
+}
+
+.slide-enter-active, .slide-leave-active {
+  transition: all 0.25s ease;
+}
+.slide-enter-from, .slide-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+</style>