|
|
@@ -0,0 +1,421 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+import { computed, ref } 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);
|
|
|
+
|
|
|
+const mockPrescription = {
|
|
|
+ id: prescriptionId.value || '20230923238475',
|
|
|
+ date: '2023-09-23',
|
|
|
+ status: '打包中',
|
|
|
+ medicalInstitution: '蒋村社区卫生服务中心',
|
|
|
+ campus: '-',
|
|
|
+ decoctionCenter: '重煎药中心华东区',
|
|
|
+ decoctionCode: '代煎',
|
|
|
+ patientName: '唐*理',
|
|
|
+ gender: '女',
|
|
|
+ age: '48岁',
|
|
|
+ phone: '138****1233',
|
|
|
+};
|
|
|
+
|
|
|
+const prescriptionDetails = {
|
|
|
+ chineseMedicineType: '饮片(散装)',
|
|
|
+ chineseMedicineForm: '汤剂',
|
|
|
+ prescriptionCount: 7,
|
|
|
+ eachPackageCount: 2,
|
|
|
+ totalCount: 14,
|
|
|
+ decoctionMark: '否',
|
|
|
+ decoctionTime: '200ml',
|
|
|
+ packageType: '袋装',
|
|
|
+ decoctionTimeMark: 30,
|
|
|
+ decoctionTimeValue: 40,
|
|
|
+ decoctionTimeSecond: 30,
|
|
|
+ decoctionTimeSecondValue: 40,
|
|
|
+};
|
|
|
+
|
|
|
+const deliveryInfo = {
|
|
|
+ deliveryMethod: '配送到家',
|
|
|
+ logisticsCompany: '顺丰速运',
|
|
|
+ recipientName: '唐*理',
|
|
|
+ recipientPhone: '138****2374',
|
|
|
+ provinceCity: '浙江省杭州市西湖区',
|
|
|
+ detailAddress: '蒋村街道**********',
|
|
|
+};
|
|
|
+
|
|
|
+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 doctorInfo = {
|
|
|
+ outpatientType: '住院',
|
|
|
+ outpatientNo: '93859496',
|
|
|
+ department: '中医科(20号)',
|
|
|
+ doctorName: '王卫国',
|
|
|
+ chineseMedicineName: '腰痛',
|
|
|
+ chineseMedicineCode: '肝肾亏虚',
|
|
|
+ diagnosisMethod: '补益肝肾',
|
|
|
+ chineseMedicineType: '腰痛',
|
|
|
+ chineseMedicineCodeSecond: '肝肾亏虚',
|
|
|
+ diagnosisMethodSecond: '补益肝肾',
|
|
|
+ doctorNote: '',
|
|
|
+};
|
|
|
+
|
|
|
+const herbalDetails = [
|
|
|
+ { name: '麸炒苍术', nationalCode: '06130203958365938', hospitalName: '麸炒苍术', spec: '1kg', origin: '山东', dosage: 9.0000, unit: 'g', specialMethod: 3, price: '', doctorSignature: '否' },
|
|
|
+];
|
|
|
+
|
|
|
+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' },
|
|
|
+];
|
|
|
+
|
|
|
+const processFlowDetails = [
|
|
|
+ { status: '已开始浓缩', operator: '李*霞', operationTime: '2023-09-23 10:25:38', note: '开始浓缩药液量: 2100ml', hasPhoto: true },
|
|
|
+ { status: '已开始煎煮', operator: '李*霞', operationTime: '2023-09-23 10:24:38', note: '加水量: 3500ml', hasPhoto: true },
|
|
|
+ { status: '已复核', operator: '王*霞', operationTime: '2023-09-23 10:23:38', note: '复核重量: 1949.50g', hasPhoto: true },
|
|
|
+ { status: '已调配', operator: '吴*', operationTime: '2023-09-23 10:22:38', note: '调配重量: 1948.31g', hasPhoto: true },
|
|
|
+ { status: '药房审核已通过', operator: '崔*红', operationTime: '2023-09-23 09:21:38', note: '', hasPhoto: true },
|
|
|
+];
|
|
|
+
|
|
|
+const logisticsInfo = {
|
|
|
+ company: '顺丰速运',
|
|
|
+ trackingNo: 'SF73648596038958987',
|
|
|
+ status: '已揽件',
|
|
|
+ statusTime: '2023-09-23 09:25:38',
|
|
|
+ progress: '返回内容返回内容返回内容返回内容返回内容返回内容返回内容返回内容返回内容返回内容返回内容',
|
|
|
+};
|
|
|
+
|
|
|
+function goBack() {
|
|
|
+ window.history.back();
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <Page auto-content-height>
|
|
|
+ <template #page-header>
|
|
|
+ <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"
|
|
|
+ @click="goBack"
|
|
|
+ >
|
|
|
+ <ArrowLeft class="size-5" />
|
|
|
+ <span>返回</span>
|
|
|
+ </button>
|
|
|
+ <Breadcrumb>
|
|
|
+ <Breadcrumb.Item>处方管理</Breadcrumb.Item>
|
|
|
+ <Breadcrumb.Item>处方列表</Breadcrumb.Item>
|
|
|
+ <Breadcrumb.Item>处方详情</Breadcrumb.Item>
|
|
|
+ </Breadcrumb>
|
|
|
+ </div>
|
|
|
+ </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" />
|
|
|
+ <span class="text-lg font-semibold">煎药中心处方</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>
|
|
|
+
|
|
|
+ <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.Item label="二煎浸泡时间">{{ prescriptionDetails.decoctionTimeSecond }}分钟</Descriptions.Item>
|
|
|
+ <Descriptions.Item label="二煎煎煮时间">{{ prescriptionDetails.decoctionTimeSecondValue }}分钟</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" />
|
|
|
+ {{ deliveryInfo.provinceCity }}
|
|
|
+ </div>
|
|
|
+ </Descriptions.Item>
|
|
|
+ <Descriptions.Item label="详细地址" :span="2">
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
+ <MapPin class="size-4 text-gray-400" />
|
|
|
+ {{ deliveryInfo.detailAddress }}
|
|
|
+ </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.Item label="处方总金额">¥{{ usageInfo.prescriptionTotalAmountSecond.toFixed(2) }}</Descriptions.Item>
|
|
|
+ <Descriptions.Item label="医保报销金额">¥{{ usageInfo.medicalInsuranceAmountSecond.toFixed(2) }}</Descriptions.Item>
|
|
|
+ <Descriptions.Item label="自付金额">¥{{ usageInfo.selfPayAmountSecond.toFixed(2) }}</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" />
|
|
|
+ {{ 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.chineseMedicineType }}</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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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 class="text-sm font-medium text-gray-800">{{ item.status }}</div>
|
|
|
+ <div class="text-xs text-gray-500 mt-1">操作人: {{ item.operator }}</div>
|
|
|
+ <div class="text-xs text-gray-500">操作时间: {{ item.operationTime }}</div>
|
|
|
+ <div v-if="item.note" class="text-xs text-gray-500">备注: {{ item.note }}</div>
|
|
|
+ <div v-if="item.hasPhoto" class="mt-1">
|
|
|
+ <a href="#" class="text-xs text-blue-500 hover:text-blue-700">环节照片/视频: 查看照片</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Tabs.TabPane>
|
|
|
+ </Tabs>
|
|
|
+ </div>
|
|
|
+ </Page>
|
|
|
+</template>
|