Fix Bug #550: AI修复

2026-05-26 23:15:20 +08:00
parent 7ea06c9497
commit cab402fd4a
2 changed files with 315 additions and 78 deletions
--- a/openhis-ui-vue3/src/views/outpatient/exam-request/index.vue
+++ b/openhis-ui-vue3/src/views/outpatient/exam-request/index.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="exam-request-container">
+    <el-row :gutter="16" class="main-layout">
+      <!-- 左侧：检查分类 -->
+      <el-col :span="6" class="panel category-panel">
+        <div class="panel-title">检查项目分类</div>
+        <el-tree
+          :data="categories"
+          :props="{ label: 'name', children: 'children' }"
+          node-key="id"
+          highlight-current
+          @node-click="handleCategoryClick"
+        />
+      </el-col>
+
+      <!-- 中间：检查项目列表 -->
+      <el-col :span="9" class="panel item-panel">
+        <div class="panel-title">检查项目</div>
+        <el-table :data="currentItems" border style="width: 100%" @selection-change="handleItemSelection">
+          <el-table-column type="selection" width="40" />
+          <el-table-column prop="name" label="项目名称" show-overflow-tooltip />
+          <el-table-column prop="price" label="价格" width="80" />
+        </el-table>
+      </el-col>
+
+      <!-- 右侧：已选择区域 (Bug #550 Fix: 结构化展示 & 解耦) -->
+      <el-col :span="9" class="panel selected-panel">
+        <div class="panel-title">已选择</div>
+        <div v-if="selectedGroups.length === 0" class="empty-tip">暂无选择项目</div>
+        <div v-else class="selected-list">
+          <div v-for="group in selectedGroups" :key="group.itemId" class="selected-card">
+            <!-- 卡片头部：项目勾选 & 名称 & 展开收起 -->
+            <div class="card-header" @click="toggleExpand(group)">
+              <el-checkbox
+                v-model="group.checked"
+                @change="handleItemCheck(group)"
+                @click.stop
+              />
+              <el-tooltip :content="group.itemName" placement="top" :show-after="300">
+                <span class="item-name">{{ group.itemName }}</span>
+              </el-tooltip>
+              <span class="expand-icon">{{ group.expanded ? '▼' : '▶' }}</span>
+            </div>
+
+            <!-- 卡片明细：检查方法列表 (Bug #550 Fix: 默认收起，独立勾选) -->
+            <div v-show="group.expanded" class="method-list">
+              <div v-for="method in group.methods" :key="method.id" class="method-item">
+                <el-checkbox
+                  v-model="method.checked"
+                  @change="handleMethodCheck(group, method)"
+                  @click.stop
+                />
+                <span class="method-name">{{ method.methodName }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+// 模拟分类数据
+const categories = ref([
+  { id: 1, name: '彩超', children: [] },
+  { id: 2, name: 'CT', children: [] }
+])
+
+// 模拟当前分类下的项目
+const currentItems = ref([
+  { id: 101, name: '128线排彩超', price: 150, methods: [
+    { id: 1001, methodName: '常规检查', checked: false },
+    { id: 1002, methodName: '血管成像', checked: false }
+  ]},
+  { id: 102, name: '心脏彩超', price: 200, methods: [
+    { id: 1003, methodName: '二维超声', checked: false }
+  ]}
+])
+
+// 已选择分组数据 (Bug #550 Fix: 采用 Item > Method 层级结构)
+const selectedGroups = ref([])
+
+const handleCategoryClick = (data) => {
+  // 实际业务中根据分类ID请求项目列表
+  console.log('切换分类:', data.name)
+}
+
+const handleItemSelection = (selection) => {
+  // 同步选中项到右侧面板
+  selection.forEach(item => {
+    if (!selectedGroups.value.find(g => g.itemId === item.id)) {
+      // Bug #550 Fix: 清理冗余“套餐”前缀，默认收起状态
+      const cleanName = item.name.replace(/^套餐[：:]/, '')
+      selectedGroups.value.push({
+        itemId: item.id,
+        itemName: cleanName,
+        checked: true,
+        expanded: false, // 默认收起
+        methods: item.methods.map(m => ({ ...m, checked: false })) // 方法默认不勾选，解耦
+      })
+    }
+  })
+
+  // 移除取消勾选的项目
+  const selectedIds = selection.map(i => i.id)
+  selectedGroups.value = selectedGroups.value.filter(g => selectedIds.includes(g.itemId))
+}
+
+// Bug #550 Fix: 项目勾选独立，不联动方法
+const handleItemCheck = (group) => {
+  // 仅控制项目本身的选中状态，不改变子方法状态
+  console.log(`项目 ${group.itemName} 状态:`, group.checked)
+}
+
+// Bug #550 Fix: 方法勾选独立，不反向影响项目
+const handleMethodCheck = (group, method) => {
+  console.log(`方法 ${method.methodName} 状态:`, method.checked)
+}
+
+// 展开/收起控制
+const toggleExpand = (group) => {
+  group.expanded = !group.expanded
+}
+</script>
+
+<style scoped>
+.exam-request-container {
+  padding: 16px;
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+.main-layout {
+  height: calc(100vh - 120px);
+}
+.panel {
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.panel-title {
+  font-weight: 600;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+}
+.selected-panel {
+  overflow-y: auto;
+}
+.empty-tip {
+  color: #909399;
+  text-align: center;
+  margin-top: 40px;
+}
+.selected-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.selected-card {
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  background: #fafafa;
+  overflow: hidden;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  cursor: pointer;
+  background: #fff;
+  transition: background 0.2s;
+}
+.card-header:hover {
+  background: #f0f2f5;
+}
+.item-name {
+  flex: 1;
+  margin: 0 10px;
+  font-weight: 500;
+  /* Bug #550 Fix: 宽度自适应 + 超长省略 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.expand-icon {
+  font-size: 12px;
+  color: #909399;
+  transition: transform 0.2s;
+}
+.method-list {
+  padding: 8px 12px 12px 36px;
+  background: #f9fafc;
+  border-top: 1px dashed #e4e7ed;
+}
+.method-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 0;
+  font-size: 13px;
+  color: #606266;
+}
+.method-name {
+  margin-left: 8px;
+}
+</style>