Initial commit of akmon project
This commit is contained in:
374
pages/ec/doctor/consultations.uvue
Normal file
374
pages/ec/doctor/consultations.uvue
Normal file
@@ -0,0 +1,374 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user