refactor(PatientList): 重构患者列表卡片布局结构

- 将原有的 header-top 和 header-bottom 结构替换为 info-row 统一布局
- 新增姓名、性别年龄、房间床号、住院号、保险类型等独立信息行
- 使用 el-text 组件优化姓名显示效果
- 为性别标签添加女性样式标识
- 调整床位信息展示方式，支持溢出省略
- 修改溢出属性从 hidden 为 visible 确保内容正常显示
- 优化标签样式和间距布局
- 隐藏已废弃的旧布局元素
- 调整 pending 患者列表的换行和对齐方式

openhis-ui-vue3/src/components/PatientList/index.vue

@@ -33,18 +33,32 @@
                 :class="{ actived: activeCardId === item.encounterId }"
               >
                 <div class="patient-card-header">
-                  <div class="header-top">
+                  <!-- 第1行：姓名 -->
-                    <div class="bed-container">
+                  <div class="info-row name-row">
-                      <div class="bed">
+                    <div class="name">
-                        <div class="bed-info">
+                      <el-text :text="item.patientName" tclass="name" width="auto">
-                          <div v-if="item.houseName" class="house-name">{{ item.houseName }}</div>
+                        {{ item.patientName || '-' }}
-                          <div class="bed-name">{{ item.bedName || '未分床' }}</div>
+                      </el-text>
-                        </div>
-                      </div>
                     </div>
-                    <el-space>
+                  </div>
+
+                  <!-- 第2行：性别 年龄 + 入院状态 -->
+                  <div class="info-row gender-age-row">
+                    <div class="age">
+                      <el-tag
+                        size="small"
+                        class="age-tag"
+                        effect="plain"
+                        :class="{ 'age-tag-female': item.genderEnum_enumText === '女性' }"
+                      >
+                        {{ item.genderEnum_enumText || '-' }}
+                        <span v-if="item.age"> · {{ item.age }}</span>
+                      </el-tag>
+                    </div>
+
+                    <!-- 入院状态放在性别年龄旁边 -->
+                    <div class="status-inline" v-if="item.statusEnum_enumText">
                       <el-tag
-                        v-if="item.statusEnum_enumText"
                         size="small"
                         class="payer-tag-status"
                         effect="light"
@@ -52,22 +66,31 @@
                       >
                         {{ item.statusEnum_enumText }}
                       </el-tag>
-                      <el-tag
+                    </div>
-                        v-if="item.contractName"
-                        size="small"
-                        class="payer-tag"
-                        effect="light"
-                      >
-                        {{ item.contractName }}
-                      </el-tag>
-                    </el-space>
                   </div>
 
-                  <div class="header-bottom">
+                  <!-- 第3行：房间号-分床状态 -->
+                  <div class="info-row room-bed-row">
+                    <div class="bed-info">
+                      <div v-if="item.houseName" class="house-name">{{ item.houseName }}</div>
+                      <div class="bed-name">{{ item.bedName || '未分床' }}</div>
+                    </div>
+                  </div>
+
+                  <!-- 第4行：住院号 -->
+                  <div class="info-row busno-row">
                     <span class="bus-no">住院号：{{ item.busNo || '-' }}</span>
-                    <span class="insurance-type" v-if="item.insutype_dictText">
+                  </div>
-                      险种类型：{{ item.insutype_dictText }}
+
-                    </span>
+                  <!-- 第5行：居民保险类型 -->
+                  <div class="info-row insurance-row" v-if="item.contractName">
+                    <el-tag
+                      size="small"
+                      class="payer-tag"
+                      effect="light"
+                    >
+                      {{ item.contractName }}
+                    </el-tag>
                   </div>
                 </div>
 
