375 lines
7.6 KiB
Plaintext
375 lines
7.6 KiB
Plaintext
<template>
|
|
<view class="consultations-page">
|
|
<text class="title">全部诊疗记录</text>
|
|
|
|
<!-- 查询区域 -->
|
|
<view class="search-section">
|
|
<view class="search-input-group">
|
|
<input
|
|
v-model="searchQuery"
|
|
placeholder="请输入患者姓名或诊疗ID"
|
|
class="search-input"
|
|
@confirm="onInputConfirm"
|
|
/>
|
|
<button class="search-btn" @click="performSearch">查询</button>
|
|
</view>
|
|
|
|
<view class="filter-group">
|
|
<picker
|
|
mode="date"
|
|
:value="startDate"
|
|
@change="onStartDateChange"
|
|
class="date-picker date-picker-left"
|
|
>
|
|
<view class="picker-display">
|
|
开始日期: {{ startDate != '' ? startDate : '请选择' }}
|
|
</view>
|
|
</picker>
|
|
|
|
<picker
|
|
mode="date"
|
|
:value="endDate"
|
|
@change="onEndDateChange"
|
|
class="date-picker"
|
|
>
|
|
<view class="picker-display">
|
|
结束日期: {{ endDate != '' ? endDate : '请选择' }}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 诊疗记录列表 -->
|
|
<view class="records-list" v-if="records.length > 0">
|
|
<view
|
|
v-for="record in records"
|
|
:key="record.id"
|
|
class="record-item"
|
|
:class="getUrgencyClass(record.urgency)"
|
|
>
|
|
<view class="record-header">
|
|
<view class="record-header-left">
|
|
<text class="urgency-tag" v-if="record.urgency != 'normal'">{{ getUrgencyText(record.urgency) }}</text>
|
|
<text class="patient-name">{{ record.patientName }}</text>
|
|
</view>
|
|
<text class="consultation-date">{{ record.date }}</text>
|
|
</view>
|
|
<view class="record-content">
|
|
<text class="diagnosis">{{ record.diagnosis }}</text>
|
|
</view>
|
|
<view class="record-actions">
|
|
<button class="detail-btn" @click="viewDetail(record)">查看详情</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="empty" v-else>暂无数据</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view class="loading" v-if="loading">加载中...</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
// 全部诊疗记录页面
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
// 定义诊疗记录类
|
|
type RecordItem = {
|
|
id : number,
|
|
patientName : string,
|
|
date : string,
|
|
diagnosis : string,
|
|
urgency : string // emergency, urgent, normal
|
|
}
|
|
|
|
// 数据
|
|
const searchQuery = ref('')
|
|
const startDate = ref('')
|
|
const endDate = ref('')
|
|
const records = ref([] as RecordItem[])
|
|
const loading = ref(false)
|
|
|
|
/**
|
|
* 查询诊疗记录
|
|
*/
|
|
function performSearch() {
|
|
if (loading.value) return
|
|
loading.value = true
|
|
|
|
// 模拟异步请求
|
|
setTimeout(() => {
|
|
try {
|
|
// 暂时使用模拟数据
|
|
const mockRecords : RecordItem[] = [
|
|
{
|
|
id: 1,
|
|
patientName: '张三',
|
|
date: '2024-01-15',
|
|
diagnosis: '感冒，发热，建议休息多喝水',
|
|
urgency: 'normal'
|
|
},
|
|
{
|
|
id: 2,
|
|
patientName: '李四',
|
|
date: '2024-01-14',
|
|
diagnosis: '高血压，建议定期检查',
|
|
urgency: 'urgent'
|
|
},
|
|
{
|
|
id: 3,
|
|
patientName: '王五',
|
|
date: '2024-01-16',
|
|
diagnosis: '急性胸痛，疑心肌梗死，需紧急处置',
|
|
urgency: 'emergency'
|
|
}
|
|
]
|
|
|
|
// 过滤数据（模拟查询）
|
|
records.value = mockRecords.filter((record : RecordItem) : boolean => {
|
|
const matchesQuery = searchQuery.value == '' ||
|
|
record.patientName.includes(searchQuery.value) ||
|
|
record.id.toString().includes(searchQuery.value)
|
|
|
|
const matchesDate = (startDate.value == '' || record.date >= startDate.value) &&
|
|
(endDate.value == '' || record.date <= endDate.value)
|
|
|
|
return matchesQuery && matchesDate
|
|
})
|
|
|
|
} catch (e : any) {
|
|
console.error('查询失败:', e)
|
|
uni.showToast({
|
|
title: '查询失败',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}, 200)
|
|
}
|
|
|
|
// 输入确认搜索
|
|
function onInputConfirm(_ : any) {
|
|
performSearch()
|
|
}
|
|
|
|
// 日期选择器变化
|
|
function onStartDateChange(e : any) {
|
|
startDate.value = e.detail.value as string
|
|
}
|
|
|
|
function onEndDateChange(e : any) {
|
|
endDate.value = e.detail.value as string
|
|
}
|
|
|
|
// 查看详情
|
|
function viewDetail(record : RecordItem) {
|
|
uni.navigateTo({
|
|
url: `/pages/ec/doctor/consultation-detail?id=${record.id}`
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 获取紧急程度对应的样式类
|
|
*/
|
|
function getUrgencyClass(urgency : string) : string {
|
|
if (urgency == 'emergency') {
|
|
return 'record-item-emergency'
|
|
} else if (urgency == 'urgent') {
|
|
return 'record-item-urgent'
|
|
}
|
|
return 'record-item-normal'
|
|
}
|
|
|
|
/**
|
|
* 获取紧急程度文字
|
|
*/
|
|
function getUrgencyText(urgency : string) : string {
|
|
if (urgency == 'emergency') {
|
|
return '【紧急】'
|
|
} else if (urgency == 'urgent') {
|
|
return '【优先】'
|
|
}
|
|
return ''
|
|
}
|
|
|
|
// 页面加载时获取所有记录
|
|
onMounted(() => {
|
|
performSearch()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.consultations-page {
|
|
padding: 30px;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
display: block;
|
|
}
|
|
|
|
.search-section {
|
|
background-color: #ffffff;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.search-input-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
padding: 10px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #dddddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.search-btn {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
background-color: #007aff;
|
|
color: #ffffff;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.date-picker {
|
|
flex: 1;
|
|
}
|
|
|
|
.date-picker-left {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.picker-display {
|
|
padding: 10px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #dddddd;
|
|
border-radius: 4px;
|
|
background-color: #f9f9f9;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.records-list {
|
|
background-color: #ffffff;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.record-item {
|
|
padding: 15px;
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: #eeeeee;
|
|
}
|
|
|
|
.record-item-emergency {
|
|
background-color: #fff1f0;
|
|
}
|
|
|
|
.record-item-urgent {
|
|
background-color: #fff7e6;
|
|
}
|
|
|
|
.record-item-normal {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.record-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.record-header-left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.urgency-tag {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.record-item-emergency .urgency-tag {
|
|
color: #ff4d4f;
|
|
}
|
|
|
|
.record-item-urgent .urgency-tag {
|
|
color: #fa8c16;
|
|
}
|
|
|
|
.patient-name {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.consultation-date {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
}
|
|
|
|
.record-content {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.diagnosis {
|
|
font-size: 14px;
|
|
color: #555555;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.record-actions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.detail-btn {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
background-color: #28a745;
|
|
color: #ffffff;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.empty {
|
|
color: #aaaaaa;
|
|
text-align: center;
|
|
margin-top: 60px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
color: #666666;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|