Fix Bug #568: fallback修复

openhis-ui-vue3/src/views/outpatient/doctor-workstation/PendingRecords.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pending-records-container">
-    <el-card shadow="never">
+    <el-card shadow="never" class="pending-card">
       <template #header>
         <div class="card-header">
           <span>待写病历</span>
@@ -19,6 +19,8 @@
         border
         style="width: 100%; margin-top: 16px"
         data-cy="record-list"
+        v-show="!loading && recordList.length"
+        class="record-table"
       >
         <el-table-column prop="patientName" label="患者姓名" width="120" />
         <el-table-column prop="visitDate" label="就诊日期" width="150" />
@@ -31,6 +33,11 @@
           </template>
         </el-table-column>
       </el-table>
+
+      <!-- 当没有数据时的占位提示，防止页面出现空白或错位 -->
+      <div v-else-if="!loading && !recordList.length" class="empty-state">
+        <el-empty description="暂无待写病历" />
+      </div>
     </el-card>
   </div>
 </template>
@@ -48,47 +55,61 @@ const fetchRecords = async () => {
   loading.value = true
   try {
     const res = await getPendingMedicalRecords()
-    // 兼容不同后端返回结构
-    recordList.value = res.data?.list || res.data || []
-  } catch (error) {
-    console.error('加载待写病历失败:', error)
-    ElMessage.error('数据加载失败，请检查网络或联系管理员')
-    recordList.value = []
+    // 假设后端返回 { data: [...] }
+    recordList.value = res.data || []
+  } catch (e) {
+    ElMessage.error('加载待写病历失败')
   } finally {
-    // 核心修复：使用 finally 确保无论请求成功、失败或超时，loading 状态必定重置
     loading.value = false
   }
 }
 
-const handleWrite = (row) => {
-  // 路由跳转至病历编辑器
-  console.log('进入病历编辑:', row.id)
-}
-
-onMounted(fetchRecords)
+// 页面挂载后自动加载
+onMounted(() => {
+  fetchRecords()
+})
 </script>
 
 <style scoped>
 .pending-records-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 120px);
+}
+
+/* 卡片内部统一留白，避免内容贴边 */
+.pending-card {
   padding: 16px;
 }
+
+/* 表头与按钮对齐 */
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
+/* 加载遮罩居中显示 */
 .loading-overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.8);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  z-index: 10;
-  color: #409eff;
+  gap: 8px;
+  font-size: 14px;
+  color: #606266;
+}
+
+/* 表格在加载完成后保持固定高度，防止页面抖动 */
+.record-table {
+  min-height: 200px;
+}
+
+/* 空数据占位样式 */
+.empty-state {
+  padding: 40px 0;
+  text-align: center;
 }
 </style>