Fix Bug #550: AI修复

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

@@ -1,227 +1,136 @@
 <template>
   <div class="exam-apply">
-    <!-- 检查项目列表 -->
-    <el-tree
-      ref="itemTree"
-      :data="itemTreeData"
-      node-key="id"
-      show-checkbox
-      :default-expand-all="false"
-      :props="itemTreeProps"
-      @check-change="onItemCheckChange"
-    />
+    <div class="exam-layout">
+      <!-- 左侧：检查项目分类与项目树 -->
+      <div class="tree-section">
+        <el-tree
+          ref="itemTreeRef"
+          :data="itemTreeData"
+          node-key="id"
+          show-checkbox
+          :check-strictly="true"
+          :default-expand-all="false"
+          :props="itemTreeProps"
+          @check="handleTreeCheck"
+        />
+      </div>
 
-    <!-- 已选项目卡片 -->
-    <div class="selected-card" :title="selectedCardTitle">
-      <el-tag v-for="group in selectedGroups" :key="group.id" closable @close="removeGroup(group)">
-        {{ group.displayName }}
-      </el-tag>
-    </div>
-
-    <!-- 选中明细（默认收起） -->
-    <el-collapse v-model="activePanels" class="selected-details">
-      <el-collapse-item
-        v-for="group in selectedGroups"
-        :key="group.id"
-        :name="group.id"
-      >
-        <template #title>
-          <span class="group-header">{{ group.displayName }}</span>
-        </template>
-
-        <ul class="method-list">
-          <li
-            v-for="method in group.methods"
-            :key="method.id"
-            class="method-item"
+      <!-- 右侧：已选项目与明细 -->
+      <div class="selected-section">
+        <div class="section-title">已选择</div>
+        <div class="selected-tags">
+          <el-tag
+            v-for="group in selectedGroups"
+            :key="group.id"
+            closable
+            size="default"
+            show-overflow-tooltip
+            @close="removeGroup(group.id)"
           >
-            <el-checkbox
-              :label="method.id"
-              v-model="method.checked"
-              @change="onMethodChange(group, method)"
-            >
-              {{ method.name }}
-            </el-checkbox>
-          </li>
-        </ul>
-      </el-collapse-item>
-    </el-collapse>
+            {{ group.displayName }}
+          </el-tag>
+        </div>
+
+        <el-collapse v-model="activePanels" class="details-collapse">
+          <el-collapse-item
+            v-for="group in selectedGroups"
+            :key="group.id"
+            :name="group.id"
+          >
+            <template #title>
+              <span class="collapse-title">{{ group.displayName }}</span>
+            </template>
+            <div class="method-container">
+              <el-checkbox-group v-model="group.checkedMethods">
+                <el-checkbox
+                  v-for="method in group.methods"
+                  :key="method.id"
+                  :label="method.id"
+                  @change="onMethodChange(group, method)"
+                >
+                  {{ method.name }}
+                </el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { ElMessage } from 'element-plus'
-import type { TreeNode } from 'element-plus/lib/components/tree/src/tree.type'
+import { ref } from 'vue'
 
