fix: 删除测试页面

This commit is contained in:
2025-04-23 08:32:10 +08:00
parent e5e95beea7
commit 11cc8cfa95

View File

@@ -1,310 +0,0 @@
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Timeline, TimelineItem } from 'ant-design-vue';
import {
FileTextOutlined,
MedicineBoxOutlined,
ShopOutlined,
UserOutlined,
} from '@ant-design/icons-vue';
import { getPrescriptionSourceApi } from '../api';
defineOptions({ name: 'PrescriptionSource' });
// 处方溯源信息
const data = ref();
// 格式化时间戳
const formatTime = (timestamp) => {
if (!timestamp) return '--';
return new Date(timestamp * 1000).toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
};
// 处方类型
const prescriptionTypeMap = {
1: '西药处方',
2: '中成药处方',
3: '中药处方',
};
// 处方状态
const statusMap = {
0: '待审核',
1: '已审核',
2: '已驳回',
3: '已过期',
};
// 计算属性:处方类型文本
const prescriptionTypeText = computed(() => {
return data.value
? prescriptionTypeMap[data.value.prescription_type] || '未知'
: '--';
});
// 计算属性:处方状态文本
const statusText = computed(() => {
return data.value ? statusMap[data.value.status] || '未知' : '--';
});
// 计算属性:状态颜色
const statusColor = computed(() => {
if (!data.value) return 'gray';
const statusColors = {
0: 'orange',
1: 'green',
2: 'red',
3: 'gray',
};
return statusColors[data.value.status] || 'gray';
});
// 计算属性:过期时间
const expireTime = computed(() => {
return data.value ? formatTime(data.value.auto_expire_time) : '--';
});
const [Modal, modalApi] = useVbenModal({
fullscreenButton: false,
draggable: true,
onCancel() {
modalApi.close();
},
onConfirm: async () => {
modalApi.close();
},
onOpenChange(isOpen: boolean) {
const { id } = modalApi.getData<Record<string, any>>();
if (isOpen && id) {
getPrescriptionSourceApi({ id }).then((res) => {
data.value = res;
});
} else {
data.value = null; // Reset data when modal is closed or id is missing
}
},
});
</script>
<template>
<Modal class="w-[80%]" title="处方溯源">
<div v-if="data" class="prescription-source-container">
<!-- 药店信息 -->
<div
class="mb-6 transform rounded-lg p-6 shadow-md transition-all duration-300 hover:shadow-lg"
>
<div class="mb-4 flex items-center">
<ShopOutlined class="mr-2 text-xl text-purple-500" />
<h2 class="text-xl font-bold">药店信息</h2>
</div>
<div v-if="data.store" class="grid grid-cols-1 gap-4">
<div class="info-item">
<span class="label">药店名称:</span>
<span class="value">{{ data.store.name }}</span>
</div>
</div>
<div v-else class="italic text-gray-500">暂无药店信息</div>
</div>
<!-- 处方基本信息 -->
<div
class="mb-6 transform rounded-lg p-6 shadow-md transition-all duration-300 hover:shadow-lg"
>
<div class="mb-4 flex items-center">
<FileTextOutlined class="mr-2 text-xl text-blue-500" />
<h2 class="text-xl font-bold">处方基本信息</h2>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="info-item">
<span class="label">处方编号:</span>
<span class="value">{{ data.prescription_no }}</span>
</div>
<div class="info-item">
<span class="label">处方类型:</span>
<span class="value">{{ prescriptionTypeText }}</span>
</div>
<div class="info-item">
<span class="label">处方状态:</span>
<span :class="`text-${statusColor}-500`" class="value">{{
statusText
}}</span>
</div>
<div class="info-item">
<span class="label">总金额:</span>
<span class="value font-bold text-red-500">¥{{ data.total_pay_price }}</span>
</div>
<div class="info-item">
<span class="label">过期时间:</span>
<span class="value">{{ expireTime }}</span>
</div>
</div>
</div>
<!-- 医生信息 -->
<div
class="mb-6 transform rounded-lg p-6 shadow-md transition-all duration-300 hover:shadow-lg"
>
<div class="mb-4 flex items-center">
<MedicineBoxOutlined class="mr-2 text-xl text-green-500" />
<h2 class="text-xl font-bold">医生信息</h2>
</div>
<div
v-if="data.doctor_info"
class="grid grid-cols-1 gap-4 md:grid-cols-2"
>
<div class="info-item">
<span class="label">医生姓名:</span>
<span class="value">{{ data.doctor_info.name }}</span>
</div>
<div class="info-item">
<span class="label">所属科室:</span>
<span class="value">{{
data.doctor_info.depart?.name || '--'
}}</span>
</div>
</div>
<div v-else class="italic text-gray-500">暂无医生信息</div>
</div>
<!-- 患者信息 -->
<div
class="transform rounded-lg p-6 shadow-md transition-all duration-300 hover:shadow-lg"
>
<div class="mb-4 flex items-center">
<UserOutlined class="mr-2 text-xl text-amber-500" />
<h2 class="text-xl font-bold">患者信息</h2>
</div>
<div
v-if="data.user_patient"
class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
>
<div class="info-item">
<span class="label">患者姓名:</span>
<span class="value">{{ data.user_patient.name }}</span>
</div>
<div class="info-item">
<span class="label">年龄:</span>
<span class="value">{{ data.user_patient.age }}岁</span>
</div>
<div class="info-item">
<span class="label">性别:</span>
<span class="value">{{
data.user_patient.sex === 1 ? '男' : '女'
}}</span>
</div>
</div>
<div v-else class="italic text-gray-500">暂无患者信息</div>
</div>
<!-- 时间线 -->
<div
class="mb-6 transform rounded-lg p-6 shadow-md transition-all duration-300 hover:shadow-lg"
>
<div class="mb-4 flex items-center">
<FileTextOutlined class="mr-2 text-xl text-blue-500" />
<h2 class="text-xl font-bold">处方基本信息</h2>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 mt-5">
<Timeline>
<TimelineItem v-if="data.pharmacist_view_time">
{{ data.pharmacist_view_time }}
<template v-if="data.pharmacist_info">
【{{ data.pharmacist_info.name }}】 审核
</template>
<template v-else> -- </template>
</TimelineItem>
<TimelineItem v-else>
待审核
</TimelineItem>
<TimelineItem>
{{ data.created_at }}
<template v-if="data.doctor_info">
【{{ data.doctor_info.name }}】 开方,诊断:{{
data.clinical_diagnose
}}
</template>
<template v-else> -- </template>
</TimelineItem>
<TimelineItem>
{{ data.register.created_at }}
<template v-if="data.doctor_info">
【{{ data.user_patient.name }}】 挂号
</template>
<template v-else> -- </template>
</TimelineItem>
</Timeline>
</div>
</div>
</div>
<!-- 加载状态 -->
<div v-else class="flex h-64 items-center justify-center">
<div
class="h-12 w-12 animate-spin rounded-full border-b-2 border-t-2 border-blue-500"
></div>
</div>
</Modal>
</template>
<style lang="scss" scoped>
.prescription-source-container {
@apply max-h-[70vh] overflow-auto p-4;
}
.info-item {
@apply flex flex-col rounded-md p-3 transition-all duration-300;
}
.label {
@apply mb-1 text-sm text-gray-500;
}
.value {
@apply font-medium;
}
/* 添加动感效果 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.prescription-source-container > div {
animation: fadeIn 0.5s ease-out forwards;
}
.prescription-source-container > div:nth-child(1) {
animation-delay: 0.1s;
}
.prescription-source-container > div:nth-child(2) {
animation-delay: 0.2s;
}
.prescription-source-container > div:nth-child(3) {
animation-delay: 0.3s;
}
.prescription-source-container > div:nth-child(4) {
animation-delay: 0.4s;
}
</style>