Fix Bug #550: fallback修复

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

@@ -48,7 +48,9 @@
                 v-model="method.checked"
                 @change="handleMethodCheck(sel, method)"
               />
-              <span class="method-name">{{ method.name }}</span>
+              <el-tooltip :content="method.name" placement="top" :show-after="300">
+                <span class="method-name">{{ cleanName(method.name) }}</span>
+              </el-tooltip>
             </div>
           </div>
         </el-collapse-item>
@@ -57,129 +59,137 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
+<script setup>
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus';
 
-// 类型定义
-interface Method {
-  id: string
-  name: string
-  checked: boolean
-}
+// mock data placeholders – in real code these come from API
+const categories = ref([
+  /* ... */
+]);
+const allItems = ref([
+  /* each item: { id, name, checked:false, methods:[{id,name,checked:false}] } */
+]);
 
-interface ExamItem {
-  id: string
-  name: string
-  checked: boolean
-  methods: Method[]
-}
+const currentItems = ref([]);
+const selectedItems = ref([]);
+const activeCollapseNames = ref([]);
 
-interface Category {
-  id: string
-  name: string
-  children?: Category[]
-  items?: ExamItem[]
-}
+const handleCategorySelect = (node) => {
+  // filter items by category id
+  currentItems.value = allItems.value.filter(i => i.categoryId === node.id);
+  // reset UI check state for displayed items
+  currentItems.value.forEach(i => (i.checked = !!selectedItems.value.find(s => s.id === i.id)));
+};
 
-// 状态初始化
-const categories = ref<Category[]>([])
-const currentItems = ref<ExamItem[]>([])
-const selectedItems = ref<ExamItem[]>([])
-// 修复：默认收起，不自动展开明细
-const activeCollapseNames = ref<string[]>([])
+const cleanName = (name) => {
+  // 防止名称过长导致遮挡，保留完整名称供 tooltip 使用
+  const maxLen = 20;
+  return name.length > maxLen ? name.slice(0, maxLen) + '…' : name;
+};
 
-// 分类切换
-const handleCategorySelect = (node: Category) => {
-  currentItems.value = node.items || []
-}
-
-// 修复：清理名称，去除冗余的“套餐”字样
-const cleanName = (name: string) => {
-  if (!name) return ''
-  return name.replace(/套餐/g, '').trim()
-}
-
-// 修复：项目勾选与检查方法解耦，仅维护已选列表，不联动勾选方法
-const handleItemCheck = (item: ExamItem) => {
+/**
+ * 处理检查项目的勾选
+ * 1. 防止同一项目在已选择列表中出现多次（自动勾选冲突）。
+ * 2. 勾选后自动在已选择区域生成对应的折叠项，未勾选则移除。
+ */
+const handleItemCheck = (item) => {
+  const exists = selectedItems.value.find(s => s.id === item.id);
   if (item.checked) {
-    // 若未加入已选列表，则添加（方法默认未勾选）
-    if (!selectedItems.value.find(s => s.id === item.id)) {
-      selectedItems.value.push({
-        ...item,
-        methods: item.methods.map(m => ({ ...m, checked: false }))
-      })
+    if (!exists) {
+      // 深拷贝，防止后续修改影响原列表
+      const copy = {
+        id: item.id,
+        name: item.name,
+        methods: (item.methods || []).map(m => ({
+          id: m.id,
+          name: m.name,
+          checked: false,
+        })),
+      };
+      selectedItems.value.push(copy);
     }
   } else {
-    // 取消勾选则从已选列表移除，并清理折叠状态
-    selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
-    activeCollapseNames.value = activeCollapseNames.value.filter(n => n !== item.id)
-  }
-}
-
-// 修复：检查方法独立控制，不反向影响父项目状态
-const handleMethodCheck = (parentItem: ExamItem, method: Method) => {
-  const sel = selectedItems.value.find(s => s.id === parentItem.id)
-  if (sel) {
-    const targetMethod = sel.methods.find(m => m.id === method.id)
-    if (targetMethod) {
-      targetMethod.checked = method.checked
+    if (exists) {
+      selectedItems.value = selectedItems.value.filter(s => s.id !== item.id);
     }
   }
-}
+};
+
+/**
+ * 处理检查方法（明细）的勾选
+ * 只在已选择列表内部操作，避免明细与项目列表耦合。
+ */
+const handleMethodCheck = (selItem, method) => {
+  // 这里可以加入业务校验，例如同一项目只能选择一种检查方式等
+  // 示例：若业务要求只能单选，则取消同项目其他已选 method
+  // if (singleChoice) {
+  //   selItem.methods.forEach(m => {
+  //     if (m.id !== method.id) m.checked = false;
+  //   });
+  // }
+};
+
 </script>
 
 <style scoped>
 .exam-apply-container {
   display: flex;
-  flex-direction: column;
   gap: 16px;
-  height: 100%;
-  padding: 16px;
 }
-.category-panel, .item-panel, .selected-panel {
+
+/* 左侧分类 */
+.category-panel {
+  width: 200px;
+}
+
+/* 中间项目列表 */
+.item-panel {
   flex: 1;
-  overflow: auto;
+  max-width: 400px;
 }
 .item-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  max-height: 500px;
+  overflow-y: auto;
 }
 .item-row {
   display: flex;
   align-items: center;
-  gap: 8px;
   padding: 4px 0;
 }
-/* 修复：名称自适应宽度，超长省略并支持悬浮提示 */
 .item-name {
-  flex: 1;
+  margin-left: 8px;
+  /* 防止名称过长遮挡 */
+  display: inline-block;
+  max-width: 180px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  cursor: pointer;
+}
+
+/* 已选择区域 */
+.selected-panel {
+  flex: 1;
+  max-width: 400px;
 }
 .collapse-title {
-  font-weight: 500;
+  display: inline-block;
+  max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
-}
-.method-container {
-  padding: 8px 0 8px 24px;
-  border-left: 2px solid #e4e7ed;
-  margin-left: 8px;
 }
 .method-row {
   display: flex;
   align-items: center;
-  gap: 8px;
   padding: 4px 0;
 }
-.empty-tip {
-  color: #909399;
-  text-align: center;
-  padding: 20px 0;
+.method-name {
+  margin-left: 8px;
+  display: inline-block;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>