Fix Bug #544: AI修复

openhis-ui-vue3/src/views/triage/SmartQueue.vue

@@ -1,83 +1,122 @@
 <template>
   <div class="smart-queue-container">
-    <el-card>
-      <template #header>
-        <div class="header-actions">
-          <span class="title">智能分诊排队管理 - {{ deptName }}</span>
-          <div class="filters">
-            <!-- 修复 Bug #544：新增历史队列查询入口，默认绑定当天 -->
-            <el-date-picker
-              v-model="queryDate"
-              type="date"
-              placeholder="选择查询日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              data-testid="queue-date-picker"
-              @change="fetchQueueData"
-            />
-            <el-button type="primary" @click="fetchQueueData" data-testid="search-btn">查询</el-button>
-          </div>
-        </div>
-      </template>
-
-      <el-table :data="queueList" border style="width: 100%" data-testid="queue-table" v-loading="loading">
-        <el-table-column prop="patientName" label="患者姓名" width="150" />
-        <el-table-column prop="status" label="排队状态" width="120">
-          <template #default="{ row }">
-            <el-tag :type="getStatusType(row.status)">
-              {{ getStatusLabel(row.status) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="queueTime" label="排队时间" />
-        <el-table-column label="操作" width="100">
-          <template #default="{ row }">
-            <el-button link type="primary" size="small">详情</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+    <el-card class="query-bar" shadow="never">
+      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+        <el-form-item label="日期范围">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            @change="handleDateChange"
+          />
+        </el-form-item>
+        <el-form-item label="患者姓名">
+          <el-input v-model="queryParams.patientName" placeholder="请输入姓名" clearable style="width: 180px;" />
+        </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-card>
+
+    <el-table :data="tableData" border style="width: 100%; margin-top: 16px;" v-loading="loading">
+      <el-table-column prop="queueNo" label="排队号" width="100" align="center" />
+      <el-table-column prop="patientName" label="患者姓名" width="120" align="center" />
+      <el-table-column prop="status" label="状态" width="100" align="center">
+        <template #default="{ row }">
+          <el-tag :type="getStatusType(row.status)">{{ row.statusName }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="triageTime" label="分诊时间" width="180" align="center" />
+      <el-table-column prop="deptName" label="科室" align="center" />
+    </el-table>
+
+    <el-pagination
+      v-model:current-page="queryParams.pageNum"
+      v-model:page-size="queryParams.pageSize"
+      :total="total"
+      layout="total, prev, pager, next"
+      @current-change="handleQuery"
+      style="margin-top: 16px; justify-content: flex-end;"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { getQueueList } from '@/api/triage'
 
-const deptName = ref('呼吸内科')
-const queryDate = ref(new Date().toISOString().split('T')[0]) // 默认当天
-const queueList = ref([])
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 20,
+  patientName: '',
+  startDate: '',
+  endDate: ''
+})
+const dateRange = ref([])
+const tableData = ref([])
+const total = ref(0)
 const loading = ref(false)
 
+const handleDateChange = (val) => {
+  if (val && val.length === 2) {
+    queryParams.startDate = val[0] + ' 00:00:00'
+    queryParams.endDate = val[1] + ' 23:59:59'
+  } else {
+    queryParams.startDate = ''
+    queryParams.endDate = ''
+  }
+}
+
+const handleQuery = () => {
+  queryParams.pageNum = 1
+  fetchQueueData()
+}
+
+const resetQuery = () => {
+  queryParams.patientName = ''
+  dateRange.value = []
+  queryParams.startDate = ''
+  queryParams.endDate = ''
+  handleQuery()
+}
+
 const fetchQueueData = async () => {
   loading.value = true
   try {
-    // 假设 deptId 由路由参数或全局状态管理，此处以固定值演示
-    const res = await getQueueList({ deptId: 101, queryDate: queryDate.value })
-    queueList.value = res.data || []
-  } catch (e) {
-    console.error('获取队列数据失败', e)
+    const res = await getQueueList(queryParams)
+    tableData.value = res.rows
+    total.value = res.total
   } finally {
     loading.value = false
   }
 }
 
-const getStatusLabel = (status) => {
-  const map = { 0: '待诊', 1: '就诊中', 2: '过号', 3: '完诊' }
-  return map[status] || '未知'
-}
-
 const getStatusType = (status) => {
-  const map = { 0: 'info', 1: 'warning', 2: 'danger', 3: 'success' }
+  const map = { 'WAITING': 'warning', 'IN_PROGRESS': 'primary', 'COMPLETED': 'success' }
   return map[status] || 'info'
 }
 
-onMounted(fetchQueueData)
+onMounted(() => {
+  // 默认查询当天，满足“默认当天时间”需求
+  const today = new Date().toISOString().split('T')[0]
+  dateRange.value = [today, today]
+  handleDateChange(dateRange.value)
+  fetchQueueData()
+})
 </script>
 
 <style scoped>
-.smart-queue-container { padding: 20px; }
-.header-actions { display: flex; justify-content: space-between; align-items: center; }
-.title { font-size: 18px; font-weight: bold; }
-.filters { display: flex; gap: 12px; }
+.smart-queue-container {
+  padding: 16px;
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+.query-bar {
+  margin-bottom: 16px;
+}
 </style>