110 lines
3.6 KiB
Vue
110 lines
3.6 KiB
Vue
<template>
|
|
<div class="triage-queue-container">
|
|
<el-card shadow="never">
|
|
<template #header>
|
|
<div class="header-row">
|
|
<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">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getStatusType(row.status)">{{ row.statusLabel }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<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 lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { ElMessage } from 'element-plus';
|
|
import request from '@/utils/request';
|
|
import moment from 'moment';
|
|
|
|
const loading = ref(false);
|
|
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 getStatusType = (status: string) => {
|
|
const map: Record<string, string> = { WAITING: 'info', IN_PROGRESS: 'warning', COMPLETED: 'success' };
|
|
return map[status] || 'info';
|
|
};
|
|
|
|
const fetchQueueData = async () => {
|
|
loading.value = true;
|
|
try {
|
|
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 = () => {
|
|
pageNum.value = 1;
|
|
fetchQueueData();
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchQueueData();
|
|
});
|
|
</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; }
|
|
</style>
|