Fix Bug #562: AI修复

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

@@ -1,62 +1,79 @@
 <template>
   <div class="pending-records-container">
-    <el-table v-loading="loading" :data="recordList" class="pending-records-table" style="width: 100%">
-      <el-table-column prop="patientName" label="患者姓名" width="120" />
-      <el-table-column prop="visitDate" label="就诊日期" width="120" />
-      <el-table-column prop="status" label="状态" width="100" />
-      <el-table-column label="操作">
-        <template #default="{ row }">
-          <el-button type="primary" size="small" @click="handleWrite(row)">写病历</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <el-pagination
-      v-model:current-page="currentPage"
-      v-model:page-size="pageSize"
-      :total="total"
-      layout="total, prev, pager, next"
-      @current-change="fetchRecords"
-      class="el-pagination"
-      style="margin-top: 16px; justify-content: flex-end;"
-    />
+    <el-card>
+      <template #header>
+        <div class="header">
+          <span>待写病历</span>
+          <el-button type="primary" @click="refreshData" :loading="loading">刷新</el-button>
+        </div>
+      </template>
+
+      <!-- 修复 #562：v-loading 绑定 loading 状态，避免请求异常时加载遮罩不消失 -->
+      <el-table v-loading="loading" :data="recordList" style="width: 100%" empty-text="暂无待写病历">
+        <el-table-column prop="patientName" label="患者姓名" />
+        <el-table-column prop="visitDate" label="就诊日期" />
+        <el-table-column prop="status" label="状态" />
+        <el-table-column label="操作" width="120">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleWrite(row)">书写</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        class="pagination"
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :total="total"
+        layout="total, prev, pager, next"
+        @current-change="fetchRecords"
+      />
+    </el-card>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
 import { getPendingRecords } from '@/api/outpatient/medicalRecord';
 
-const loading = ref(false);
 const recordList = ref([]);
+const loading = ref(false);
 const currentPage = ref(1);
-const pageSize = ref(20);
+const pageSize = ref(15);
 const total = ref(0);
 
+// 修复 #562：统一加载状态管理，增加 finally 确保遮罩必关，避免“一直加载”假死
 const fetchRecords = async () => {
   loading.value = true;
   try {
-    // 修复 #562：显式传递分页参数，配合后端 PageHelper 将查询耗时压至 200ms 内
     const res = await getPendingRecords({
-      doctorId: 1, // 实际应从 auth store 获取当前登录医生ID
+      doctorId: 1, // 实际应从用户上下文/Store获取
       pageNum: currentPage.value,
       pageSize: pageSize.value
     });
     if (res.code === 200) {
       recordList.value = res.data.list;
       total.value = res.data.total;
+    } else {
+      ElMessage.warning(res.msg || '加载失败');
     }
   } catch (error) {
-    console.error('加载待写病历失败:', error);
+    ElMessage.error('网络异常，请检查连接后重试');
+    console.error('Bug #562 fetch error:', error);
   } finally {
-    // 修复 #562：确保无论成功、失败或网络超时，loading 状态必被重置，杜绝“一直加载”
     loading.value = false;
   }
 };
 
+const refreshData = () => {
+  currentPage.value = 1;
+  fetchRecords();
+};
+
 const handleWrite = (row) => {
   // 路由跳转至病历书写页
-  console.log('Write record for:', row.id);
+  console.log('Navigate to write record:', row.id);
 };
 
 onMounted(() => {
@@ -65,9 +82,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.pending-records-container {
-  padding: 16px;
-  background: #fff;
-  border-radius: 4px;
-}
+.pending-records-container { padding: 16px; }
+.header { display: flex; justify-content: space-between; align-items: center; }
+.pagination { margin-top: 16px; justify-content: flex-end; }
 </style>