From a3f870407bce22daec3acd0f75918158272d7ada Mon Sep 17 00:00:00 2001
From: zhaoyun <zhaoyun@gentronhealth.com>
Date: Thu, 28 May 2026 21:52:04 +0800
Subject: [PATCH] Fix Bug #550

---
 .../examination/examinationApplication.vue    | 130 +++++++++++-------
 1 file changed, 82 insertions(+), 48 deletions(-)

diff --git a/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue b/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
index c76c8f56b..b4cec0bcb 100755
--- a/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
+++ b/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
@@ -723,15 +723,38 @@
           </div>
 
           <div class="right-column">
-            <!-- 右侧：已选择（检查项目、检查方法为两类独立选择结果） -->
-            <div class="selected-panel">
-              <div class="panel-label">
-                已选择:
-              </div>
-              <div class="selected-tags">
-                <template v-if="selectedItems.length === 0 && selectedMethods.length === 0">
-                  <div class="empty-selected">
-                    –
+          <!-- 右侧：已选择（检查项目、检查方法为两类独立选择结果） -->
+          <div class="selected-panel">
+            <div class="panel-label">已选择:</div>
+            <div class="selected-tags">
+              <template v-if="selectedItems.length === 0 && selectedMethods.length === 0">
+                <div class="empty-selected">–</div>
+              </template>
+              <template v-else>
+              <div
+                v-for="(item, idx) in selectedItems"
+                :key="'project-' + item.id"
+                class="selected-item-card"
+                :class="{ 'is-expanded': item.projectFoldExpanded }"
+              >
+                <div
+                  class="fold-strip fold-strip-project"
+                  :class="{ 'is-open': item.projectFoldExpanded }"
+                >
+                  <div class="fold-strip-header" @click="toggleProjectFold(item)">
+                    <el-icon :class="['fold-chevron', { open: item.projectFoldExpanded }]">
+                      <ArrowDown />
+                    </el-icon>
+                    <div class="fold-header-main">
+                      <span class="fold-kicker">检查项目</span>
+                      <el-tooltip :content="getDisplayItemName(item)" placement="top" :show-after="400">
+                        <span class="fold-title line-clamp-2">{{ getDisplayItemName(item) }}</span>
+                      </el-tooltip>
+                    </div>
+                    <span class="fold-price-strong">¥{{ formatDetailAmount(item.price || 0) }}</span>
+                    <el-button link type="danger" size="small" @click.stop="handleRemoveItem(idx, item)">
+                      <el-icon><Close /></el-icon>
+                    </el-button>
                   </div>
                 </template>
                 <template v-else>
@@ -821,7 +844,7 @@
                         </div>
                       </div>
                     </div>
-
+                    <div v-else class="fold-strip-muted">暂无明细数据</div>
                   </div>
 
                   <div
@@ -919,44 +942,38 @@
               </div>
             </div>
 
-            <!-- 独立检查方法勾选区：与"已选择"区域解耦，支持分别手动勾选 -->
-            <div class="method-picker-section">
-              <div
-                v-if="methodsForActiveCategory.length > 0"
-                class="selected-global-method-picker"
-                @click.stop
-              >
+              </template>
+            </div>
+          </div>
+
+          <!-- 独立检查方法勾选区：与"已选择"区域解耦，支持分别手动勾选 -->
+          <div class="method-picker-section">
+            <div
+              v-if="methodsForActiveCategory.length > 0"
+              class="selected-global-method-picker"
+              @click.stop
+            >
+              <div class="method-picker-collapse-title" @click="methodPickerExpanded = !methodPickerExpanded">
+                <span class="method-picker-title-main">检查方法</span>
+                <span v-if="activeCategoryName" class="global-method-picker-scope">{{ activeCategoryName }}</span>
+                <el-icon :class="['method-picker-arrow', { expanded: methodPickerExpanded }]">
+                  <ArrowDown />
+                </el-icon>
+              </div>
+              <div v-show="methodPickerExpanded" class="global-method-picker-list">
                 <div
-                  class="method-picker-collapse-title"
-                  @click="methodPickerExpanded = !methodPickerExpanded"
+                  v-for="method in methodsForActiveCategory"
+                  :key="'g-m-' + method.id"
+                  class="item-row method-picker-row"
                 >
-                  <span class="method-picker-title-main">检查方法</span>
-                  <span
-                    v-if="activeCategoryName"
-                    class="global-method-picker-scope"
-                  >{{ activeCategoryName }}</span>
-                  <el-icon :class="['method-picker-arrow', { expanded: methodPickerExpanded }]">
-                    <ArrowDown />
-                  </el-icon>
-                </div>
-                <div
-                  v-show="methodPickerExpanded"
-                  class="global-method-picker-list"
-                >
-                  <div
-                    v-for="method in methodsForActiveCategory"
-                    :key="'g-m-' + method.id"
-                    class="item-row method-picker-row"
+                  <el-checkbox
+                    :model-value="isStandaloneMethodSelected(method)"
+                    @change="(val) => onStandaloneMethodChange(!!val, method)"
+                    class="item-checkbox"
                   >
-                    <el-checkbox
-                      :model-value="isStandaloneMethodSelected(method)"
-                      class="item-checkbox"
-                      @change="(val) => onStandaloneMethodChange(!!val, method)"
-                    >
-                      <span class="method-label-inner">{{ formatExamMethodCaption(method.name) }}</span>
-                    </el-checkbox>
-                    <span class="item-price">¥{{ formatDetailAmount(method.packagePrice || method.price || 0) }}</span>
-                  </div>
+                    <span class="method-label-inner">{{ formatExamMethodCaption(method.name) }}</span>
+                  </el-checkbox>
+                  <span class="item-price">¥{{ formatDetailAmount(method.packagePrice || method.price || 0) }}</span>
                 </div>
               </div>
             </div>
@@ -965,6 +982,7 @@
       </div>
     </div>
   </div>
+</div>
 </template>
 
 <script setup>
@@ -991,7 +1009,7 @@ const activeDetailTab = ref('applyForm');
 const applicationList = ref([]);
 const selectedItems = ref([]);
 const selectedMethods = ref([]);
-const methodPickerExpanded = ref(true);
+const methodPickerExpanded = ref(false);
 
 // Bug #499: 查询过滤状态
 const searchForm = reactive({
@@ -1512,8 +1530,7 @@ async function handleCategoryExpand(cat) {
 function handleCollapseChange(activeName) {
   // 始终记录当前激活的分类，确保 handleCategoryExpand 能正确忽略过期请求
   currentActiveCategory.value = activeName || null;
-  // 切换分类时自动展开方法选择器，使关联的检查方法对医生可见
-  methodPickerExpanded.value = true;
+
 
   if (activeName) {
     // Bug #428修复: 直接从 categoryList（原始响应式数组）查找分类，
@@ -2505,6 +2522,23 @@ defineExpose({ getList });
 
 /* 已选择 tags */
 /* 已选择：加宽，避免套餐明细挤成一团 */
+.right-column {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.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: 240px;