@@ -360,7 +383,7 @@ watch(
 <style lang="scss" scoped>
 .patient-card {
   width: 100%;
-  overflow: hidden;
+  overflow: visible; /* 改为visible以确保内容可见 */
   background-color: #fff;
   border-radius: 6px;
   border: 1px solid rgba(0, 0, 0, 0.04);
@@ -383,77 +406,128 @@ watch(
     display: flex;
     flex-direction: column;
     padding: 10px 12px 4px;
+    overflow: visible; /* 确保内容可见 */
+    gap: 4px; /* 行与行之间的间距 */
 
-    .header-top {
+    .info-row {
       display: flex;
-      align-items: center;
-      justify-content: space-between;
       width: 100%;
 
-      .bed-container {
+      &.room-bed-row {
-        display: flex;
-        flex: 1;
         align-items: center;
-        min-width: 0;
+        font-weight: 600;
+        font-size: 16px;
+        color: #1f2933;
 
-        .bed {
+        .bed-info {
-          flex-grow: 0;
+          display: flex;
-          flex-shrink: 1;
+          flex-direction: row;
-          min-width: 0;
+          align-items: center;
+          gap: 4px;
+          min-width: 0; /* 允许收缩 */
 
-          .bed-info {
+          .house-name {
-            display: flex;
+            color: #1f2933;
-            flex-direction: column;
+            font-weight: 600;
-            line-height: 1.4;
+            font-size: 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
 
-            .house-name {
+          .bed-name {
-              color: #1f2933;
+            color: #1f2933;
-              font-weight: 600;
+            font-weight: 600;
-              font-size: 16px;
+            font-size: 16px;
-              white-space: normal;
+            white-space: nowrap;
-              word-break: break-all;
+            overflow: hidden;
-            }
+            text-overflow: ellipsis;
-
-            .bed-name {
-              color: #1f2933;
-              font-weight: 600;
-              font-size: 16px;
-              white-space: normal;
-              word-break: break-all;
-            }
           }
         }
       }
 
-      .payer-tag {
+      &.insurance-row {
-        max-width: 120px;
+        align-items: center;
-        font-size: 12px;
+        margin-left: 8px; /* 添加一点左边距，与第一行对齐 */
-        border-radius: 999px;
-        font-weight: bolder;
       }
-      .payer-tag-status {
+
-        font-weight: bolder;
+      &.busno-row {
-        border-radius: 999px;
+        color: #6b7280;
+        font-size: 12px;
+        align-items: center;
+
+        .bus-no {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      &.name-row {
+        align-items: center;
+        color: #111827;
+
+        .name {
+          color: #111827;
+          font-weight: 700 !important; /* 更粗的字体，使用important确保优先级 */
+          font-size: 18px !important;  /* 更大的字体，使用important确保优先级 */
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          :deep(.el-text),
+          :deep(.el-text__inner) {
+            font-weight: 700 !important; /* 确保el-text组件也应用粗体 */
+            font-size: 18px !important;  /* 确保el-text组件也应用更大字体 */
+          }
+        }
+      }
+
+      &.gender-age-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+
+        .age {
+          flex-shrink: 0;
+
+          .age-tag {
+            border-radius: 999px;
+            padding: 0 8px;
+          }
+
+          .age-tag-female {
+            border-color: rgb(255, 55, 158);
+            color: rgb(255, 126, 184);
+          }
+        }
+
+        .status-inline {
+          flex-shrink: 0;
+          margin-left: 8px;
+        }
       }
     }
 
-    .header-bottom {
+    .payer-tag {
-      margin-top: 4px;
+      max-width: 100%;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 2px;
-      color: #6b7280;
       font-size: 12px;
+      border-radius: 999px;
+      font-weight: bolder;
+    }
+    .payer-tag-status {
+      font-weight: bolder;
+      border-radius: 999px;
+    }
 
-      .bus-no {
+    /* 隐藏旧的布局结构，因为已被新的info-row结构替代 */
-        white-space: nowrap;
+    .header-top,
-      }
+    .header-bottom,
-
+    .bed-container,
-      .insurance-type {
+    .tags-container {
-        white-space: nowrap;
+      display: none;
-      }
     }
   }
 
@@ -476,6 +550,7 @@ watch(
         justify-content: space-between;
         gap: 8px;
         width: 100%;
+        display: none; /* 新的布局中，name-container已在header中显示，这里隐藏 */
 
         .name {
           color: #111827;
@@ -522,15 +597,16 @@ watch(
   height: 100%;
   display: flex;
   flex-direction: column;
-  height: 100%;
   border-right: 1px solid #ebeef5;
   background-color: #ffffff;
   width: 240px;
   min-width: 240px;
+
   &-unexpand {
     width: 84px;
     min-width: 84px;
   }
+
   .patientList-operate {
     display: flex;
     align-items: center;
@@ -551,22 +627,14 @@ watch(
     flex-direction: column;
     height: 0;
     width: 240px;
+
     &-unexpand {
       width: 84px;
     }
 
-    .search-operate {
-      padding: 0 8px;
-      height: 48px;
-      display: flex;
-      align-items: center;
-      flex: none;
-    }
-
     .patient-cards {
       flex: 1;
       padding: 0 8px;
-
       overflow: hidden;
 
       :deep(.patient-cards-scrollbar) {
@@ -610,6 +678,7 @@ watch(
   display: flex;
   justify-content: flex-end;
   padding: 4px 16px 8px;
+
   &-unexpand {
     justify-content: center;
   }

openhis-ui-vue3/src/components/PendingPatientList/index.vue

@@ -187,6 +187,7 @@ const getStatusClass = (item: any) => {
     align-items: center;
     justify-content: space-between;
     width: 100%;
+    flex-wrap: nowrap; /* 防止换行 */
 
     .bed-container {
       display: flex;
@@ -216,9 +217,10 @@ const getStatusClass = (item: any) => {
     .header-tags {
       flex-shrink: 0;
       display: flex;
-      align-items: flex-end;
+      align-items: center;
       justify-content: flex-end;
       gap: 6px;
+      flex-wrap: nowrap; /* 防止换行 */
     }
   }