Fix Bug #550: AI修复

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

@@ -0,0 +1,187 @@
+<template>
+  <div class="exam-apply-container">
+    <el-row :gutter="16">
+      <!-- 左侧：分类树 -->
+      <el-col :span="5">
+        <el-card shadow="never" class="h-full">
+          <template #header>检查项目分类</template>
+          <el-tree
+            :data="categoryList"
+            node-key="id"
+            highlight-current
+            @node-click="handleCategoryChange"
+          />
+        </el-card>
+      </el-col>
+
+      <!-- 中间：项目与方法（独立解耦） -->
+      <el-col :span="10">
+        <el-card shadow="never" class="mb-4">
+          <template #header>检查项目</template>
+          <el-checkbox-group v-model="selectedItemIds" @change="onItemSelectChange">
+            <el-checkbox
+              v-for="item in currentItems"
+              :key="item.id"
+              :label="item.id"
+              :value="item.id"
+              class="item-checkbox"
+            >
+              {{ cleanItemName(item.name) }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-card>
+
+        <el-card shadow="never">
+          <template #header>检查方法</template>
+          <el-checkbox-group v-model="selectedMethodIds" @change="onMethodSelectChange" class="method-checkbox-group">
+            <el-checkbox
+              v-for="method in currentMethods"
+              :key="method.id"
+              :label="method.id"
+              :value="method.id"
+            >
+              {{ method.name }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-card>
+      </el-col>
+
+      <!-- 右侧：已选择（结构化展示） -->
+      <el-col :span="9">
+        <el-card shadow="never" class="h-full">
+          <template #header>已选择</template>
+          <div class="selected-list">
+            <div
+              v-for="item in selectedItems"
+              :key="item.id"
+              class="selected-card"
+            >
+              <div class="card-header" @click="toggleDetail(item)">
+                <span class="item-title" :title="cleanItemName(item.name)">
+                  {{ cleanItemName(item.name) }}
+                </span>
+                <el-icon class="expand-arrow" :class="{ expanded: item.expanded }">
+                  <ArrowDown />
+                </el-icon>
+              </div>
+              <!-- 明细区域：默认收起，移除冗余标签，严格遵循 项目 > 检查方法 层级 -->
+              <div v-show="item.expanded" class="card-detail">
+                <div v-if="item.methods?.length" class="method-hierarchy">
+                  <div v-for="m in item.methods" :key="m.id" class="hierarchy-row">
+                    <el-icon><Right /></el-icon>
+                    <span>{{ m.name }}</span>
+                  </div>
+                </div>
+                <el-empty v-else description="无关联检查方法" :image-size="30" />
+              </div>
+            </div>
+            <el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ArrowDown, Right } from '@element-plus/icons-vue';
+
+// 数据源（实际应从后端API获取）
+const categoryList = ref([]);
+const currentItems = ref([]);
+const currentMethods = ref([]);
+
+// 独立状态管理，彻底解耦项目与检查方法
+const selectedItemIds = ref([]);
+const selectedMethodIds = ref([]);
+const selectedItems = ref([]);
+
+// 清理名称：去除“套餐”前缀及冗余字符
+const cleanItemName = (name) => {
+  if (!name) return '';
+  return name.replace(/^套餐[：:]/g, '').trim();
+};
+
+// 分类切换
+const handleCategoryChange = (data) => {
+  currentItems.value = data.items || [];
+  currentMethods.value = data.methods || [];
+};
+
+// 项目勾选变更（解耦：不联动检查方法）
+const onItemSelectChange = (ids) => {
+  // 仅更新已选项目列表，不触碰 selectedMethodIds
+  selectedItems.value = ids.map(id => {
+    const existing = selectedItems.value.find(i => i.id === id);
+    if (existing) return existing;
+    const item = currentItems.value.find(i => i.id === id);
+    return {
+      ...item,
+      expanded: false, // 默认收起状态
+      methods: item?.methods || [] // 关联方法独立存储
+    };
+  });
+};
+
+// 检查方法勾选变更（独立逻辑）
+const onMethodSelectChange = (ids) => {
+  // 仅处理检查方法自身的业务逻辑，不影响项目勾选状态
+  console.log('独立更新检查方法:', ids);
+};
+
+// 展开/收起明细
+const toggleDetail = (item) => {
+  item.expanded = !item.expanded;
+};
+</script>
+
+<style scoped>
+.exam-apply-container { padding: 16px; }
+.h-full { height: 100%; }
+.mb-4 { margin-bottom: 16px; }
+.item-checkbox { display: block; margin-bottom: 8px; }
+.selected-list { max-height: 600px; overflow-y: auto; }
+.selected-card {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  background: #fafafa;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.item-title {
+  flex: 1;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 85%;
+}
+.expand-arrow {
+  transition: transform 0.3s;
+}
+.expand-arrow.expanded {
+  transform: rotate(180deg);
+}
+.card-detail {
+  padding: 0 12px 12px;
+  border-top: 1px dashed #dcdfe6;
+  background: #fff;
+}
+.method-hierarchy { margin-top: 8px; }
+.hierarchy-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0;
+  color: #606266;
+  font-size: 13px;
+}
+</style>