Fix Bug #544: AI修复

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

@@ -2,141 +2,116 @@
   <div class="triage-queue-container">
     <el-card shadow="never">
       <template #header>
-        <div class="header-row">
+        <div class="card-header">
           <span>智能分诊排队管理</span>
-          <div class="history-query-section">
-            <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              class="date-range-picker"
-              @change="handleDateChange"
-            />
-            <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" 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="status" label="状态" width="100">
+      <el-form :inline="true" :model="queryParams" class="search-form">
+        <el-form-item label="就诊日期">
+          <el-date-picker
+            v-model="queryParams.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            @change="handleQuery"
+          />
+        </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>
+        </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">
           <template #default="{ row }">
-            <el-tag :type="getStatusType(row.status)">{{ row.statusLabel }}</el-tag>
+            <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="triageTime" label="分诊时间" width="180" />
+        <el-table-column prop="triageTime" label="分诊时间" />
         <el-table-column prop="deptName" label="科室" />
       </el-table>
-
       <el-pagination
-        v-model:current-page="pageNum"
-        v-model:page-size="pageSize"
+        v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize"
         :total="total"
         layout="total, prev, pager, next"
-        @current-change="fetchQueueData"
         style="margin-top: 16px; justify-content: flex-end;"
+        @current-change="handleQuery"
       />
     </el-card>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-import request from '@/utils/request';
-import moment from 'moment';
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { getQueueList } from '@/api/outpatient/triage'
 
-const loading = ref(false);
-const queueList = ref<any[]>([]);
-const pageNum = ref(1);
-const pageSize = ref(20);
-const total = ref(0);
-const dateRange = ref<string[]>([]);
-const queryStatus = ref('');
+const loading = ref(false)
+const queueList = ref([])
+const total = ref(0)
 
-// 默认当天时间
-const initDateRange = () => {
-  const today = moment().format('YYYY-MM-DD');
-  dateRange.value = [today, today];
-};
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 20,
+  dateRange: [],
+  status: ''
+})
 
-const getStatusType = (status: string) => {
-  switch (status) {
-    case 'WAITING': return 'info';
-    case 'IN_PROGRESS': return 'warning';
-    case 'COMPLETED': return 'success';
-    default: return '';
+const getStatusLabel = (status) => {
+  const map = { WAITING: '候诊', IN_PROGRESS: '就诊中', COMPLETED: '完诊', CANCELLED: '退号' }
+  return map[status] || status
+}
+
+const getStatusType = (status) => {
+  const map = { WAITING: 'info', IN_PROGRESS: 'warning', COMPLETED: 'success', CANCELLED: 'danger' }
+  return map[status] || 'info'
+}
+
+const handleQuery = () => {
+  loading.value = true
+  const params = {
+    pageNum: queryParams.pageNum,
+    pageSize: queryParams.pageSize,
+    status: queryParams.status || undefined,
+    startDate: queryParams.dateRange?.[0],
+    endDate: queryParams.dateRange?.[1]
   }
-};
+  getQueueList(params).then(res => {
+    queueList.value = res.rows
+    total.value = res.total
+  }).finally(() => {
+    loading.value = false
+  })
+}
 
-const handleDateChange = () => {
-  pageNum.value = 1;
-  fetchQueueData();
-};
-
-const fetchQueueData = async () => {
-  loading.value = true;
-  try {
-    const params: any = {
-      pageNum: pageNum.value,
-      pageSize: pageSize.value,
-      status: queryStatus.value,
-    };
-    if (dateRange.value && dateRange.value.length === 2) {
-      params.startDate = dateRange.value[0];
-      params.endDate = dateRange.value[1];
-    }
-
-    // 调用分诊队列列表接口，后端需确保 SQL 查询不硬编码过滤 COMPLETED 状态
-    const res = await request.get('/triage/queue/list', { params });
-    if (res.code === 200) {
-      queueList.value = res.data.list || [];
-      total.value = res.data.total || 0;
-    } else {
-      ElMessage.error(res.msg || '获取队列数据失败');
-    }
-  } catch (error) {
-    ElMessage.error('网络请求异常');
-  } finally {
-    loading.value = false;
-  }
-};
+const resetQuery = () => {
+  queryParams.status = ''
+  queryParams.dateRange = []
+  queryParams.pageNum = 1
+  handleQuery()
+}
 
 onMounted(() => {
-  initDateRange();
-  fetchQueueData();
-});
+  const today = new Date().toISOString().split('T')[0]
+  queryParams.dateRange = [today, today]
+  handleQuery()
+})
 </script>
 
 <style scoped>
-.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;
-}
+.triage-queue-container { padding: 16px; }
+.card-header { display: flex; justify-content: space-between; align-items: center; }
+.search-form { margin-bottom: 16px; }
 </style>