fix: 删除测试页面
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user