550 【门诊医生站-检查】检查申请项目选择交互优化：解决自动勾选冲突、名称遮挡及明细耦合问题

openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue

@@ -707,7 +707,7 @@
                       class="item-checkbox"
                       @change="(val) => handleItemSelect(val, item, cat)"
                     >
-                      {{ item.name }}
+                      {{ getDisplayItemName(item) }}
                     </el-checkbox>
                     <span class="item-price">¥{{ item.price }}/{{ item.unit || "次" }}</span>
                   </div>
@@ -806,7 +806,7 @@
               <div
                 v-for="(method, idx) in selectedMethods"
                 :key="'method-' + method.id"
-                class="selected-item-card"
+                class="selected-item-card method-child-card"
                 :class="{ 'is-expanded': method.expanded }"
               >
                 <div
@@ -873,12 +873,8 @@
                   </div>
                 </template>
               </div>
-            </div>
 
-            </div>
+          <!-- 检查方法勾选区：点击检查类型时出现在已选择框内 -->
-          </div>
-
-          <!-- 独立检查方法勾选区：与"已选择"区域解耦，支持分别手动勾选 -->
           <div class="method-picker-section">
             <div
               v-if="methodsForActiveCategory.length > 0"
@@ -913,6 +909,9 @@
           </div>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
 </template>
 
 <script setup>
@@ -1265,7 +1264,12 @@ const activeCategory = computed(() => {
 const activeCategoryName = computed(() => activeCategory.value?.typeName || activeCategory.value?.categoryName || '');
 
 const methodsForActiveCategory = computed(() => {
-  const arr = activeCategory.value?.methods;
+  // Bug #550修复: 直接从 categoryList 查找，避免 activeCategory 中间 computed 缓存阻断响应式
+  const id = activeNames.value;
+  if (id === '' || id === null || id === undefined) return [];
+  const cat = categoryList.value.find(c => String(c.typeId) === String(id));
+  if (!cat) return [];
+  const arr = cat.methods;
   return Array.isArray(arr) ? arr : [];
 });
 
@@ -1944,6 +1948,11 @@ async function handleItemSelect(checked, item, cat) {
       console.error('加载检查方法失败', err);
     }
 
+    // Bug #550修复: 同步方法到分类，确保右侧方法选择器可见
+    if (methods.length > 0 && cat && (!cat.methods || cat.methods.length === 0)) {
+      cat.methods = methods;
+    }
+
     if (selectedItems.value.length > 0) {
       const currentCategory = selectedItems.value[0].checkType;
       // Bug #428修复: 使用 cat.typeName 进行比较（与 effectiveCheckType 保持一致）
@@ -2459,28 +2468,24 @@ defineExpose({ getList });
   flex-direction: column;
   gap: 8px;
   flex-shrink: 0;
+  width: 280px;
+  min-width: 260px;
 }
 
 .method-picker-section {
-  width: 260px;
-  min-width: 240px;
-  max-width: 320px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  margin-top: 8px;
 }
 
 .selected-panel {
-  width: 260px;
+  min-width: 0;
-  min-width: 240px;
+  flex: 1;
-  max-width: 320px;
-  flex-shrink: 0;
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
 }
 .selected-tags {
-  flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   display: flex;
@@ -2488,6 +2493,27 @@ defineExpose({ getList });
   gap: 8px;
   padding-right: 2px;
 }
+
+/* 已选择面板中项目/方法区域分隔 */
+.section-divider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0 2px;
+}
+.section-divider::before {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: #dcdfe6;
+}
+.divider-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #909399;
+  letter-spacing: 0.03em;
+  flex-shrink: 0;
+}
 .selected-tag {
   max-width: 100%;
   overflow: hidden;
@@ -2510,6 +2536,13 @@ defineExpose({ getList });
   overflow: hidden;
 }
 
+/* 方法卡片：子级缩进，表示从属于检查项目 */
+.selected-item-card.method-child-card {
+  margin-left: 20px;
+  border-left: 3px solid #e6a23c;
+  border-radius: 0 6px 6px 0;
+}
+
 /* 项目上 / 方法下：各自独立下拉条 */
 .fold-strip {
   border-bottom: 1px solid var(--el-border-color-lighter);