dev

src/components/charge/ChargeQueue.vue

@@ -55,7 +55,7 @@
               <li class="list-item" :class="curItem.id == item.id ? 'active' : ''"
                   v-for="(item, index) in ChargeQueueList"
                   :key="index" @click="clickItem(item)">
-                <span>
+                <span class="item-avatar">
                   <img v-if="item.patientGender=='1'" class="avatar"
                        src="/static/images/outpatient/man.png"
                        alt="头像"/>
@@ -63,11 +63,11 @@
                        src="/static/images/outpatient/women.png"
                        alt="头像"/>
                 </span>
-                <span class="item_name">{{ item.patientName }}</span>
+                <span class="item-name">{{ item.patientName }}</span>
-                <span class="item_time">
+                <span class="item-time">{{ formatListTime(item.createTime) || '-' }}</span>
-                {{ formatListTime(item.createTime) || '-' }}
+                <span class="item-status" :class="[item.status == 0 ?'status-active':'']">{{
-              </span>
+                    item.status == 0 ? '未收' : item.status == 1 ? '已收' : item.status == 2 ? '已退' : ''
-                <span :class="[item.status == 0 ?'status-active':'']">{{ item.status == 0 ? '未收' :item.status ==1?'已收':item.status ==2? '已退':'' }}</span>
+                  }}</span>
               </li>
             </el-scrollbar>
           </ul>
@@ -266,37 +266,42 @@ const selected = ref(false)
         cursor: pointer;
 
         span {
-          flex: 1;
+          display: block;
-          display: flex;
+          line-height: 48px;
-          align-items: center;
+          text-align: center;
-          justify-content: center;
 
+        }
+
+        .item-avatar {
+          width: 26px;
+          height: 100%;
+          margin-right: 10px;
           .avatar {
+            margin-top: 11px;
             width: 26px;
             height: 26px;
           }
         }
 
+        .item-name {
+          flex: 1;
+          min-width: 0;
+          text-align: left;
+          white-space: nowrap; // 防止文本换行
+          overflow: hidden; // 隐藏溢出的文本
+          text-overflow: ellipsis; // 显示省略号
+        }
+
+        .item-time {
+          width: 40px;
+        }
+        .item-status{
+          width: 40px;
+        }
 
         &:hover {
           background: rgba(#4D6DE4, 0.1);
         }
-
-        .item_name {
-          flex: 1.5;
-          white-space: nowrap; // 防止文本换行
-          overflow: hidden; // 隐藏溢出的文本
-          text-overflow: ellipsis; // 显示省略号
-        }
-
-        .item_time {
-          flex: 2;
-          white-space: nowrap; // 防止文本换行
-          overflow: hidden; // 隐藏溢出的文本
-          text-overflow: ellipsis; // 显示省略号
-        }
-
-
       }
 
       .status-active {

src/components/outpatient/MedicalQueue.vue

@@ -30,18 +30,18 @@
           <el-scrollbar style="height: 100%">
             <li class="list-item" :class="curItem?.id == item.id ? 'active' : ''" v-for="(item, index) in list"
                 :key="index" @click="clickLi(item)">
-                <span>
+                <span class="item-avatar">
                   <img v-if="item.gender==1" class="avatar" src="/static/images/outpatient/man.png"
                        alt="头像"/>
                   <img v-if="item.gender==2" class="avatar" src="/static/images/outpatient/women.png"
                        alt="头像"/>
                 </span>
-              <span>{{ item.name }}</span>
+              <span class="item-name">{{ item.name }}</span>
-              <span>{{ item.age || 0 }}岁</span>
+              <span class="item-age">{{ item.age || 0 }}岁</span>
-              <span class="item_time">
+              <span class="item-time">
                 {{ formatListTime(item.createDatetime) || '-' }}
               </span>
-              <span>{{ item.type == 2 ? '医保' : '自费' }}</span>
+              <span class="item-type">{{ item.type == 2 ? '医保' : '自费' }}</span>
             </li>
           </el-scrollbar>
         </ul>
@@ -144,7 +144,7 @@ const initStatusList = () => {
 const clickLi = (item: any, showBox: any = true) => {
   curItem.value = item
   if (item != null && item.status == 1 && showBox) {
-    ElMessageBox.confirm(`您将要接诊${item.name}`, "提示", {
+    ElMessageBox.confirm(`您将要接诊：${item.name}`, "提示", {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       callback: (action: any) => {
@@ -271,8 +271,6 @@ watch(() => selectedDate.value, (newValue, oldValue) => {
     .list-item {
       height: 48px;
       display: flex;
-      justify-content: space-between;
-      align-items: center;
       padding: 0 26px 0 28px;
       font-weight: 400;
       font-size: 14px;
@@ -281,24 +279,47 @@ watch(() => selectedDate.value, (newValue, oldValue) => {
       cursor: pointer;
 
       span {
-        display: flex;
+        display: block;
-        align-items: center;
+        line-height: 48px;
+        text-align: center;
+      }
+
+      .item-avatar {
+        width: 26px;
+        margin-right: 10px;
 
         .avatar {
+          margin-top: 11px;
           width: 26px;
           height: 26px;
         }
       }
 
+      .item-name {
+        flex: 1;
+        min-width: 0;
+        text-align: left;
+        white-space: nowrap; // 防止文本换行
+        overflow: hidden; // 隐藏溢出的文本
+        text-overflow: ellipsis; // 显示省略号
+      }
+
+      .item-age {
+        width: 40px;
+      }
+
+      .item-time {
+        width: 40px;
+      }
+
+      .item-type {
+        width: 40px;
+      }
+
       &:hover {
         background: rgba(#4D6DE4, 0.5);
       }
 
-      .item_name {
-        white-space: nowrap; // 防止文本换行
-        overflow: hidden; // 隐藏溢出的文本
-        text-overflow: ellipsis; // 显示省略号
-      }
 
       .item_time {
         white-space: nowrap; // 防止文本换行

src/components/registration/List.vue

@@ -5,7 +5,7 @@
         @row-click="rowClick"
         style="height: 100%"
     >
-      <el-table-column prop="name" label="姓名" width="180">
+      <el-table-column prop="name" label="姓名" show-overflow-tooltip>
         <template #default="scope">
           <div style="display: flex;align-items: center;">
             <img style="width: 25px;height: 25px;margin-right: 10px"