-/**
- * 数据结构约定
- * - 项目 (Item) 与 检查方法 (Method) 为两层树结构
- * - 项目节点 id 形如 "item_128"
- * - 方法节点 id 形如 "method_001"
- * - 为避免 UI 与业务耦合，选中项目仅记录项目本身，方法的选中状态独立维护
- */
-
-interface Method {
+interface ExamMethod {
   id: string
   name: string
-  checked: boolean
 }
 
-interface ItemGroup {
+interface SelectedGroup {
   id: string
-  name: string
-  displayName: string // 用于卡片展示，已去除 “套餐” 前缀
-  methods: Method[]
+  displayName: string
+  methods: ExamMethod[]
+  checkedMethods: string[]
 }
 
-/* ---------- Mock Data (实际请改为接口获取) ---------- */
-const rawTree = ref<TreeNode[]>([
-  {
-    id: 'item_128',
-    label: '套餐-128线排',
-    children: [
-      { id: 'method_default', label: '默认方法' },
-      { id: 'method_advanced', label: '高级方法' }
-    ]
-  },
-  {
-    id: 'item_256',
-    label: '套餐-256线排',
-    children: [{ id: 'method_default', label: '默认方法' }]
-  }
-])
-/* ------------------------------------------------------ */
+const itemTreeRef = ref()
+const itemTreeData = ref<any[]>([])
+const itemTreeProps = { children: 'children', label: 'label' }
+const activePanels = ref<string[]>([]) // 默认收起所有明细面板
+const selectedGroups = ref<SelectedGroup[]>([])
 
-/* 树属性配置 */
-const itemTreeProps = {
-  children: 'children',
-  label: 'label'
+// 清理名称：去除“套餐”、“项目套餐明细”等冗余前缀及多余空格
+const cleanDisplayName = (rawName: string) => {
+  return rawName.replace(/^(套餐|项目套餐明细)[：:]?\s*/gi, '').trim()
 }
 
-/* 将原始树转换为内部可操作结构 */
-const itemTreeData = computed(() => {
-  return rawTree.value.map(item => ({
-    id: item.id,
-    label: item.label.replace(/^套餐-/, ''), // 去除 “套餐-” 前缀
-    children: (item.children ?? []).map(m => ({
-      id: m.id,
-      label: m.label
-    }))
-  }))
-})
+const handleTreeCheck = (data: any, checkedInfo: any) => {
+  const checkedNodes = checkedInfo.checkedNodes as any[]
+  // 仅处理项目节点（假设项目节点无 children 或 type === 'item'）
+  const itemNodes = checkedNodes.filter(n => !n.children || n.type === 'item')
 
-/* 已选项目（去耦合） */
-const selectedGroups = ref<ItemGroup[]>([])
+  const currentIds = new Set(selectedGroups.value.map(g => g.id))
+  const newIds = new Set(itemNodes.map(n => n.id))
 
-/* 选中项目卡片的 title（完整名称提示） */
-const selectedCardTitle = computed(() => {
-  return selectedGroups.value.map(g => g.name).join(', ')
-})
-
-/* 折叠面板控制，默认收起 */
-const activePanels = ref<string[]>([])
-
-/* ---------- 交互逻辑 ---------- */
-
-/**
- * 项目勾选变化时触发
- * - 只处理项目本身的选中/取消
- * - 方法的选中状态保持独立，不会自动勾选
- */
-function onItemCheckChange(
-  data: any,
-  checked: boolean,
-  indeterminate: boolean
-) {
-  const itemId = data.id as string
-  const itemLabel = data.label as string
-
-  if (checked) {
-    // 防止重复添加
-    if (!selectedGroups.value.find(g => g.id === itemId)) {
-      const methods: Method[] = (data.children ?? []).map((m: any) => ({
-        id: m.id,
-        name: m.label,
-        checked: false // 初始不选中
-      }))
+  // 移除未勾选的项目
+  selectedGroups.value = selectedGroups.value.filter(g => newIds.has(g.id))
 
+  // 新增已勾选的项目，初始化独立的方法状态
+  itemNodes.forEach(node => {
+    if (!currentIds.has(node.id)) {
       selectedGroups.value.push({
-        id: itemId,
-        name: data.label, // 原始完整名称（含前缀，供 title 使用）
-        displayName: itemLabel, // 已去除前缀，供卡片展示
-        methods
+        id: node.id,
+        displayName: cleanDisplayName(node.label),
+        methods: (node.methods || []).map((m: ExamMethod) => m),
+        checkedMethods: [] // 默认不勾选任何方法，实现项目与方法解耦
       })
     }
-  } else {
-    // 取消选中，移除对应分组
-    selectedGroups.value = selectedGroups.value.filter(g => g.id !== itemId)
-    // 同时收起对应折叠面板
-    activePanels.value = activePanels.value.filter(id => id !== itemId)
-  }
+  })
 }
 
-/**
- * 方法勾选变化时触发
- * - 仅更新对应方法的 checked 状态
- * - 不会影响项目的选中状态
- */
-function onMethodChange(group: ItemGroup, method: Method) {
-  // 方法状态已在 v-model 中同步，这里仅用于业务校验或后续处理
-  // 示例：若全部方法未选中，可提示用户
-  const anyChecked = group.methods.some(m => m.checked)
-  if (!anyChecked) {
-    // 可选：自动收起该分组的详情面板
-    activePanels.value = activePanels.value.filter(id => id !== group.id)
-  }
+const removeGroup = (id: string) => {
+  selectedGroups.value = selectedGroups.value.filter(g => g.id !== id)
+  // 同步取消树节点勾选状态
+  itemTreeRef.value?.setChecked(id, false)
 }
 
-/**
- * 删除已选项目卡片
- */
-function removeGroup(group: ItemGroup) {
-  // 同步更新树的选中状态
-  const tree = (refs.itemTree as any).getCheckedKeys()
-  const newChecked = tree.filter((key: string) => key !== group.id)
-  ;(refs.itemTree as any).setCheckedKeys(newChecked)
-
-  // 移除分组
-  selectedGroups.value = selectedGroups.value.filter(g => g.id !== group.id)
-  activePanels.value = activePanels.value.filter(id => id !== group.id)
+const onMethodChange = (group: SelectedGroup, method: ExamMethod) => {
+  // 检查方法勾选状态变更，保持独立不联动父级项目
+  // 可在此处接入费用计算或提交校验逻辑
 }
-
-/* ---------- 监听折叠面板打开/关闭 ---------- */
-watch(
-  activePanels,
-  (newVal, oldVal) => {
-    // 当面板打开时，可在此处加载懒加载数据（如检查方法详情）
-    // 这里保持空实现，满足“默认收起”需求
-  }
-)
 </script>
 
 <style scoped>
-.exam-apply {
-  padding: 16px;
-}
-.selected-card {
-  margin-top: 12px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.selected-details {
-  margin-top: 12px;
-}
-.group-header {
-  font-weight: 600;
-  cursor: pointer;
-}
-.method-list {
-  list-style: none;
-  padding-left: 0;
-}
-.method-item {
-  margin: 4px 0;
-}
+.exam-apply { padding: 16px; height: 100%; box-sizing: border-box; }
+.exam-layout { display: flex; gap: 16px; height: calc(100% - 32px); }
+.tree-section { flex: 1; border: 1px solid #dcdfe6; border-radius: 4px; padding: 12px; overflow-y: auto; background: #fff; }
+.selected-section { flex: 2; border: 1px solid #dcdfe6; border-radius: 4px; padding: 12px; display: flex; flex-direction: column; background: #fff; }
+.section-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #303133; }
+.selected-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; min-height: 32px; }
+.selected-tags .el-tag { max-width: 200px; cursor: default; }
+.details-collapse { flex: 1; overflow-y: auto; border-top: 1px solid #ebeef5; }
+.collapse-title { font-weight: 500; color: #409eff; }
+.method-container { padding: 8px 0 8px 16px; }
+.method-container .el-checkbox { display: block; margin-bottom: 8px; }
 </style>