hospital-admin/src/components/medinceOrderModal.vue
zoujiandong e1c8a1105e 修改
2024-06-04 15:44:14 +08:00

797 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<a-modal
v-model:visible="medinceVisible"
fullscreen
title="药品订单详情"
title-align="start"
:auto-label-width="true"
:footer="false"
@cancel="handleClose"
>
<div class="titlebox">
<div class="bar"></div>
<div class="name">订单信息</div>
</div>
<a-form :model="modalForm" ref="modalFormRef" :auto-label-width="true">
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="12">
<a-form-item field="inquiry_no" label="订单编号:">
<span>{{ modalForm.order_product_no }}</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="order_product_status" label="处方编号:">
<span v-if="modalForm.order_prescription">{{
modalForm.order_prescription.prescription_code
}}</span>
<span v-else>暂无</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item field="user.created_at" label="下单时间:">
<span>{{ modalForm.created_at }}</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="pay_time" label="支付时间:">
<span v-if="parseTime(modalForm.pay_time)">{{
parseTime(modalForm.pay_time)
}}</span>
<span v-else>-</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item field="amount_total" label="订单金额:">
<span>{{ modalForm.amount_total }}元</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="logistics_fee" label="邮费:">
<span>{{ modalForm.logistics_fee }}元</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item field="payment_amount_total" label="实付金额:">
<span>{{ modalForm.payment_amount_total }}元</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="order_product_status" label="订单状态:">
<span>{{
formatProductStatus(modalForm.order_product_status)
}}</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="modalForm.cancel_reason">
<a-col :span="24">
<a-form-item field="department_custom_name" label="备 注 ">
<span>{{
formatProductCancelReason(modalForm.cancel_reason)
}}</span>
</a-form-item>
</a-col>
</a-row>
<a-divider />
<div class="titlebox" v-if="modalForm.order_product_refund">
<div class="bar"></div>
<div class="name">退款信息</div>
</div>
<a-row
:gutter="24"
style="margin-top: 35px"
v-if="modalForm.order_product_refund"
>
<a-col :span="12">
<a-form-item field="inquiry_refund_no" label="退款编号:">
<span>{{ modalForm.order_product_refund.product_refund_no }}</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="escrow_trade_no" label=" 第三方订单编号:">
<span>{{ modalForm.order_product_refund.refund_id }}</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="modalForm.order_product_refund">
<a-col :span="12">
<a-form-item field="inquiry_refund_no" label="退款金额:">
<span>{{ modalForm.order_product_refund.refund_total }}元</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="escrow_trade_no" label="退款状态:">
<span>{{
formatRefundStatus(
modalForm.order_product_refund.product_refund_status
)
}}</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="modalForm.order_product_refund">
<a-col :span="24">
<a-form-item field="inquiry_refund_no" label="退款时间:">
<span
v-if="parseTime(modalForm.order_product_refund.success_time)"
>{{ modalForm.order_product_refund.success_time }}</span
>
<span v-else>-</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="modalForm.order_product_refund">
<a-col :span="24">
<a-form-item field="inquiry_refund_no" label="退款原因:">
<span>{{ modalForm.order_product_refund.refund_reason }}</span>
</a-form-item>
</a-col>
</a-row>
<a-divider v-if="modalForm.order_product_refund" />
<div class="titlebox" v-if="modalForm.order_product_item && modalForm.order_product_item.length > 0">
<div class="bar"></div>
<div class="name">药品信息</div>
</div>
<a-row
:gutter="24"
style="margin-top: 35px"
v-if="
modalForm.order_product_item &&
modalForm.order_product_item.length > 0
"
>
<a-col :span="24">
<a-form-item field="license_cert" :hide-label="true">
<a-list>
<a-list-item
v-for="item in modalForm.order_product_item"
:key="item.product_item_id"
>
<a-list-item-meta
:title="item.product_name + item.product_spec"
:description="item.manufacturer + '*' + item.amount"
>
<template #avatar>
<a-avatar shape="square">
<img
alt="avatar"
src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
/>
</a-avatar>
</template>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-form-item>
</a-col>
</a-row>
<a-divider
v-if="
modalForm.order_product_item &&
modalForm.order_product_item.length > 0
"
/>
<div class="titlebox">
<div class="bar"></div>
<div class="name">地址信息</div>
<a-space
style="
margin-right: 8px;
flex: 1;
display: flex;
justify-content: flex-end;
"
>
<a-button type="primary" status="warning" @click="toggleAddress">{{
lookAllAddress ? '隐藏完整地址信息' : '查看完整地址信息'
}}</a-button>
</a-space>
</div>
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="12">
<a-form-item field="inquiry_no" label="收货人姓名:">
<span v-if="!lookAllAddress">
{{ modalForm.consignee_name_mask }}</span
>
<span v-else>{{ AddressData.consignee_name }}</span>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="inquiry_no" label="收货人电话:">
<span v-if="!lookAllAddress">
{{ modalForm.consignee_tel_mask }}</span
>
<span v-else>{{ AddressData.consignee_tel }}</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="24">
<a-form-item field="inquiry_no" label="收货人地址:">
<span v-if="!lookAllAddress"> {{ modalForm.address_mask }}</span>
<span v-else>{{ AddressData.address }}</span>
</a-form-item>
</a-col>
</a-row>
<a-divider />
<div class="titlebox">
<div class="bar"></div>
<div class="name">物流信息</div>
</div>
<a-row v-if="modalForm.order_product_logistics" style="margin-top: 35px">
<a
:href="
'https://www.baidu.com/s?ie=UTF-8&wd=' +
modalForm.order_product_logistics.logistics_no
"
target="_blank"
class="express"
><span>物流单号:</span
>{{ modalForm.order_product_logistics.logistics_no }}</a
>
</a-row>
<a-row :gutter="24">
<a-col :span="24">
<a-form-item field="license_cert" :hide-label="true">
<div class="timeline" v-if="modalForm.order_product_logistics">
<a-timeline>
<a-timeline-item
:label="item.time"
:dotColor="formatColor(item.status)"
v-for="item in cur_express"
>
{{ item.context }}
</a-timeline-item>
</a-timeline>
<a-button @click="toggleExpand" class="expand">{{
isExpand ? '收起' : '展开'
}}</a-button>
</div>
<div v-else>暂无物流信息</div>
</a-form-item>
</a-col>
</a-row>
<a-divider />
<div class="titlebox" v-if="modalForm.order_prescription">
<div class="bar"></div>
<div class="name">处方信息</div>
</div>
<a-row
:gutter="24"
style="margin-top: 35px"
v-if="modalForm.order_prescription"
>
<a-col :span="24">
<a-form-item field="license_cert" :hide-label="true">
<tableUnit
:pagination="false"
:columns="chufang_columns"
:data="chufang_data"
></tableUnit>
<!-- <prescription :data="modalForm.order_prescription"></prescription> -->
</a-form-item>
</a-col>
</a-row>
<a-divider v-if="modalForm.order_prescription" />
<div class="titlebox" v-if="modalForm.user_doctor">
<div class="bar"></div>
<div class="name">医生信息</div>
<a-space
style="
margin-right: 8px;
flex: 1;
display: flex;
justify-content: flex-end;
"
>
<a-button type="primary" @click="openDcotor"
>查看医生完整信息</a-button
>
</a-space>
</div>
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="24">
<a-form-item field="license_cert" :hide-label="true">
<div class="doctorInfo" v-if="modalForm.user_doctor">
<a-space size="large">
<a-image
width="80"
height="80"
class="headImg"
:src="modalForm.user_doctor.avatar"
v-if="modalForm.user_doctor.avatar"
>
</a-image>
<a-image
width="80"
height="80"
class="headImg"
src="https://img.applets.igandanyiyuan.com/basic/file/doctor_avatar.png"
v-else
>
</a-image>
</a-space>
<div class="infobox">
<div class="name">
{{ modalForm.user_doctor.user_name }}&nbsp;&nbsp;{{
formatDoctorTitle(modalForm.user_doctor.doctor_title)
}}
</div>
<div class="hospital">
{{
modalForm.user_doctor.hospital.hospital_name
}}&nbsp;&nbsp;{{
modalForm.user_doctor.department_custom_name
}}
</div>
</div>
</div>
<div class="doctorInfo" v-else>暂未分配到医生</div>
</a-form-item>
</a-col>
</a-row>
<a-divider v-if="modalForm.user_doctor" />
<div class="titlebox">
<div class="bar"></div>
<div class="name">就诊人信息</div>
<a-space
style="
margin-right: 8px;
flex: 1;
display: flex;
justify-content: flex-end;
"
>
<a-button type="primary" status="warning" @click="openPatient"
>查看就诊人完整信息</a-button
>
</a-space>
</div>
<a-row
:gutter="24"
style="margin-top: 35px"
v-if="modalForm.order_inquiry_case"
>
<a-col :span="24">
<a-form-item label="就诊人姓名:">
<span
>{{ modalForm.order_inquiry_case.name }}&nbsp;&nbsp;{{
modalForm.order_inquiry_case.sex == 1 ? '男' : '女'
}}&nbsp;&nbsp;{{ modalForm.order_inquiry_case.age }}岁)</span
>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="modalForm.order_inquiry_case">
<a-col :span="24">
<a-form-item field="inquiry_no" label="病情描述:">
<span>{{ modalForm.order_inquiry_case.disease_desc }}</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="modalForm.order_inquiry_case">
<a-col :span="24">
<a-form-item field="inquiry_no" label="确诊疾病:">
<span
>{{
modalForm.order_inquiry_case.disease_class_name
}}&nbsp;&nbsp;{{
modalForm.user_doctor.department_custom_name
}}</span
>
</a-form-item>
</a-col>
</a-row>
<a-divider />
<div class="titlebox">
<div class="bar"></div>
<div class="name">处方上报状态</div>
</div>
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="24">
<a-form-item field="inquiry_no" label="上报状态:">
<span> {{ fromatReportStatus(modalForm.report_pre_status) }}</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="24">
<a-form-item field="inquiry_no" label="上报时间:">
<span v-if="parseTime(modalForm.report_pre_time)">
{{ modalForm.report_pre_time }}</span
>
<span v-else>-</span>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24" v-if="modalForm.report_pre_fail_reason">
<a-col :span="24">
<a-form-item field="inquiry_no" label="上报失败原因:">
<span> {{ modalForm.report_pre_fail_reason }}</span>
</a-form-item>
</a-col>
</a-row>
<a-divider />
</a-form>
<div class="titlebox">
<div class="bar"></div>
<div class="name">操作</div>
</div>
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="24">
<a-form-item field="" label="" no-style>
<a-space
style="margin-right: 8px"
v-if="
modalForm.report_pre_status == 2 &&
modalForm.refund_status != 2 &&
modalForm.refund_status != 3
"
>
<a-button
type="primary"
v-has="'admin:sysProductList:report'"
@click="
() => {
isVisible = true;
order_product_id = modalForm.order_product_id;
}
"
>上报处方平台</a-button
>
</a-space>
<!-- 订单状态=2退款状态=45支付状态=2上报状态!=1 -->
<a-space
style="margin-right: 8px"
v-if="
modalForm.order_product_status == 2 &&
modalForm.pay_status == 2 &&
(modalForm.refund_status == 4 ||
modalForm.refund_status == 5 ||
modalForm.refund_status == 0) &&
modalForm.report_pre_status != 1
"
>
<a-button
type="primary"
v-has="'admin:sysProductList:cancel'"
status="danger"
v-show="showCancelOrderBtn"
@click="
() => {
okVisible = true;
cur_product_id = modalForm.order_product_id;
}
"
>取消药品订单</a-button
>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-modal>
<!-- 医生详情弹框 -->
<doctorModal
:doctorVisible="doctorVisible"
:doctor_id="doctor_id"
@doctorVisibleChange="
() => {
doctorVisible = false;
doctor_id = '';
}
"
></doctorModal>
<!-- 患者详情弹窗 -->
<patientModal
:patientVisible="patientVisible"
:data="patientData"
@patientVisibleChange="
() => {
patientVisible = false;
}
"
></patientModal>
<confirmModal
:okVisible="okVisible"
:api="cancelProduct"
:dealType="'order_inquiry_id'"
:payment_amount_total="modalForm.payment_amount_total
" :type="'service'"
:id="cur_product_id"
@closeChange="closeChange"
></confirmModal>
<isOkModal
:isVisible="isVisible"
:api="reportPrePscription"
:title="'确定上报处方吗?'"
:dealType="'order_product_id'"
:id="order_product_id"
@closeChangeOk="closeChangeOk"
></isOkModal>
</template>
<script setup>
import { reactive, ref, getCurrentInstance, watch, toRefs } from 'vue';
import {
productList,
getProductDetail,
cancelProduct,
reportPrePscription,
lookAddress,
inquiryCase,
} from '@/api/order/list';
import { parseTime } from '@/utils/parseTime';
import {
formatDoctorTitle,
fromatReportStatus,
formatPrescriptionStatus,
formatPharmacistStatus,
formatProductCancelReason,
} from '@/utils/format';
const props = defineProps({
// 是否显示
medinceVisible: {
type: Boolean,
default: false,
},
showCancelOrderBtn:{
type: Boolean,
default: true,
},
modalForm: {
type: Object,
default: {
order_product_refund: {},
order_product_item: [],
order_product_logistics: null,
user_doctor: null,
order_prescription: null,
},
},
});
const { medinceVisible, modalForm,showCancelOrderBtn } = toRefs(props);
const IMG_URL = import.meta.env.VITE_IMG_URL;
const emits = defineEmits(['medinceVisibleChange']);
// Akiraka 20230210 监听删除事件
const okVisible = ref(false);
const cur_product_id = ref('');
const doctorVisible = ref(false);
const doctor_id = ref('');
const isVisible = ref(false);
const order_product_id = ref('');
let express = []; //物流信息;
const cur_express = ref([]);
const isExpand = ref(false);
const patientVisible = ref(false);
const patientData = reactive({});
const lookAllAddress = ref(false);
const AddressData = reactive({});
let chufang_data = ref([]);
const chufang_columns = reactive([
{
title: '处方编号',
dataIndex: 'prescription_code',
},
{
title: '处方状态',
dataIndex: 'prescription_status',
},
{
title: '药师审核状态',
dataIndex: 'pharmacist_audit_status',
},
{
title: '医嘱',
dataIndex: 'doctor_advice',
},
{
title: '药师驳回原因',
dataIndex: 'pharmacist_fail_reason',
},
{
title: '处方链接',
dataIndex: 'url',
slotName: 'url',
},
]);
watch(
() => props.modalForm,
(newValue, oldValue) => {
let result = newValue.order_prescription;
let express = newValue.order_product_logistics
? JSON.parse(newValue.order_product_logistics.logistics_content)
: [];
cur_express.value = express.length > 1 && express.slice(0, 1);
let data_arr = [{}];
if (result) {
chufang_columns.forEach((item) => {
if (item.dataIndex == 'prescription_status') {
data_arr[0][item.dataIndex] = formatPrescriptionStatus(
result[item.dataIndex]
);
} else if (item.dataIndex == 'pharmacist_audit_status') {
data_arr[0][item.dataIndex] = formatPharmacistStatus(
result[item.dataIndex]
);
} else if (item.dataIndex == 'url') {
data_arr[0][item.dataIndex] =
IMG_URL +
'/applet/prescription/' +
result.order_prescription_id +
'.pdf';
} else if (item.dataIndex == 'pharmacist_fail_reason') {
data_arr[0][item.dataIndex] = result[item.dataIndex]
? result[item.dataIndex]
: '暂无';
} else {
data_arr[0][item.dataIndex] = result[item.dataIndex];
}
});
chufang_data.value = data_arr;
}
},
{ immediate: true, deep: true }
);
const { proxy } = getCurrentInstance();
const formatProductStatus = (val) => {
//订单状态(<!-- 1:待支付 2:待发货 3:已发货 4:已签收 5:已取消 -->
let data = {
1: '待支付',
2: '待发货',
3: '已发货',
4: '已签收',
5: '已取消',
};
if (val) {
return data[val];
} else {
return '';
}
};
const formatRefundStatus = (val) => {
//问诊订单退款状态0:无退款 1:申请退款 2:退款中 3:退款成功 4:拒绝退款 5:退款关闭 6:退款异常)
let data = {
0: '无退款',
1: '申请退款',
2: '退款中',
3: '退款成功',
4: '拒绝退款',
5: '退款关闭',
6: '退款异常',
};
if (val || val == 0) {
return data[val];
} else {
return '';
}
};
const formatColor = (value) => {
if (value == '签收') {
return '#00B42A';
} else {
return 'var(--color-fill-4)';
}
};
const toggleExpand = () => {
isExpand.value = !isExpand.value;
if (isExpand.value) {
cur_express.value = express.slice(0, -1);
} else {
cur_express.value = express.slice(0, 1);
}
};
const handleClose = () => {
emits('medinceVisibleChange', (medinceVisible.value = false));
};
const toggleAddress = async() => {
if(!lookAllAddress.value){
const { data, code } = await lookAddress(modalForm.value.order_product_id);
if (code == 200) {
Object.assign(AddressData, data);
}
}
lookAllAddress.value = !lookAllAddress.value;
};
//关闭确认框
const closeChange = (data) => {
cur_product_id.value = '';
okVisible.value = false;
if (data) {
modalVisible.value = false;
getProductInfo({ ...pager, ...queryForm });
}
};
//关闭上传处方平台弹框
const closeChangeOk = (data) => {
order_product_id.value = '';
isVisible.value = false;
if (data) {
getDetail(modalForm.order_product_id);
}
};
const openDcotor = () => {
doctor_id.value = modalForm.value.doctor_id;
doctorVisible.value = true;
};
const openPatient = async () => {
if (
modalForm.value.order_inquiry_case &&
modalForm.value.order_inquiry_case.inquiry_case_id
) {
const caseInfo = await inquiryCase(modalForm.value.order_inquiry_case.inquiry_case_id);
Object.assign(patientData, caseInfo.data);
}
patientVisible.value = true;
};
</script>
<style lang="scss">
.action {
margin-bottom: 12px;
}
.doctorInfo {
display: flex;
align-items: center;
}
.row {
line-height: 32px;
display: flex;
}
.row .nameDesc {
text-align: right;
width: 120px;
color: #000;
}
.row .desc {
color: #666;
}
.infobox {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.headImg {
margin-right: 20px;
border-radius: 50%;
width: 80px;
height: 80px;
}
.arco-timeline-item-content-wrapper {
width: 80%;
}
.arco-timeline-item-label {
margin-left: 10px;
}
.expand {
margin-top: 15px;
}
.arco-form-item-content {
word-break: break-all;
}
.express {
margin-bottom: 15px;
font-size: 15px;
}
.express span {
color: #333;
}
</style>