|
|
@@ -1,121 +1,123 @@
|
|
|
<script lang="ts" setup>
|
|
|
-import { computed, ref } from 'vue';
|
|
|
+import type { PrescriptionModel } from '#/api';
|
|
|
+
|
|
|
+import { computed, ref, watch } from 'vue';
|
|
|
import { useRoute } from 'vue-router';
|
|
|
|
|
|
import { Page } from '@vben/common-ui';
|
|
|
-import { ArrowLeft, MapPin, Phone, Building2, User, Calendar, FileText, Pill, Package, Truck, Clock, CreditCard, Stethoscope } from 'lucide-vue-next';
|
|
|
-import { Tabs, Descriptions, Breadcrumb } from 'ant-design-vue';
|
|
|
-
|
|
|
-const route = useRoute();
|
|
|
-const activeTab = ref('prescription');
|
|
|
|
|
|
-const prescriptionId = computed(() => route.params.id);
|
|
|
+import { Breadcrumb, Descriptions, Empty, Spin, Tabs } from 'ant-design-vue';
|
|
|
|
|
|
-const mockPrescription = {
|
|
|
- id: prescriptionId.value || '20230923238475',
|
|
|
- date: '2023-09-23',
|
|
|
- status: '打包中',
|
|
|
- medicalInstitution: '蒋村社区卫生服务中心',
|
|
|
- campus: '-',
|
|
|
- decoctionCenter: '重煎药中心华东区',
|
|
|
- decoctionCode: '代煎',
|
|
|
- patientName: '唐*理',
|
|
|
- gender: '女',
|
|
|
- age: '48岁',
|
|
|
- phone: '138****1233',
|
|
|
-};
|
|
|
+import { createEmptyPrescriptionDetail } from '#/api/model/prescription-detail';
|
|
|
+import {
|
|
|
+ getDeliveryMethodLabelMap,
|
|
|
+ getLogisticsCompanyLabelMap,
|
|
|
+ getProcessNodeLabelMap,
|
|
|
+ resolveDeliveryMethodLabel,
|
|
|
+ resolveLogisticsCompanyLabel,
|
|
|
+ resolveProcessNodeLabel,
|
|
|
+} from '#/api/model/process-node-dict';
|
|
|
+import { getPrescriptionDetailMethod } from '#/api';
|
|
|
|
|
|
-const prescriptionDetails = {
|
|
|
- chineseMedicineType: '饮片(散装)',
|
|
|
- chineseMedicineForm: '汤剂',
|
|
|
- prescriptionCount: 7,
|
|
|
- eachPackageCount: 2,
|
|
|
- totalCount: 14,
|
|
|
- decoctionMark: '否',
|
|
|
- decoctionTime: '200ml',
|
|
|
- packageType: '袋装',
|
|
|
- decoctionTimeMark: 30,
|
|
|
- decoctionTimeValue: 40,
|
|
|
- decoctionTimeSecond: 30,
|
|
|
- decoctionTimeSecondValue: 40,
|
|
|
-};
|
|
|
+const route = useRoute();
|
|
|
+const activeTab = ref('prescription');
|
|
|
+const loading = ref(false);
|
|
|
|
|
|
-const deliveryInfo = {
|
|
|
- deliveryMethod: '配送到家',
|
|
|
- logisticsCompany: '顺丰速运',
|
|
|
- recipientName: '唐*理',
|
|
|
- recipientPhone: '138****2374',
|
|
|
- provinceCity: '浙江省杭州市西湖区',
|
|
|
- detailAddress: '蒋村街道**********',
|
|
|
-};
|
|
|
+const prescriptionId = computed(() => {
|
|
|
+ const id = route.params.id;
|
|
|
+ return Array.isArray(id) ? id[0] : id;
|
|
|
+});
|
|
|
|
|
|
-const usageInfo = {
|
|
|
- dailyCount: 1,
|
|
|
- usageRoute: '内服',
|
|
|
- usageMethod: '内服',
|
|
|
- usageFrequency: '1日2次',
|
|
|
- takeTime: '饭后服',
|
|
|
- prescriptionMedicineCount: 18,
|
|
|
- totalAmount: 234.00,
|
|
|
- decoctionFee: 21.00,
|
|
|
- deliveryFee: 0.00,
|
|
|
- prescriptionTotalAmount: 245.00,
|
|
|
- medicalInsuranceAmount: 231.90,
|
|
|
- selfPayAmount: 13.10,
|
|
|
- dispensingFee: 0.00,
|
|
|
- prescriptionTotalAmountSecond: 245.00,
|
|
|
- medicalInsuranceAmountSecond: 231.90,
|
|
|
- selfPayAmountSecond: 13.10,
|
|
|
-};
|
|
|
+const detail = ref<PrescriptionModel.Detail>(createEmptyPrescriptionDetail());
|
|
|
|
|
|
-const doctorInfo = {
|
|
|
- outpatientType: '住院',
|
|
|
- outpatientNo: '93859496',
|
|
|
- department: '中医科(20号)',
|
|
|
- doctorName: '王卫国',
|
|
|
- chineseMedicineName: '腰痛',
|
|
|
- chineseMedicineCode: '肝肾亏虚',
|
|
|
- diagnosisMethod: '补益肝肾',
|
|
|
- chineseMedicineType: '腰痛',
|
|
|
- chineseMedicineCodeSecond: '否',
|
|
|
- diagnosisMethodSecond: '否',
|
|
|
- doctorNote: '',
|
|
|
-};
|
|
|
+const header = computed(() => detail.value.header);
|
|
|
+const prescriptionDetails = computed(() => detail.value.prescriptionDetails);
|
|
|
+const deliveryInfo = computed(() => detail.value.deliveryInfo);
|
|
|
+const usageInfo = computed(() => detail.value.usageInfo);
|
|
|
+const doctorInfo = computed(() => detail.value.doctorInfo);
|
|
|
+const herbalDetails = computed(() => detail.value.herbalDetails);
|
|
|
+const herbalTraceDetails = computed(() => detail.value.herbalTraceDetails);
|
|
|
+const processFlowDetails = computed(() => detail.value.processFlowDetails);
|
|
|
+const logisticsInfo = computed(() => detail.value.logisticsInfo);
|
|
|
+const logisticsNodes = computed(() => detail.value.logisticsNodes);
|
|
|
|
|
|
-const herbalDetails = [
|
|
|
- { name: '麸炒苍术', nationalCode: '06130203958365938', hospitalName: '麸炒苍术', spec: '1kg', origin: '山东', dosage: 9.0000, unit: 'g', specialMethod: '先煎', price: 3, doctorSignature: '否' },
|
|
|
-];
|
|
|
+function formatMoney(value?: number): string {
|
|
|
+ const num = Number(value);
|
|
|
+ if (!Number.isFinite(num)) return '0.00';
|
|
|
+ return num.toFixed(2);
|
|
|
+}
|
|
|
|
|
|
-const herbalTraceDetails = [
|
|
|
- { name: '黄芪', specCode: 'HQ-001', batchNo: '20230901', supplier: '亳州中药材市场', manufacturer: '亳州药业有限公司', origin: '安徽亳州', productionDate: '2023-09-01', expiryDate: '2025-09-01' },
|
|
|
- { name: '当归', specCode: 'DG-002', batchNo: '20230815', supplier: '甘肃中药材市场', manufacturer: '陇西药业有限公司', origin: '甘肃陇西', productionDate: '2023-08-15', expiryDate: '2025-08-15' },
|
|
|
- { name: '白芍', specCode: 'BS-003', batchNo: '20230820', supplier: '浙江中药材市场', manufacturer: '杭白芍业有限公司', origin: '浙江杭州', productionDate: '2023-08-20', expiryDate: '2025-08-20' },
|
|
|
- { name: '熟地', specCode: 'SD-004', batchNo: '20230905', supplier: '河南中药材市场', manufacturer: '焦作药业有限公司', origin: '河南焦作', productionDate: '2023-09-05', expiryDate: '2025-09-05' },
|
|
|
- { name: '川芎', specCode: 'CX-005', batchNo: '20230825', supplier: '四川中药材市场', manufacturer: '彭州药业有限公司', origin: '四川彭州', productionDate: '2023-08-25', expiryDate: '2025-08-25' },
|
|
|
- { name: '杜仲', specCode: 'DZ-006', batchNo: '20230910', supplier: '陕西中药材市场', manufacturer: '汉中药业有限公司', origin: '陕西汉中', productionDate: '2023-09-10', expiryDate: '2025-09-10' },
|
|
|
- { name: '续断', specCode: 'XD-007', batchNo: '20230818', supplier: '湖北中药材市场', manufacturer: '恩施药业有限公司', origin: '湖北恩施', productionDate: '2023-08-18', expiryDate: '2025-08-18' },
|
|
|
- { name: '牛膝', specCode: 'NX-008', batchNo: '20230908', supplier: '河南中药材市场', manufacturer: '怀庆药业有限公司', origin: '河南焦作', productionDate: '2023-09-08', expiryDate: '2025-09-08' },
|
|
|
-];
|
|
|
+function applyDictLabels(
|
|
|
+ data: PrescriptionModel.Detail,
|
|
|
+ processNodeMap: Map<string, string>,
|
|
|
+ deliveryMethodMap: Map<string, string>,
|
|
|
+ logisticsCompanyMap: Map<string, string>,
|
|
|
+): PrescriptionModel.Detail {
|
|
|
+ return {
|
|
|
+ ...data,
|
|
|
+ header: {
|
|
|
+ ...data.header,
|
|
|
+ status: resolveProcessNodeLabel(data.header.status, processNodeMap),
|
|
|
+ },
|
|
|
+ deliveryInfo: {
|
|
|
+ ...data.deliveryInfo,
|
|
|
+ deliveryMethod: resolveDeliveryMethodLabel(
|
|
|
+ data.deliveryInfo.deliveryMethod,
|
|
|
+ deliveryMethodMap,
|
|
|
+ ),
|
|
|
+ logisticsCompany: resolveLogisticsCompanyLabel(
|
|
|
+ data.deliveryInfo.logisticsCompany,
|
|
|
+ logisticsCompanyMap,
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ processFlowDetails: data.processFlowDetails.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ status: resolveProcessNodeLabel(item.status, processNodeMap),
|
|
|
+ })),
|
|
|
+ logisticsNodes: data.logisticsNodes.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ status: resolveProcessNodeLabel(item.status, processNodeMap),
|
|
|
+ })),
|
|
|
+ logisticsInfo: {
|
|
|
+ ...data.logisticsInfo,
|
|
|
+ company: resolveLogisticsCompanyLabel(
|
|
|
+ data.logisticsInfo.company,
|
|
|
+ logisticsCompanyMap,
|
|
|
+ ),
|
|
|
+ status: resolveProcessNodeLabel(data.logisticsInfo.status, processNodeMap),
|
|
|
+ },
|
|
|
+ };
|
|
|
+}
|
|
|
|
|
|
-const processFlowDetails = [
|
|
|
- { status: '已开始浓缩', operator: '李*霞', operationTime: '2023-09-23 10:25:38', note: '备注1', water: '2100ml', hasPhoto: true },
|
|
|
- { status: '已开始煎煮', operator: '李*霞', operationTime: '2023-09-23 10:24:38', note: '备注2', water: '3500ml', hasPhoto: true },
|
|
|
- { status: '已复核', operator: '王*霞', operationTime: '2023-09-23 10:23:38', note: '备注3', weightCheck: '1949.50g', hasPhoto: true },
|
|
|
- { status: '已调配', operator: '吴*', operationTime: '2023-09-23 10:22:38', note: '备注4', weight: '1948.31g', hasPhoto: true },
|
|
|
- { status: '药房审核已通过', operator: '崔*红', operationTime: '2023-09-23 09:21:38', note: '', water: '', hasPhoto: true },
|
|
|
-];
|
|
|
+async function loadDetail() {
|
|
|
+ const id = prescriptionId.value;
|
|
|
+ if (!id) return;
|
|
|
|
|
|
-const logisticsInfo = {
|
|
|
- company: '顺丰速运',
|
|
|
- trackingNo: 'SF73648596038958987',
|
|
|
- status: '已揽件',
|
|
|
- statusTime: '2023-09-23 09:25:38',
|
|
|
- progress: '返回内容返回内容返回内容返回内容返回内容返回内容返回内容返回内容返回内容返回内容返回内容',
|
|
|
-};
|
|
|
+ loading.value = true;
|
|
|
+ try {
|
|
|
+ const [data, processNodeMap, deliveryMethodMap, logisticsCompanyMap] =
|
|
|
+ await Promise.all([
|
|
|
+ getPrescriptionDetailMethod(id),
|
|
|
+ getProcessNodeLabelMap(),
|
|
|
+ getDeliveryMethodLabelMap(),
|
|
|
+ getLogisticsCompanyLabelMap(),
|
|
|
+ ]);
|
|
|
+ detail.value = applyDictLabels(
|
|
|
+ data,
|
|
|
+ processNodeMap,
|
|
|
+ deliveryMethodMap,
|
|
|
+ logisticsCompanyMap,
|
|
|
+ );
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
function goBack() {
|
|
|
window.history.back();
|
|
|
}
|
|
|
+
|
|
|
+watch(prescriptionId, loadDetail, { immediate: true });
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -124,11 +126,11 @@ function goBack() {
|
|
|
<div class="flex items-center justify-between">
|
|
|
<div class="flex items-center gap-3">
|
|
|
<button
|
|
|
- class="flex items-center gap-1 text-gray-600 hover:text-gray-900 transition-colors"
|
|
|
+ class="flex items-center gap-1 text-gray-600 transition-colors hover:text-gray-900"
|
|
|
+ type="button"
|
|
|
@click="goBack"
|
|
|
>
|
|
|
- <ArrowLeft class="size-5" />
|
|
|
- <span>返回</span>
|
|
|
+ <span>← 返回</span>
|
|
|
</button>
|
|
|
<Breadcrumb>
|
|
|
<Breadcrumb.Item>处方管理</Breadcrumb.Item>
|
|
|
@@ -139,284 +141,488 @@ function goBack() {
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
- <div class="bg-white rounded-lg shadow-sm p-6">
|
|
|
- <div class="flex items-center justify-between mb-6 pb-4 border-b">
|
|
|
- <div class="flex items-center gap-4">
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <FileText class="size-6 text-blue-500" />
|
|
|
+ <Spin :spinning="loading">
|
|
|
+ <div class="rounded-lg bg-white p-6 shadow-sm">
|
|
|
+ <div class="mb-6 flex items-center justify-between border-b pb-4">
|
|
|
+ <div class="flex items-center gap-4">
|
|
|
<span class="text-lg font-semibold">煎药中心处方</span>
|
|
|
+ <span class="text-gray-400">|</span>
|
|
|
+ <span class="text-gray-600">
|
|
|
+ 处方号:{{ header.number || header.id || '-' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-2 text-gray-600">
|
|
|
+ <span>{{ header.date }}</span>
|
|
|
+ <span class="text-gray-400">|</span>
|
|
|
+ <span
|
|
|
+ class="rounded-full bg-yellow-100 px-3 py-1 text-sm text-yellow-700"
|
|
|
+ >
|
|
|
+ {{ header.status }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <span class="text-gray-400">|</span>
|
|
|
- <span class="text-gray-600">处方号:{{ mockPrescription.id }}</span>
|
|
|
- </div>
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <Calendar class="size-5 text-gray-400" />
|
|
|
- <span class="text-gray-600">{{ mockPrescription.date }}</span>
|
|
|
- <span class="text-gray-400">|</span>
|
|
|
- <span class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-sm">{{ mockPrescription.status }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <Descriptions :column="4" bordered :size="'small'" class="mb-6">
|
|
|
- <Descriptions.Item label="医疗机构" :labelStyle="{ width: '120px' }">
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <Building2 class="size-4 text-gray-400" />
|
|
|
- {{ mockPrescription.medicalInstitution }}
|
|
|
- </div>
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="院区" :labelStyle="{ width: '120px' }">
|
|
|
- {{ mockPrescription.campus }}
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="代煎中心" :labelStyle="{ width: '120px' }">
|
|
|
- {{ mockPrescription.decoctionCenter }}
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="代煎代码" :labelStyle="{ width: '120px' }">
|
|
|
- <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-sm">{{ mockPrescription.decoctionCode }}</span>
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="患者姓名" :labelStyle="{ width: '120px' }">
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <User class="size-4 text-gray-400" />
|
|
|
- {{ mockPrescription.patientName }}
|
|
|
- </div>
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="性别" :labelStyle="{ width: '120px' }">
|
|
|
- {{ mockPrescription.gender }}
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="年龄" :labelStyle="{ width: '120px' }">
|
|
|
- {{ mockPrescription.age }}
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="患者电话" :labelStyle="{ width: '120px' }">
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <Phone class="size-4 text-gray-400" />
|
|
|
- {{ mockPrescription.phone }}
|
|
|
- </div>
|
|
|
- </Descriptions.Item>
|
|
|
- </Descriptions>
|
|
|
+ <Descriptions :column="4" bordered :size="'small'" class="mb-6">
|
|
|
+ <Descriptions.Item label="医疗机构" :label-style="{ width: '120px' }">
|
|
|
+ {{ header.medicalInstitution }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="院区" :label-style="{ width: '120px' }">
|
|
|
+ {{ header.campus }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="代煎中心" :label-style="{ width: '120px' }">
|
|
|
+ {{ header.decoctionCenter }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="代煎代码" :label-style="{ width: '120px' }">
|
|
|
+ <span
|
|
|
+ class="rounded bg-blue-100 px-2 py-0.5 text-sm text-blue-700"
|
|
|
+ >
|
|
|
+ {{ header.decoctionCode }}
|
|
|
+ </span>
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="患者姓名" :label-style="{ width: '120px' }">
|
|
|
+ {{ header.patientName }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="性别" :label-style="{ width: '120px' }">
|
|
|
+ {{ header.gender }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="年龄" :label-style="{ width: '120px' }">
|
|
|
+ {{ header.age }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="患者电话" :label-style="{ width: '120px' }">
|
|
|
+ {{ header.phone }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ </Descriptions>
|
|
|
|
|
|
- <Tabs v-model:activeKey="activeTab" type="card">
|
|
|
- <Tabs.TabPane key="prescription" tab="处方详情">
|
|
|
- <div class="space-y-6">
|
|
|
- <div class="bg-gray-50 rounded-lg p-4">
|
|
|
- <h3 class="text-sm font-medium text-gray-700 mb-4 flex items-center gap-2">
|
|
|
- <Pill class="size-4 text-green-500" />
|
|
|
- 煎药要求
|
|
|
- </h3>
|
|
|
- <Descriptions :column="4" :size="'small'">
|
|
|
- <Descriptions.Item label="中药类型">
|
|
|
- <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded text-sm">饮片(散装)</span>
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="中药剂型">
|
|
|
- <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded text-sm">汤剂</span>
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="处方剂数">{{ prescriptionDetails.prescriptionCount }} 剂</Descriptions.Item>
|
|
|
- <Descriptions.Item label="每剂包数">{{ prescriptionDetails.eachPackageCount }} 包</Descriptions.Item>
|
|
|
- <Descriptions.Item label="总包数">{{ prescriptionDetails.totalCount }} 包</Descriptions.Item>
|
|
|
- <Descriptions.Item label="煎药标记">
|
|
|
- <span class="px-2 py-0.5 bg-red-100 text-red-700 rounded text-sm">{{ prescriptionDetails.decoctionMark }}</span>
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="煎药时间">{{ prescriptionDetails.decoctionTime }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="包装类型">
|
|
|
- <span class="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-sm">{{ prescriptionDetails.packageType }}</span>
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="浸泡时间">{{ prescriptionDetails.decoctionTimeMark }}分钟</Descriptions.Item>
|
|
|
- <Descriptions.Item label="煎煮时间">{{ prescriptionDetails.decoctionTimeValue }}分钟</Descriptions.Item>
|
|
|
- </Descriptions>
|
|
|
- </div>
|
|
|
+ <Tabs v-model:active-key="activeTab" type="card">
|
|
|
+ <Tabs.TabPane key="prescription" tab="处方详情">
|
|
|
+ <div class="space-y-6">
|
|
|
+ <div class="rounded-lg bg-gray-50 p-4">
|
|
|
+ <h3 class="mb-4 text-sm font-medium text-gray-700">煎药要求</h3>
|
|
|
+ <Descriptions :column="4" :size="'small'">
|
|
|
+ <Descriptions.Item label="中药类型">
|
|
|
+ {{ prescriptionDetails.chineseMedicineType }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="中药剂型">
|
|
|
+ {{ prescriptionDetails.chineseMedicineForm }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="处方剂数">
|
|
|
+ {{ prescriptionDetails.prescriptionCount }} 剂
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="每剂包数">
|
|
|
+ {{ prescriptionDetails.eachPackageCount }} 包
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="总包数">
|
|
|
+ {{ prescriptionDetails.totalCount }} 包
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="煎药标记">
|
|
|
+ {{ prescriptionDetails.decoctionMark }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="煎药时间">
|
|
|
+ {{ prescriptionDetails.decoctionTime }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="包装类型">
|
|
|
+ {{ prescriptionDetails.packageType }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="浸泡时间">
|
|
|
+ {{ prescriptionDetails.decoctionTimeMark }} 分钟
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="煎煮时间">
|
|
|
+ {{ prescriptionDetails.decoctionTimeValue }} 分钟
|
|
|
+ </Descriptions.Item>
|
|
|
+ </Descriptions>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="bg-gray-50 rounded-lg p-4">
|
|
|
- <h3 class="text-sm font-medium text-gray-700 mb-4 flex items-center gap-2">
|
|
|
- <Truck class="size-4 text-orange-500" />
|
|
|
- 配送信息
|
|
|
- </h3>
|
|
|
- <Descriptions :column="4" :size="'small'">
|
|
|
- <Descriptions.Item label="配送方式">{{ deliveryInfo.deliveryMethod }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="物流公司">{{ deliveryInfo.logisticsCompany }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="收件人">{{ deliveryInfo.recipientName }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="收件电话">{{ deliveryInfo.recipientPhone }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="收件省市" :span="2">
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <MapPin class="size-4 text-gray-400" />
|
|
|
+ <div class="rounded-lg bg-gray-50 p-4">
|
|
|
+ <h3 class="mb-4 text-sm font-medium text-gray-700">配送信息</h3>
|
|
|
+ <Descriptions :column="4" :size="'small'">
|
|
|
+ <Descriptions.Item label="配送方式">
|
|
|
+ {{ deliveryInfo.deliveryMethod }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="物流公司">
|
|
|
+ {{ deliveryInfo.logisticsCompany }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="收件人">
|
|
|
+ {{ deliveryInfo.recipientName }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="收件电话">
|
|
|
+ {{ deliveryInfo.recipientPhone }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="收件省市" :span="2">
|
|
|
{{ deliveryInfo.provinceCity }}
|
|
|
- </div>
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="详细地址" :span="2">
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <MapPin class="size-4 text-gray-400" />
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="详细地址" :span="2">
|
|
|
{{ deliveryInfo.detailAddress }}
|
|
|
- </div>
|
|
|
- </Descriptions.Item>
|
|
|
- </Descriptions>
|
|
|
- </div>
|
|
|
+ </Descriptions.Item>
|
|
|
+ </Descriptions>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="bg-gray-50 rounded-lg p-4">
|
|
|
- <h3 class="text-sm font-medium text-gray-700 mb-4 flex items-center gap-2">
|
|
|
- <Clock class="size-4 text-blue-500" />
|
|
|
- 用药信息和金额
|
|
|
- </h3>
|
|
|
- <Descriptions :column="4" :size="'small'">
|
|
|
- <Descriptions.Item label="每日剂数">{{ usageInfo.dailyCount }} 剂</Descriptions.Item>
|
|
|
- <Descriptions.Item label="用药途径">{{ usageInfo.usageRoute }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="用药方法">{{ usageInfo.usageMethod }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="使用频次">{{ usageInfo.usageFrequency }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="服药时间">{{ usageInfo.takeTime }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="处方药味数">{{ usageInfo.prescriptionMedicineCount }} 味</Descriptions.Item>
|
|
|
- <Descriptions.Item label="药品总金额">¥{{ usageInfo.totalAmount.toFixed(2) }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="代煎或加工费金额">¥{{ usageInfo.decoctionFee.toFixed(2) }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="配送金额">¥{{ usageInfo.deliveryFee.toFixed(2) }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="处方总金额">¥{{ usageInfo.prescriptionTotalAmount.toFixed(2) }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="医保报销金额">¥{{ usageInfo.medicalInsuranceAmount.toFixed(2) }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="自付金额">¥{{ usageInfo.selfPayAmount.toFixed(2) }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="药师备注">¥{{ usageInfo.dispensingFee.toFixed(2) }}</Descriptions.Item>
|
|
|
- </Descriptions>
|
|
|
- </div>
|
|
|
+ <div class="rounded-lg bg-gray-50 p-4">
|
|
|
+ <h3 class="mb-4 text-sm font-medium text-gray-700">
|
|
|
+ 用药信息和金额
|
|
|
+ </h3>
|
|
|
+ <Descriptions :column="4" :size="'small'">
|
|
|
+ <Descriptions.Item label="每日剂数">
|
|
|
+ {{ usageInfo.dailyCount }} 剂
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="用药途径">
|
|
|
+ {{ usageInfo.usageRoute }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="用药方法">
|
|
|
+ {{ usageInfo.usageMethod }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="使用频次">
|
|
|
+ {{ usageInfo.usageFrequency }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="服药时间">
|
|
|
+ {{ usageInfo.takeTime }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="处方药味数">
|
|
|
+ {{ usageInfo.prescriptionMedicineCount }} 味
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="药品总金额">
|
|
|
+ ¥{{ formatMoney(usageInfo.totalAmount) }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="代煎或加工费金额">
|
|
|
+ ¥{{ formatMoney(usageInfo.decoctionFee) }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="配送金额">
|
|
|
+ ¥{{ formatMoney(usageInfo.deliveryFee) }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="处方总金额">
|
|
|
+ ¥{{ formatMoney(usageInfo.prescriptionTotalAmount) }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="医保报销金额">
|
|
|
+ ¥{{ formatMoney(usageInfo.medicalInsuranceAmount) }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="自付金额">
|
|
|
+ ¥{{ formatMoney(usageInfo.selfPayAmount) }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="药师备注" :span="2">
|
|
|
+ {{ usageInfo.pharmacistRemark }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ </Descriptions>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="bg-gray-50 rounded-lg p-4">
|
|
|
- <h3 class="text-sm font-medium text-gray-700 mb-4 flex items-center gap-2">
|
|
|
- <CreditCard class="size-4 text-purple-500" />
|
|
|
- 就诊信息
|
|
|
- </h3>
|
|
|
- <Descriptions :column="4" :size="'small'">
|
|
|
- <Descriptions.Item label="门诊/住院">{{ doctorInfo.outpatientType }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="门诊/住院号">{{ doctorInfo.outpatientNo }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="科室/病区">{{ doctorInfo.department }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="医生姓名">
|
|
|
- <div class="flex items-center gap-2">
|
|
|
- <Stethoscope class="size-4 text-gray-400" />
|
|
|
+ <div class="rounded-lg bg-gray-50 p-4">
|
|
|
+ <h3 class="mb-4 text-sm font-medium text-gray-700">就诊信息</h3>
|
|
|
+ <Descriptions :column="4" :size="'small'">
|
|
|
+ <Descriptions.Item label="门诊/住院">
|
|
|
+ {{ doctorInfo.outpatientType }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="门诊/住院号">
|
|
|
+ {{ doctorInfo.outpatientNo }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="科室/病区">
|
|
|
+ {{ doctorInfo.department }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="医生姓名">
|
|
|
{{ doctorInfo.doctorName }}
|
|
|
- </div>
|
|
|
- </Descriptions.Item>
|
|
|
- <Descriptions.Item label="中医病名">{{ doctorInfo.chineseMedicineName }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="中医证型">{{ doctorInfo.chineseMedicineCode }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="治则治法">{{ doctorInfo.diagnosisMethod }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="妊娠标识">{{ doctorInfo.chineseMedicineCodeSecond }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="哺乳标识">{{ doctorInfo.diagnosisMethodSecond }}</Descriptions.Item>
|
|
|
- <Descriptions.Item label="医生备注" :span="2">{{ doctorInfo.doctorNote || '-' }}</Descriptions.Item>
|
|
|
- </Descriptions>
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="中医病名">
|
|
|
+ {{ doctorInfo.chineseMedicineName }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="中医证型">
|
|
|
+ {{ doctorInfo.chineseMedicineCode }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="治则治法">
|
|
|
+ {{ doctorInfo.diagnosisMethod }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="妊娠标识">
|
|
|
+ {{ doctorInfo.pregnancyFlag }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="哺乳标识">
|
|
|
+ {{ doctorInfo.lactationFlag }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="医生备注" :span="2">
|
|
|
+ {{ doctorInfo.doctorNote || '-' }}
|
|
|
+ </Descriptions.Item>
|
|
|
+ </Descriptions>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </Tabs.TabPane>
|
|
|
+ </Tabs.TabPane>
|
|
|
|
|
|
- <Tabs.TabPane key="herbal" tab="饮片明细">
|
|
|
- <div class="bg-gray-50 rounded-lg p-4">
|
|
|
- <div class="overflow-x-auto">
|
|
|
- <table class="w-full text-sm">
|
|
|
- <thead>
|
|
|
- <tr class="bg-white">
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">药品名称</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">国标编码</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">医疗机构药品名称</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">规格</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">产地</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">剂量</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">药品单位</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">中药特殊煎法</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">药品单价(元)</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">医生签名</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="(item, index) in herbalDetails" :key="index" class="bg-white hover:bg-gray-50">
|
|
|
- <td class="px-4 py-3 border-b">{{ item.name }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.nationalCode }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.hospitalName }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.spec }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.origin }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.dosage }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.unit }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.specialMethod }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.price || '-' }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.doctorSignature }}</td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ <Tabs.TabPane key="herbal" tab="饮片明细">
|
|
|
+ <div class="rounded-lg bg-gray-50 p-4">
|
|
|
+ <div v-if="herbalDetails.length" class="overflow-x-auto">
|
|
|
+ <table class="w-full text-sm">
|
|
|
+ <thead>
|
|
|
+ <tr class="bg-white">
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 药品名称
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 国标编码
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 医疗机构药品名称
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 规格
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 产地
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 剂量
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 药品单位
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 中药特殊煎法
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 药品单价(元)
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 医生签名
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr
|
|
|
+ v-for="(item, index) in herbalDetails"
|
|
|
+ :key="index"
|
|
|
+ class="bg-white hover:bg-gray-50"
|
|
|
+ >
|
|
|
+ <td class="border-b px-4 py-3">{{ item.name }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.nationalCode }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.hospitalName }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.spec }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.origin }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.dosage }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.unit }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.specialMethod }}</td>
|
|
|
+ <td class="border-b px-4 py-3">
|
|
|
+ {{ item.price || '-' }}
|
|
|
+ </td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.doctorSignature }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <Empty v-else description="暂无饮片明细" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </Tabs.TabPane>
|
|
|
+ </Tabs.TabPane>
|
|
|
|
|
|
- <Tabs.TabPane key="flow" tab="流程物流追溯">
|
|
|
- <div class="bg-gray-50 rounded-lg p-4">
|
|
|
- <div class="grid grid-cols-2 gap-4">
|
|
|
- <div class="bg-white rounded-lg p-4">
|
|
|
- <h3 class="text-sm font-medium text-gray-700 mb-4">处方流转流程</h3>
|
|
|
- <div class="relative pl-6 border-l-2 border-gray-200">
|
|
|
- <div v-for="(item, index) in processFlowDetails" :key="index" class="relative pb-4 last:pb-0">
|
|
|
- <div class="absolute -left-[9px] w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
|
|
|
- <div class="ml-2">
|
|
|
- <div style="display: flex;align-items: center;justify-content: space-between;padding-right: 100px;">
|
|
|
- <div class="text-sm font-medium text-gray-800">{{ item.status }}</div>
|
|
|
- <div class="text-xs text-gray-500">操作时间: {{ item.operationTime }}</div>
|
|
|
- </div>
|
|
|
- <div style="display: flex;align-items: center;justify-content: space-between;padding-right: 100px;">
|
|
|
- <div class="text-xs text-gray-500 mt-1">操作人: {{ item.operator }}</div>
|
|
|
- <div class="mt-1">
|
|
|
- <span class="text-xs text-gray-500 mt-1">环节照片/视频:</span><a href="#" class="text-xs text-blue-500 hover:text-blue-700"> 查看照片</a>
|
|
|
+ <Tabs.TabPane key="flow" tab="流程物流追溯">
|
|
|
+ <div class="rounded-lg bg-gray-50 p-4">
|
|
|
+ <div class="grid grid-cols-2 gap-4">
|
|
|
+ <div class="rounded-lg bg-white p-4">
|
|
|
+ <h3 class="mb-4 text-sm font-medium text-gray-700">
|
|
|
+ 处方流转流程
|
|
|
+ </h3>
|
|
|
+ <div
|
|
|
+ v-if="processFlowDetails.length"
|
|
|
+ class="relative border-l-2 border-gray-200 pl-6"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in processFlowDetails"
|
|
|
+ :key="index"
|
|
|
+ class="relative pb-4 last:pb-0"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="absolute -left-[9px] h-4 w-4 rounded-full border-2 border-white bg-green-500"
|
|
|
+ />
|
|
|
+ <div class="ml-2">
|
|
|
+ <div
|
|
|
+ class="flex items-center justify-between pr-24 text-sm font-medium text-gray-800"
|
|
|
+ >
|
|
|
+ <span>{{ item.status }}</span>
|
|
|
+ <span class="text-xs text-gray-500">
|
|
|
+ 操作时间: {{ item.operationTime }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-1 flex items-center justify-between pr-24 text-xs text-gray-500"
|
|
|
+ >
|
|
|
+ <span>操作人: {{ item.operator }}</span>
|
|
|
+ <span v-if="item.hasPhoto">
|
|
|
+ 环节照片/视频:
|
|
|
+ <a
|
|
|
+ v-if="item.photoUrl"
|
|
|
+ :href="item.photoUrl"
|
|
|
+ class="text-blue-500 hover:text-blue-700"
|
|
|
+ rel="noopener noreferrer"
|
|
|
+ target="_blank"
|
|
|
+ >
|
|
|
+ 查看照片
|
|
|
+ </a>
|
|
|
+ <span v-else>有</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.water" class="text-xs text-gray-500">
|
|
|
+ 加水量: {{ item.water }}
|
|
|
+ </div>
|
|
|
+ <div v-if="item.weightCheck" class="text-xs text-gray-500">
|
|
|
+ 复核重量: {{ item.weightCheck }}
|
|
|
+ </div>
|
|
|
+ <div v-if="item.weight" class="text-xs text-gray-500">
|
|
|
+ 实际重量: {{ item.weight }}
|
|
|
+ </div>
|
|
|
+ <div v-if="item.deviceName" class="text-xs text-gray-500">
|
|
|
+ 设备: {{ item.deviceName }}
|
|
|
+ </div>
|
|
|
+ <div v-if="item.note" class="mt-1 text-xs text-gray-500">
|
|
|
+ 备注: {{ item.note }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="item.water" class="text-xs text-gray-500">加水量: {{ item.water }}</div>
|
|
|
- <div v-if="item.weightCheck" class="text-xs text-gray-500">复核重量: {{ item.weightCheck }}</div>
|
|
|
- <div v-if="item.weight" class="text-xs text-gray-500">调配重量: {{ item.weight }}</div>
|
|
|
- <div v-if="item.note" class="text-xs text-gray-500 mt-1">备注: {{ item.note }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <Empty v-else description="暂无流转流程" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="bg-white rounded-lg p-4">
|
|
|
- <h3 class="text-sm font-medium text-gray-700 mb-4">物流跟踪</h3>
|
|
|
- <div class="flex items-center justify-between mb-4">
|
|
|
- <span class="text-sm text-gray-500">{{ logisticsInfo.company }} {{ logisticsInfo.trackingNo }}</span>
|
|
|
- <span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs">{{ logisticsInfo.status }}</span>
|
|
|
- </div>
|
|
|
- <div class="relative pl-6 border-l-2 border-gray-200">
|
|
|
- <div class="absolute -left-[9px] w-4 h-4 bg-yellow-500 rounded-full border-2 border-white"></div>
|
|
|
- <div class="ml-2">
|
|
|
- <div class="text-sm font-medium text-gray-800">{{ logisticsInfo.status }}</div>
|
|
|
- <div class="text-xs text-gray-500 mt-1">{{ logisticsInfo.statusTime }}</div>
|
|
|
- <div class="text-xs text-gray-500 mt-1">{{ logisticsInfo.progress }}</div>
|
|
|
- </div>
|
|
|
+ <div class="rounded-lg bg-white p-4">
|
|
|
+ <h3 class="mb-4 text-sm font-medium text-gray-700">物流跟踪</h3>
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ logisticsInfo.company ||
|
|
|
+ logisticsInfo.trackingNo ||
|
|
|
+ logisticsNodes.length
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="mb-4 flex items-center justify-between">
|
|
|
+ <span class="text-sm text-gray-500">
|
|
|
+ {{ logisticsInfo.company }}
|
|
|
+ {{ logisticsInfo.trackingNo }}
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="logisticsInfo.status !== '-'"
|
|
|
+ class="rounded bg-yellow-100 px-2 py-1 text-xs text-yellow-700"
|
|
|
+ >
|
|
|
+ {{ logisticsInfo.status }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="logisticsNodes.length"
|
|
|
+ class="relative border-l-2 border-gray-200 pl-6"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in logisticsNodes"
|
|
|
+ :key="index"
|
|
|
+ class="relative pb-4 last:pb-0"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="absolute -left-[9px] h-4 w-4 rounded-full border-2 border-white bg-yellow-500"
|
|
|
+ />
|
|
|
+ <div class="ml-2">
|
|
|
+ <div
|
|
|
+ class="flex items-center justify-between pr-8 text-sm font-medium text-gray-800"
|
|
|
+ >
|
|
|
+ <span>{{ item.status }}</span>
|
|
|
+ <span class="text-xs text-gray-500">
|
|
|
+ {{ item.operationTime }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="mt-1 text-xs text-gray-500">
|
|
|
+ 操作人: {{ item.operator }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="item.location && item.location !== '-'"
|
|
|
+ class="text-xs text-gray-500"
|
|
|
+ >
|
|
|
+ 地点: {{ item.location }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="item.trackingNumber && item.trackingNumber !== '-'"
|
|
|
+ class="text-xs text-gray-500"
|
|
|
+ >
|
|
|
+ 运单号: {{ item.trackingNumber }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="item.note && item.note !== '-'"
|
|
|
+ class="mt-1 text-xs text-gray-500"
|
|
|
+ >
|
|
|
+ 备注: {{ item.note }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-else-if="logisticsInfo.progress"
|
|
|
+ class="text-xs text-gray-500"
|
|
|
+ >
|
|
|
+ {{ logisticsInfo.progress }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <Empty v-else description="暂无物流信息" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </Tabs.TabPane>
|
|
|
+ </Tabs.TabPane>
|
|
|
|
|
|
- <Tabs.TabPane key="trace" tab="饮片追溯">
|
|
|
- <div class="bg-gray-50 rounded-lg p-4">
|
|
|
- <div class="overflow-x-auto">
|
|
|
- <table class="w-full text-sm">
|
|
|
- <thead>
|
|
|
- <tr class="bg-white">
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">饮片名称</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">规格编码</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">饮片批号</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">供应商</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">生产厂家</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">饮片产地</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">生产日期</th>
|
|
|
- <th class="px-4 py-3 text-left font-medium text-gray-700 border-b">有效期至</th>
|
|
|
- <th class="px-4 py-3 text-center font-medium text-gray-700 border-b">检验报告</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="(item, index) in herbalTraceDetails" :key="index" class="bg-white hover:bg-gray-50">
|
|
|
- <td class="px-4 py-3 border-b">{{ item.name }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.specCode }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.batchNo }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.supplier }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.manufacturer }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.origin }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.productionDate }}</td>
|
|
|
- <td class="px-4 py-3 border-b">{{ item.expiryDate }}</td>
|
|
|
- <td class="px-4 py-3 border-b text-center">
|
|
|
- <a href="#" class="text-blue-500 hover:text-blue-700 underline">查看</a>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ <Tabs.TabPane key="trace" tab="饮片追溯">
|
|
|
+ <div class="rounded-lg bg-gray-50 p-4">
|
|
|
+ <div v-if="herbalTraceDetails.length" class="overflow-x-auto">
|
|
|
+ <table class="w-full text-sm">
|
|
|
+ <thead>
|
|
|
+ <tr class="bg-white">
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 饮片名称
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 规格编码
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 饮片批号
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 供应商
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 生产厂家
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 饮片产地
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 生产日期
|
|
|
+ </th>
|
|
|
+ <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
|
|
|
+ 有效期至
|
|
|
+ </th>
|
|
|
+ <th
|
|
|
+ class="border-b px-4 py-3 text-center font-medium text-gray-700"
|
|
|
+ >
|
|
|
+ 检验报告
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr
|
|
|
+ v-for="(item, index) in herbalTraceDetails"
|
|
|
+ :key="index"
|
|
|
+ class="bg-white hover:bg-gray-50"
|
|
|
+ >
|
|
|
+ <td class="border-b px-4 py-3">{{ item.name }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.specCode }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.batchNo }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.supplier }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.manufacturer }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.origin }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.productionDate }}</td>
|
|
|
+ <td class="border-b px-4 py-3">{{ item.expiryDate }}</td>
|
|
|
+ <td class="border-b px-4 py-3 text-center">
|
|
|
+ <a
|
|
|
+ v-if="item.reportUrl"
|
|
|
+ :href="item.reportUrl"
|
|
|
+ class="text-blue-500 underline hover:text-blue-700"
|
|
|
+ rel="noopener noreferrer"
|
|
|
+ target="_blank"
|
|
|
+ >
|
|
|
+ 查看
|
|
|
+ </a>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <Empty v-else description="暂无饮片追溯数据" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </Tabs.TabPane>
|
|
|
- </Tabs>
|
|
|
- </div>
|
|
|
+ </Tabs.TabPane>
|
|
|
+ </Tabs>
|
|
|
+ </div>
|
|
|
+ </Spin>
|
|
|
</Page>
|
|
|
</template>
|