Fix Bug #550: AI修复

openhis-ui-vue3/src/views/outpatient/ExamApply.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="exam-apply-container">
+    <el-row :gutter="16" class="main-layout">
+      <!-- 左侧：分类 -->
+      <el-col :span="5">
+        <el-card class="box-card" shadow="never">
+          <template #header><span class="card-title-text">检查项目分类</span></template>
+          <el-tree
+            :data="categories"
+            :props="{ label: 'name', children: 'children' }"
+            node-key="id"
+            @node-click="handleCategoryClick"
+            highlight-current
+            default-expand-all
+          />
+        </el-card>
+      </el-col>
+
+      <!-- 中间：项目列表 -->
+      <el-col :span="9">
+        <el-card class="box-card" shadow="never">
+          <template #header><span class="card-title-text">检查项目</span></template>
+          <div class="scroll-area">
+            <div v-for="item in currentItems" :key="item.id" class="list-item">
+              <el-checkbox v-model="item.selected" @change="handleItemCheck(item)">
+                <el-tooltip :content="item.name" placement="top" :show-after="300">
+                  <span class="text-ellipsis">{{ item.name }}</span>
+                </el-tooltip>
+              </el-checkbox>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 右侧：已选择 -->
+      <el-col :span="10">
+        <el-card class="box-card" shadow="never">
+          <template #header><span class="card-title-text">已选择项目</span></template>
+          <div class="scroll-area selected-area">
+            <div v-for="sel in selectedItems" :key="sel.id" class="selected-card">
+              <div class="card-header" @click="toggleExpand(sel)">
+                <el-checkbox
+                  v-model="sel.selected"
+                  @change="handleItemCheck(sel)"
+                  @click.stop
+                />
+                <el-tooltip :content="sel.name" placement="top" :show-after="300">
+                  <span class="text-ellipsis card-name">{{ sel.name }}</span>
+                </el-tooltip>
+                <el-icon class="expand-icon" :class="{ 'is-expanded': sel.isExpanded }">
+                  <ArrowDown />
+                </el-icon>
+              </div>
+              
+              <transition name="slide-fade">
+                <div v-show="sel.isExpanded" class="card-body">
+                  <div v-if="sel.methods && sel.methods.length > 0" class="method-group">
+                    <div v-for="method in sel.methods" :key="method.id" class="method-row">
+                      <el-checkbox
+                        v-model="method.selected"
+                        @change="handleMethodCheck(sel, method)"
+                      >
+                        {{ method.name }}
+                      </el-checkbox>
+                    </div>
+                  </div>
+                  <div v-else class="empty-tip">无关联检查方法</div>
+                </div>
+              </transition>
+            </div>
+            <el-empty v-if="selectedItems.length === 0" description="暂无选择项目" :image-size="60" />
+          </div>
+        </el-card>
+      </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线排', selected: false, methods: [
+    { id: 1001, name: '常规扫描', selected: false },
+    { id: 1002, name: '增强扫描', selected: false }
+  ]},
+  { id: 102, name: '腹部彩超', selected: false, methods: [] }
+])
+
+const selectedItems = ref([])
+
+// 清理冗余前缀
+const cleanName = (name) => name.replace(/^套餐[：:]/, '').replace(/套餐$/, '')
+
+const handleCategoryClick = (data) => {
+  // 实际业务中根据分类ID请求接口刷新 currentItems
+  console.log('切换分类:', data.name)
+}
+
+// 修复 Bug #550：解耦勾选逻辑，移除自动联动检查方法
+const handleItemCheck = (item) => {
+  if (item.selected) {
+    const exists = selectedItems.value.find(s => s.id === item.id)
+    if (!exists) {
+      selectedItems.value.push({
+        ...item,
+        name: cleanName(item.name),
+        isExpanded: false, // 默认收起
+        methods: item.methods ? item.methods.map(m => ({ ...m, selected: false })) : []
+      })
+    }
+  } else {
+    selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
+  }
+}
+
+// 独立控制检查方法勾选状态
+const handleMethodCheck = (parentItem, method) => {
+  const sel = selectedItems.value.find(s => s.id === parentItem.id)
+  if (sel) {
+    const m = sel.methods.find(m => m.id === method.id)
+    if (m) m.selected = method.selected
+  }
+}
+
+const toggleExpand = (item) => {
+  item.isExpanded = !item.isExpanded
+}
+</script>
+
+<style scoped>
+.exam-apply-container { padding: 16px; background: #f5f7fa; min-height: 100vh; }
+.box-card { height: 100%; border-radius: 8px; }
+.card-title-text { font-weight: 600; font-size: 15px; }
+.scroll-area { max-height: 520px; overflow-y: auto; padding-right: 4px; }
+.list-item { padding: 10px 0; border-bottom: 1px dashed #ebeef5; }
+.text-ellipsis {
+  display: inline-block;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.selected-area { padding-top: 8px; }
+.selected-card {
+  margin-bottom: 12px;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  background: #ffffff;
+  overflow: hidden;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  cursor: pointer;
+  user-select: none;
+  background: #fafafa;
+}
+.card-header:hover { background: #f5f7fa; }
+.card-name { flex: 1; margin: 0 12px; font-weight: 500; }
+.expand-icon { transition: transform 0.25s ease; color: #909399; }
+.expand-icon.is-expanded { transform: rotate(180deg); }
+.card-body { padding: 8px 12px 12px 36px; background: #fff; border-top: 1px solid #f0f0f0; }
+.method-row { padding: 6px 0; }
+.empty-tip { color: #909399; font-size: 12px; padding: 8px 0; text-align: center; }
+.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(-8px); }
+</style>