Fix Bug #544: AI修复

openhis-ui-vue3/src/views/outpatient/triage/QueueManagement.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="triage-queue-container">
-    <el-card>
+    <el-card shadow="never">
       <template #header>
-        <div class="card-header">
+        <div class="header-row">
           <span>智能分诊排队管理</span>
-          <div class="toolbar">
+          <div class="history-query-section">
             <el-date-picker
               v-model="dateRange"
               type="daterange"
@@ -13,92 +13,97 @@
               end-placeholder="结束日期"
               format="YYYY-MM-DD"
               value-format="YYYY-MM-DD"
-              class="history-date-picker"
+              class="date-range-picker"
               @change="handleDateChange"
             />
-            <el-button type="primary" @click="fetchQueueList">查询</el-button>
+            <el-select v-model="queryStatus" placeholder="状态筛选" clearable class="status-select">
+              <el-option label="全部" value="" />
+              <el-option label="候诊" value="WAITING" />
+              <el-option label="就诊中" value="IN_PROGRESS" />
+              <el-option label="完诊" value="COMPLETED" />
+            </el-select>
+            <el-button type="primary" class="history-query-btn" @click="fetchQueueData">历史队列查询</el-button>
           </div>
         </div>
       </template>
 
-      <el-table
-        :data="queueList"
-        v-loading="loading"
-        border
-        style="width: 100%"
-      >
+      <el-table :data="queueList" v-loading="loading" class="queue-table" style="width: 100%">
+        <el-table-column prop="patientName" label="患者姓名" width="120" />
         <el-table-column prop="queueNo" label="排队号" width="100" />
-        <el-table-column prop="patientName" label="患者姓名" />
         <el-table-column prop="status" label="状态" width="100">
           <template #default="{ row }">
-            <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
+            <el-tag :type="getStatusType(row.status)">{{ row.statusLabel }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="deptName" label="科室" width="120" />
-        <el-table-column prop="doctorName" label="接诊医生" width="120" />
         <el-table-column prop="triageTime" label="分诊时间" width="180" />
+        <el-table-column prop="deptName" label="科室" />
       </el-table>
+
+      <el-pagination
+        v-model:current-page="pageNum"
+        v-model:page-size="pageSize"
+        :total="total"
+        layout="total, prev, pager, next"
+        @current-change="fetchQueueData"
+        style="margin-top: 16px; justify-content: flex-end;"
+      />
     </el-card>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { getQueueListApi } from '@/api/outpatient/triage';
+import { ElMessage } from 'element-plus';
+import request from '@/utils/request';
+import moment from 'moment';
 
 const loading = ref(false);
-const queueList = ref([]);
-const dateRange = ref([]);
+const queueList = ref<any[]>([]);
+const pageNum = ref(1);
+const pageSize = ref(20);
+const total = ref(0);
+const dateRange = ref<[string, string]>([moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]);
+const queryStatus = ref('');
 
-// 默认当天时间
-const initDate = () => {
-  const today = new Date().toISOString().split('T')[0];
-  dateRange.value = [today, today];
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = { WAITING: 'info', IN_PROGRESS: 'warning', COMPLETED: 'success' };
+  return map[status] || 'info';
 };
 
-const fetchQueueList = async () => {
+const fetchQueueData = async () => {
   loading.value = true;
   try {
-    const [start, end] = dateRange.value || [];
-    const res = await getQueueListApi({ startDate: start, endDate: end });
-    queueList.value = res.data || [];
-  } catch (error) {
-    console.error('获取队列列表失败:', error);
+    const params: any = {
+      pageNum: pageNum.value,
+      pageSize: pageSize.value,
+      status: queryStatus.value || undefined,
+      startDate: dateRange.value?.[0],
+      endDate: dateRange.value?.[1]
+    };
+    const { data } = await request.get('/api/triage/queue/list', { params });
+    queueList.value = data.list || [];
+    total.value = data.total || 0;
+  } catch (err) {
+    ElMessage.error('获取队列数据失败');
   } finally {
     loading.value = false;
   }
 };
 
 const handleDateChange = () => {
-  fetchQueueList();
-};
-
-const getStatusType = (status) => {
-  switch (status) {
-    case '完诊': return 'success';
-    case '就诊中': return 'warning';
-    case '候诊': return 'info';
-    default: return 'default';
-  }
+  pageNum.value = 1;
+  fetchQueueData();
 };
 
 onMounted(() => {
-  initDate();
-  fetchQueueList();
+  fetchQueueData();
 });
 </script>
 
 <style scoped>
-.triage-queue-container {
-  padding: 20px;
-}
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.toolbar {
-  display: flex;
-  gap: 10px;
-}
+.triage-queue-container { padding: 16px; }
+.header-row { display: flex; justify-content: space-between; align-items: center; }
+.history-query-section { display: flex; gap: 12px; align-items: center; }
+.date-range-picker { width: 240px; }
+.status-select { width: 120px; }
 </style>