Fix Bug #550: AI修复

openhis-ui-vue3/src/views/outpatient/doctor/examination/ExaminationApply.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="examination-apply-container">
+    <!-- 左侧分类树 & 中间项目列表 (结构保留，聚焦右侧已选区修复) -->
+    <div class="selection-area">
+      <el-tree
+        ref="categoryTree"
+        :data="categoryData"
+        :props="{ label: 'name', children: 'children' }"
+        node-key="id"
+        @node-click="handleCategoryClick"
+        data-cy="category-tree"
+      />
+      <div class="item-list" data-cy="item-list">
+        <div v-for="item in currentCategoryItems" :key="item.id" class="item-row">
+          <el-checkbox
+            v-model="item.selected"
+            :label="item.name"
+            data-cy="item-checkbox"
+            @change="handleItemCheck(item)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧/下方已选择区域 -->
+    <div class="selected-panel">
+      <h3 class="panel-title">已选择</h3>
+      <div class="selected-list" data-cy="selected-list">
+        <div
+          v-for="item in selectedItems"
+          :key="item.id"
+          class="selected-card"
+          data-cy="selected-card"
+        >
+          <!-- 卡片头部：名称自适应 + 展开/收起 -->
+          <div class="card-header">
+            <el-tooltip
+              :content="item.fullName"
+              placement="top"
+              :disabled="!item.isTruncated"
+            >
+              <span
+                class="card-name"
+                data-cy="selected-card-name"
+                @mouseenter="checkTruncate($event, item)"
+              >
+                {{ item.displayName }}
+              </span>
+            </el-tooltip>
+            <el-button
+              link
+              type="primary"
+              size="small"
+              @click="toggleExpand(item)"
+              data-cy="expand-toggle"
+            >
+              {{ item.expanded ? '收起' : '展开' }}
+            </el-button>
+          </div>
+
+          <!-- 明细区域：严格遵循 项目 > 检查方法 层级，默认收起 -->
+          <transition name="el-fade-in">
+            <div v-if="item.expanded" class="card-details" data-cy="method-list">
+              <!-- 已移除冗余的“项目套餐明细”标签 -->
+              <div
+                v-for="method in item.methods"
+                :key="method.id"
+                class="method-item"
+              >
+                <el-checkbox
+                  v-model="method.checked"
+                  :label="method.name"
+                  data-cy="method-checkbox"
+                  @change="handleMethodChange(item, method)"
+                />
+              </div>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+
+// 模拟分类与项目数据
+const categoryData = ref([
+  { id: 'cat_1', name: '彩超', children: [] }
+])
+const currentCategoryItems = ref([
+  { id: 'item_1', name: '128线排', selected: false }
+])
+
+// 已选项目列表
+const selectedItems = ref([])
+
+/**
+ * 修复点 1：独立解耦
+ * 勾选项目时仅将项目加入已选列表，不联动勾选其下属检查方法。
+ * 方法状态保持独立，由医生手动选择。
+ */
+const handleItemCheck = (item) => {
+  if (item.selected) {
+    // 初始化已选结构：去除“套餐”前缀，默认收起，方法未勾选
+    const exists = selectedItems.value.find(i => i.id === item.id)
+    if (!exists) {
+      selectedItems.value.push({
+        id: item.id,
+        displayName: item.name.replace(/套餐/g, '').trim(), // 修复点 2：清理冗余文案
+        fullName: item.name,
+        expanded: false, // 修复点 3：默认收起
+        isTruncated: false,
+        methods: [
+          { id: `${item.id}_m1`, name: '常规检查', checked: false },
+          { id: `${item.id}_m2`, name: '血管多普勒', checked: false }
+        ]
+      })
+    }
+  } else {
+    selectedItems.value = selectedItems.value.filter(i => i.id !== item.id)
+  }
+}
+
+/**
+ * 修复点 3：结构化展示与交互
+ * 展开/收起明细，不改变项目选中状态。
+ */
+const toggleExpand = (item) => {
+  item.expanded = !item.expanded
+}
+
+/**
+ * 修复点 1：方法独立勾选
+ * 仅更新方法自身状态，不反向影响父项目。
+ */
+const handleMethodChange = (item, method) => {
+  // 独立处理逻辑，可在此处同步至医嘱草稿或计算费用
+  console.log(`[解耦] 项目 ${item.displayName} 方法 ${method.name} 状态: ${method.checked}`)
+}
+
+/**
+ * 修复点 2：名称遮挡优化
+ * 动态检测文本是否溢出，控制 Tooltip 显示。
+ */
+const checkTruncate = (e, item) => {
+  const el = e.target
+  nextTick(() => {
+    item.isTruncated = el.scrollWidth > el.clientWidth
+  })
+}
+
+const handleCategoryClick = () => {
+  // 分类切换逻辑占位
+}
+</script>
+
+<style scoped>
+.examination-apply-container {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  background: #f5f7fa;
+  min-height: 500px;
+}
+
+.selection-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.item-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: #fff;
+  border-radius: 8px;
+}
+
+.selected-panel {
+  width: 320px;
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.panel-title {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: #303133;
+}
+
+.selected-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+/* 修复点 2：卡片宽度自适应，支持弹性布局 */
+.selected-card {
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  padding: 12px;
+  width: 100%;
+  box-sizing: border-box;
+  background: #fff;
+  transition: all 0.2s;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+/* 修复点 2：文本溢出省略，悬停提示 */
+.card-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  color: #303133;
+  cursor: default;
+}
+
+.card-details {
+  padding-top: 8px;
+  border-top: 1px dashed #ebeef5;
+}
+
+.method-item {
+  padding: 4px 0;
+  display: flex;
+  align-items: center;
+}
+</style>