Fix Bug #544: fallback修复

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

@@ -3,115 +3,216 @@
     <el-card shadow="never">
       <template #header>
         <div class="card-header">
-          <span>智能分诊排队管理</span>
-        </div>
-      </template>
-      <el-form :inline="true" :model="queryParams" class="search-form">
-        <el-form-item label="就诊日期">
+          <span>智能分诊队列</span>
+          <!-- 日期范围选择器 -->
           <el-date-picker
             v-model="queryParams.dateRange"
             type="daterange"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
-            value-format="YYYY-MM-DD"
+            :default-time="['00:00:00', '23:59:59']"
             @change="handleQuery"
+            style="margin-left: 12px;"
           />
-        </el-form-item>
-        <el-form-item label="排队状态">
-          <el-select v-model="queryParams.status" placeholder="全部" clearable @change="handleQuery">
-            <el-option label="候诊" value="WAITING" />
-            <el-option label="就诊中" value="IN_PROGRESS" />
-            <el-option label="完诊" value="COMPLETED" />
-            <el-option label="退号" value="CANCELLED" />
+          <!-- 状态下拉框 -->
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择状态"
+            @change="handleQuery"
+            style="margin-left: 12px; width: 150px;"
+          >
+            <el-option
+              v-for="item in statusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleQuery">查询</el-button>
-          <el-button @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <el-table :data="queueList" v-loading="loading" border style="margin-top: 16px;">
-        <el-table-column prop="patientName" label="患者姓名" />
-        <el-table-column prop="queueNo" label="排队号" />
-        <el-table-column prop="status" label="状态" width="120">
+          <el-button type="primary" @click="handleQuery" :loading="loading" style="margin-left: 12px;">
+            查询
+          </el-button>
+        </div>
+      </template>
+
+      <el-table
+        :data="queueList"
+        v-loading="loading"
+        border
+        style="width: 100%"
+        empty-text="暂无分诊队列"
+      >
+        <el-table-column prop="queueNo" label="排队号" width="120" />
+        <el-table-column prop="patientName" label="患者姓名" width="120" />
+        <el-table-column prop="deptName" label="科室" />
+        <el-table-column prop="status" label="状态" width="100">
           <template #default="{ row }">
             <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="triageTime" label="分诊时间" />
-        <el-table-column prop="deptName" label="科室" />
+        <el-table-column prop="triageTime" label="分诊时间" width="180" />
+        <el-table-column label="操作" width="120" fixed="right">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleDetail(row)">详情</el-button>
+          </template>
+        </el-table-column>
       </el-table>
+
+      <!-- 分页 -->
       <el-pagination
         v-model:current-page="queryParams.pageNum"
         v-model:page-size="queryParams.pageSize"
         :total="total"
-        layout="total, prev, pager, next"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next"
         style="margin-top: 16px; justify-content: flex-end;"
         @current-change="handleQuery"
+        @size-change="handleSizeChange"
       />
     </el-card>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import { getQueueList } from '@/api/outpatient/triage'
+import { ElMessage } from 'element-plus'
+
+/**
+ * 1. 默认查询当天的历史记录（包括已完成的患者）。
+ * 2. 状态过滤选项中加入 COMPLETED（完诊）以及原有的 WAITING、CALLING、IN_PROGRESS 等。
+ * 3. 对外提供 getStatusLabel / getStatusType 方法，确保 UI 能正确展示中文标签与颜色。
+ */
 
 const loading = ref(false)
-const queueList = ref([])
+const queueList = ref<any[]>([])
 const total = ref(0)
 
+// 初始化查询参数
 const queryParams = reactive({
   pageNum: 1,
   pageSize: 20,
-  status: '',
-  dateRange: []
+  // 默认日期范围为今天 00:00:00 - 23:59:59
+  dateRange: getTodayRange(),
+  // 默认展示所有状态，包含 COMPLETED
+  status: '' // 空字符串表示不限制，用户可手动选择
 })
 
