Fix Bug #550: AI修复

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

@@ -0,0 +1,190 @@
+<template>
+  <div class="exam-apply-container">
+    <el-row :gutter="20">
+      <!-- 左侧：检查项目分类 -->
+      <el-col :span="6">
+        <el-card shadow="never">
+          <template #header>检查项目分类</template>
+          <el-tree
+            :data="categories"
+            node-key="id"
+            highlight-current
+            @node-click="handleCategoryClick"
+            data-cy="category-tree"
+          />
+        </el-card>
+      </el-col>
+
+      <!-- 中间：项目列表 & 检查方法 -->
+      <el-col :span="10">
+        <el-card shadow="never" class="mb-20">
+          <template #header>检查项目</template>
+          <div class="item-list" data-cy="item-list">
+            <div v-for="item in currentItems" :key="item.id" class="item-row">
+              <el-checkbox v-model="item.checked" @change="handleItemCheck(item)" />
+              <el-tooltip :content="item.name" placement="top" :show-after="300">
+                <span class="item-name-text">{{ item.name }}</span>
+              </el-tooltip>
+            </div>
+          </div>
+        </el-card>
+
+        <el-card shadow="never">
+          <template #header>检查方法</template>
+          <div class="method-list" data-cy="method-list">
+            <div v-for="method in availableMethods" :key="method.id" class="method-row">
+              <el-checkbox v-model="method.checked" @change="handleMethodCheck(method)" />
+              <span>{{ method.name }}</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 右侧/下方：已选择区域 -->
+      <el-col :span="8">
+        <el-card shadow="never">
+          <template #header>已选择项目</template>
+          <div class="selected-area" data-cy="selected-area">
+            <el-empty v-if="selectedItems.length === 0" description="暂无选择项目" />
+            <el-collapse v-else v-model="activeCollapseNames" accordion>
+              <el-collapse-item
+                v-for="sel in selectedItems"
+                :key="sel.id"
+                :name="sel.id"
+                data-cy="selected-card"
+              >
+                <template #title>
+                  <div class="card-header">
+                    <el-tooltip :content="cleanName(sel.name)" placement="top" :show-after="500">
+                      <span class="item-name">{{ cleanName(sel.name) }}</span>
+                    </el-tooltip>
+                    <el-button type="danger" link size="small" @click.stop="removeItem(sel)">移除</el-button>
+                  </div>
+                </template>
+                <div class="details-panel" data-cy="details-panel">
+                  <div v-if="sel.methods && sel.methods.length" class="method-group">
+                    <span class="group-label">检查方法：</span>
+                    <el-checkbox-group v-model="sel.selectedMethods">
+                      <el-checkbox
+                        v-for="m in sel.methods"
+                        :key="m.id"
+                        :label="m.id"
+                        @change="handleDetailMethodChange(sel, m)"
+                      >
+                        {{ m.name }}
+                      </el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+                  <div v-else class="empty-tip">无关联检查方法</div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+
+// 模拟数据源（实际应从API获取）
+const categories = ref([
+  { id: 1, label: '彩超', children: [] },
+  { id: 2, label: 'CT', children: [] }
+])
+const currentItems = ref([])
+const availableMethods = ref([
+  { id: 'm1', name: '常规扫描', checked: false },
+  { id: 'm2', name: '增强扫描', checked: false }
+])
+
+// 已选项目状态管理
+const selectedItems = ref([])
+// 默认收起：不设置任何激活的 name
+const activeCollapseNames = ref([])
+
+// 清理名称：去除“套餐”前缀及冗余符号
+const cleanName = (name) => name.replace(/^套餐[：:]/, '').trim()
+
+const handleCategoryClick = (data) => {
+  // 模拟加载分类下的项目
+  currentItems.value = [
+    { id: 'item_128', name: '套餐：128线排', checked: false, methods: [{ id: 'm1', name: '常规扫描' }, { id: 'm2', name: '增强扫描' }] },
+    { id: 'item_64', name: '64排CT平扫', checked: false, methods: [] }
+  ]
+}
+
+// 核心修复1：项目勾选与检查方法解耦
+const handleItemCheck = (item) => {
+  if (item.checked) {
+    if (!selectedItems.value.find(s => s.id === item.id)) {
+      selectedItems.value.push({
+        ...item,
+        selectedMethods: [], // 默认不勾选任何关联方法
+        methods: item.methods || []
+      })
+    }
+  } else {
+    selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
+  }
+}
+
+// 核心修复2：独立勾选检查方法，不反向联动项目
+const handleMethodCheck = (method) => {
+  // 仅记录独立方法选择，不触发项目自动勾选逻辑
+  console.log('独立检查方法状态变更:', method.name, method.checked)
+}
+
+// 明细面板内方法勾选
+const handleDetailMethodChange = (selItem, method) => {
+  // 仅更新当前套餐/项目的已选方法数组，保持层级独立
+  console.log(`项目 ${selItem.name} 方法变更:`, method.name)
+}
+
+const removeItem = (item) => {
+  selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
+  // 同步重置中间列表的勾选状态
+  const target = currentItems.value.find(i => i.id === item.id)
+  if (target) target.checked = false
+}
+</script>
+
+<style scoped>
+.exam-apply-container { padding: 16px; }
+.mb-20 { margin-bottom: 20px; }
+.item-row, .method-row {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px dashed #eee;
+}
+.item-name-text {
+  margin-left: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+}
+.selected-area { min-height: 200px; }
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-right: 10px;
+}
+.item-name {
+  font-weight: 500;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+}
+.details-panel { padding: 12px; background: #f8f9fa; border-radius: 4px; }
+.group-label { font-weight: bold; margin-right: 8px; color: #606266; }
+.empty-tip { color: #909399; font-size: 12px; }
+</style>