Fix Bug #550: AI修复

openhis-ui-vue3/src/views/outpatient/doctor/order/index.vue

@@ -71,86 +71,148 @@
 import { ref } from 'vue'
 import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
 
-// 数据源（实际应由API动态获取）
+// 状态定义
 const categoryTree = ref([])
 const currentCategoryItems = ref([])
 const selectedItemIds = ref([])
 const selectedItems = ref([])
 
 /**
- * 格式化名称：
- * 1. 去除冗余的“套餐”前缀/后缀
- * 2. 超出长度自动截断并添加省略号（配合Tooltip显示全称）
+ * 格式化名称：去除“套餐”前缀，避免界面冗余
  */
 const formatItemName = (name) => {
   if (!name) return ''
-  const clean = name.replace(/^套餐[：:]/, '').replace(/套餐$/, '')
-  return clean.length > 12 ? clean.slice(0, 12) + '...' : clean
-}
-
-/** 切换分类时加载对应项目 */
-const handleCategorySelect = (node) => {
-  // 模拟接口返回数据，实际替换为 API 调用
-  currentCategoryItems.value = [
-    { id: 1, name: '128线排彩超', methods: [{ id: 10, name: '常规检查' }, { id: 11, name: '血管成像' }] },
-    { id: 2, name: '套餐：心脏彩超', methods: [{ id: 12, name: '二维超声' }] }
-  ]
+  return name.replace(/^套餐[：:]/, '').trim()
 }
 
 /**
- * 核心修复：项目勾选与检查方法解耦
- * - 仅同步项目维度的选中状态
- * - 新增项目时，其下属方法默认 checked: false，expanded: false
+ * 分类切换：加载对应项目列表
+ */
+const handleCategorySelect = (data) => {
+  // 实际应替换为 API 请求
+  currentCategoryItems.value = data.items || []
+}
+
+/**
+ * 中间列表勾选变化：仅同步选中状态，不联动勾选方法（解耦核心）
  */
 const onItemSelectChange = (ids) => {
-  const existingIds = new Set(selectedItems.value.map(i => i.id))
-  // 移除已取消勾选的项
-  selectedItems.value = selectedItems.value.filter(i => ids.includes(i.id))
-  // 追加新勾选的项
-  ids.forEach(id => {
-    if (!existingIds.has(id)) {
-      const src = currentCategoryItems.value.find(i => i.id === id)
+  const newIds = new Set(ids)
+  
+  // 1. 移除未勾选的项目
+  selectedItems.value = selectedItems.value.filter(item => newIds.has(item.id))
+  
+  // 2. 新增已勾选项目到右侧列表
+  currentCategoryItems.value.forEach(item => {
+    if (newIds.has(item.id) && !selectedItems.value.find(s => s.id === item.id)) {
       selectedItems.value.push({
-        id,
-        originalName: src?.name || '',
+        id: item.id,
+        originalName: item.name,
         checked: true,
-        expanded: false, // 默认收起明细
-        methods: src?.methods?.map(m => ({ ...m, checked: false })) || [] // 方法独立状态，不联动
+        expanded: false, // 默认收起，符合预期行为
+        methods: (item.methods || []).map(m => ({ ...m, checked: false })) // 方法独立，默认不勾选
       })
     }
   })
 }
 
-/** 独立控制项目勾选状态（取消时同步移除） */
+/**
+ * 卡片头部点击：展开/收起明细
+ */
+const toggleDetail = (item) => {
+  item.expanded = !item.expanded
+}
+
+/**
+ * 项目独立勾选：仅更新自身状态，不影响子方法
+ */
 const onItemCheck = (item) => {
   if (!item.checked) {
     selectedItemIds.value = selectedItemIds.value.filter(id => id !== item.id)
+    selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
+  } else {
+    if (!selectedItemIds.value.includes(item.id)) {
+      selectedItemIds.value.push(item.id)
+    }
   }
 }
 
-/** 独立控制检查方法勾选状态（仅更新自身，不影响父级） */
+/**
+ * 检查方法独立勾选：与父项目完全解耦
+ */
 const onMethodCheck = (item, method) => {
-  // 状态已由 v-model 自动同步，此处可预留业务逻辑（如价格计算）
-}
-
-/** 展开/收起明细面板 */
-const toggleDetail = (item) => {
-  item.expanded = !item.expanded
+  // 仅更新方法状态，可在此处扩展价格计算或校验逻辑
+  // 不触发父级 checked 状态变更，保持层级独立
 }
 </script>
 
 <style scoped>
-.exam-apply-container { padding: 12px; height: 100%; background: #f5f7fa; }
-.panel { background: #fff; padding: 12px; border-radius: 6px; height: 100%; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
-.panel-title { font-weight: 600; margin-bottom: 12px; font-size: 14px; color: #303133; border-bottom: 1px solid #ebeef5; padding-bottom: 8px; }
-.selected-list { flex: 1; overflow-y: auto; padding-right: 6px; }
-.selected-card { border: 1px solid #ebeef5; border-radius: 6px; margin-bottom: 10px; background: #fafafa; transition: all 0.2s; }
-.selected-card:hover { border-color: #c0c4cc; }
-.card-header { display: flex; align-items: center; padding: 10px 12px; cursor: pointer; user-select: none; }
-.item-name { flex: 1; margin: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #303133; }
-.expand-icon { font-size: 12px; color: #909399; transition: transform 0.2s; }
-.card-details { padding: 6px 12px 10px 36px; background: #f5f7fa; border-top: 1px dashed #dcdfe6; }
-.method-item { display: flex; align-items: center; padding: 5px 0; font-size: 12px; color: #606266; }
-.method-checkbox { margin-right: 8px; }
-.method-name { flex: 1; }
+.exam-apply-container {
+  height: 100%;
+  padding: 12px;
+  background: #f5f7fa;
+}
+.panel {
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.panel-title {
+  font-weight: 600;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #303133;
+}
+.selected-list {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+.selected-card {
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  background: #fafafa;
+  transition: all 0.2s;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.item-name {
+  flex: 1;
+  margin: 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: #606266;
+}
+.expand-icon {
+  font-size: 14px;
+  color: #909399;
+}
+.card-details {
+  padding: 4px 12px 8px 32px;
+  border-top: 1px dashed #ebeef5;
+}
+.method-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  font-size: 12px;
+  color: #606266;
+}
+.method-checkbox {
+  margin-right: 6px;
+}
+.method-name {
+  flex: 1;
+}
 </style>