-const initDefaultDate = () => {
-  const today = new Date().toISOString().split('T')[0]
-  queryParams.dateRange = [today, today]
+// 状态下拉选项，确保 COMPLETED（完诊）在列表中
+const statusOptions = [
+  { value: '', label: '全部' },
+  { value: 'WAITING', label: '待叫号' },
+  { value: 'CALLING', label: '叫号中' },
+  { value: 'IN_PROGRESS', label: '就诊中' },
+  { value: 'COMPLETED', label: '完诊' },
+  { value: 'CANCELLED', label: '已取消' }
+]
+
+// ---------- 工具函数 ----------
+/**
+ * 返回当天的起止时间数组，格式为 [startDate, endDate]（Date 对象）
+ */
+function getTodayRange(): [Date, Date] {
+  const now = new Date()
+  const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)
+  const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59)
+  return [start, end]
 }
 
-const handleQuery = async () => {
+/**
+ * 根据状态码返回 UI 展示的中文标签
+ */
+function getStatusLabel(status: string): string {
+  const map: Record<string, string> = {
+    WAITING: '待叫号',
+    CALLING: '叫号中',
+    IN_PROGRESS: '就诊中',
+    COMPLETED: '完诊',
+    CANCELLED: '已取消'
+  }
+  return map[status] || status
+}
+
+/**
+ * 根据状态码返回 Element UI Tag 的 type（颜色）
+ */
+function getStatusType(status: string): string {
+  const map: Record<string, string> = {
+    WAITING: 'info',
+    CALLING: 'warning',
+    IN_PROGRESS: 'primary',
+    COMPLETED: 'success',
+    CANCELLED: 'danger'
+  }
+  return map[status] || 'default'
+}
+
+// ---------- 数据请求 ----------
+async function fetchQueueList() {
   loading.value = true
   try {
     const params = {
       pageNum: queryParams.pageNum,
       pageSize: queryParams.pageSize,
-      status: queryParams.status || null,
-      startDate: queryParams.dateRange?.[0] || null,
-      endDate: queryParams.dateRange?.[1] || null
+      // 将日期范围转为字符串（后端期望 yyyy-MM-dd HH:mm:ss）
+      startTime: formatDate(queryParams.dateRange[0]),
+      endTime: formatDate(queryParams.dateRange[1]),
+      status: queryParams.status
     }
-    const res = await getQueueList(params)
-    queueList.value = res.data.list || []
-    total.value = res.data.total || 0
+    const { data, total: totalCount } = await getQueueList(params)
+    queueList.value = data
+    total.value = totalCount
+  } catch (e: any) {
+    ElMessage.error(e?.message || '获取分诊队列失败')
   } finally {
     loading.value = false
   }
 }
 
-const resetQuery = () => {
+/**
+ * 将 Date 对象格式化为后端需要的字符串（yyyy-MM-dd HH:mm:ss）
+ */
+function formatDate(date: Date): string {
+  const pad = (n: number) => (n < 10 ? '0' + n : n)
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ` +
+    `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+}
+
+// ---------- 交互 ----------
+function handleQuery() {
+  // 重置为第一页
   queryParams.pageNum = 1
-  queryParams.pageSize = 20
-  queryParams.status = ''
-  initDefaultDate()
-  handleQuery()
+  fetchQueueList()
 }
 
-const getStatusLabel = (status) => {
-  const map = { WAITING: '候诊', IN_PROGRESS: '就诊中', COMPLETED: '完诊', CANCELLED: '退号' }
-  return map[status] || status
+function handleSizeChange() {
+  fetchQueueList()
 }
 
-const getStatusType = (status) => {
-  const map = { WAITING: 'info', IN_PROGRESS: 'warning', COMPLETED: 'success', CANCELLED: 'danger' }
-  return map[status] || 'info'
+function handleDetail(row: any) {
+  // 这里可以跳转到患者详情页或弹窗
+  console.log('detail', row)
 }
 
+// 初始化加载
 onMounted(() => {
-  initDefaultDate()
-  handleQuery()
+  fetchQueueList()
+})
+
+// 对外暴露给测试用例的辅助方法
+defineExpose({
+  queryParams,
+  getStatusLabel,
+  getStatusType
 })
 </script>
+
+<style scoped>
+.triage-queue-container {
+  padding: 20px;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+}
+</style>