353 lines
11 KiB
Vue
353 lines
11 KiB
Vue
<template>
|
|
<Mask :width="1252" :height="777" :is-show="show" @close="show = false" title="订单详情"
|
|
:show-footer="true">
|
|
<template #default>
|
|
<div class="content">
|
|
<div class="left">
|
|
<div class="goods-detail">
|
|
<div class="title">药品详情</div>
|
|
<el-table border :header-cell-style="{ backgroundColor: '#F1F5FB' }" :data="orderInfo.goodsDetail"
|
|
style="flex: 1">
|
|
<el-table-column label="商品" prop="name" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="数量" prop="number" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="单价" width="100" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.preUnitPrice }}元
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="实价" width="100" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.unitPrice }}元
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="小计" width="100" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.subTotalPrice }}元
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="追溯码" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.traceabilityCode?.length == 2 ? "未绑定追溯码" : scope.row.traceabilityCode }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="service-detail">
|
|
<div class="title">服务详情</div>
|
|
<el-table border :header-cell-style="{ backgroundColor: '#FBF6EB' }" :data="orderInfo.serviceDetail"
|
|
style="flex: 1">
|
|
<el-table-column label="商品" prop="name" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="数量" prop="number" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="单价" width="100" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.preUnitPrice }}元
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="实价" width="100" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.unitPrice }}元
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="小计" width="100" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ scope.row.subTotalPrice }}元
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="追溯码" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
-
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="title">支付信息</div>
|
|
<div class="info">
|
|
<div class="item">
|
|
<div class="label">开单时间</div>
|
|
<div class="value">{{ formatDate(orderInfo.createDatetime) }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">完成时间</div>
|
|
<div class="value">{{ formatDate(orderInfo.payTime) }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">收费员</div>
|
|
<div class="value">{{ orderInfo.salePersonName }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">药师</div>
|
|
<div class="value">{{ orderInfo.dockerName }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">销售人</div>
|
|
<div class="value">{{ orderInfo.salePersonName }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">原价</div>
|
|
<div class="value">￥{{ orderInfo.preTotalPrice }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">优惠</div>
|
|
<div class="value">￥{{ (orderInfo.preTotalPrice - orderInfo.totalPrice).toFixed(2) }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">应收</div>
|
|
<div class="value">￥{{ orderInfo.totalPrice }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">实收</div>
|
|
<div class="value">￥{{ orderInfo.totalPrice }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">支付方式</div>
|
|
<div class="value">{{ getPayTypeStr(orderInfo.payType) }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label" style="color: #333333">收-{{ orderInfo.payType ? getPayTypeStr(orderInfo.payType) : "" }}</div>
|
|
<div class="value" style="color: #FF0000">￥{{ orderInfo.totalPrice }}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">备注</div>
|
|
<div class="value">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
<div class="footer">
|
|
<!-- <el-button type="primary" plain>追溯码</el-button>-->
|
|
<div>
|
|
<!-- <el-button type="danger" plain @click="cancel" v-if="orderInfo.status == 0">取消</el-button>-->
|
|
<span class="default-btn" @click="refund" v-if="orderInfo.status == 1">退款</span>
|
|
<span class="default-btn" @click="print" v-if="orderInfo.status == 1" style="margin-left: 24px">
|
|
打印
|
|
<el-icon class="el-icon--right">
|
|
<Upload/>
|
|
</el-icon>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Mask>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {onMounted, onUnmounted, ref} from "vue";
|
|
import Mask from "@/components/common/Mask.vue";
|
|
import CloseBtn from "@/components/CloseBtn.vue";
|
|
import {Upload} from "@element-plus/icons-vue";
|
|
import {post} from "@/utils/request.ts";
|
|
import {useWsStore} from "@/stores/wsStore.ts";
|
|
import type {Request, Response} from "@/utils/ws.ts";
|
|
import {ElMessage} from "element-plus";
|
|
import {medTypeJson} from "@/assets/config/constants.ts";
|
|
|
|
const show = ref<boolean>(false);
|
|
const orderInfo = ref<any>({});
|
|
|
|
const init = (code: any) => {
|
|
show.value = true;
|
|
post("charge/getByCode", {code: code}).then((res: any) => {
|
|
orderInfo.value = res;
|
|
})
|
|
|
|
}
|
|
//修改时间格式化
|
|
const formatDate = (isoStr: any) => {
|
|
if (!isoStr) {
|
|
return ""
|
|
}
|
|
const date = new Date(isoStr);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
}
|
|
const payTypeObj = {
|
|
0: "微信",
|
|
1: "支付宝",
|
|
2: "现金",
|
|
3: "医保"
|
|
}
|
|
type PayTypeKey = 0 | 1 | 2 | 3;
|
|
const emit = defineEmits(['updateOrderList'])
|
|
|
|
const getPayTypeStr = (payType: number): string => {
|
|
if (Object.keys(payTypeObj).includes(String(payType))) {
|
|
return payTypeObj[payType as PayTypeKey] || "未知";
|
|
}
|
|
return "未知";
|
|
};
|
|
const close = () => {
|
|
show.value = false;
|
|
emit('updateOrderList')
|
|
}
|
|
defineExpose({init})
|
|
const refund = () => {
|
|
console.log(orderInfo.value)
|
|
post("charge/refund", {changeOrderCode: orderInfo.value.code}).then((res: any) => {
|
|
close()
|
|
})
|
|
}
|
|
// const cancel = () => {
|
|
// post("retail/cancelOrder",{orderId:orderInfo.value.id}).then((res:any)=>{
|
|
// close()
|
|
// })
|
|
//
|
|
// }
|
|
const wsStore = useWsStore();
|
|
// 定义 medType 的合法键类型
|
|
type MedTypeKey = keyof typeof medTypeJson;
|
|
|
|
const print = () => {
|
|
if (!orderInfo.value.code) {
|
|
return
|
|
}
|
|
let code = orderInfo.value.code;
|
|
|
|
const printConfig = {} as any;
|
|
post("common/config/getPrintConfig").then((res: any) => {
|
|
printConfig.printName = res.printName
|
|
printConfig.pageType = res.pageType
|
|
if (!printConfig.printName || !printConfig.pageType) {
|
|
ElMessage.error("打印机未设置，请先到设置-打印管理中设置")
|
|
return;
|
|
}
|
|
post("charge/getPrintInfoByCode", {code}).then((res: any) => {
|
|
res.printerName = printConfig.printName
|
|
res.pageType = printConfig.pageType
|
|
if (res.chargeSocialPayLog) {
|
|
res.chargeSocialPayLog.medTypeStr = medTypeJson[res.chargeSocialPayLog.medType as MedTypeKey];
|
|
}
|
|
console.log(res)
|
|
wsStore.sendMessage({
|
|
type: "PrintReceipt",
|
|
config: null,
|
|
data: res
|
|
})
|
|
})
|
|
|
|
})
|
|
}
|
|
|
|
|
|
let request: Request = {
|
|
type: "getPrintList",
|
|
config: null,
|
|
data: null
|
|
}
|
|
wsStore.sendMessage(request);
|
|
const reciceMessage = (response: Response) => {
|
|
}
|
|
onMounted(async () => {
|
|
wsStore.setMessageCallback(reciceMessage)
|
|
})
|
|
onUnmounted(() => {
|
|
wsStore.removeAllMessageCallback()
|
|
})
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@use "@/assets/scss/base";
|
|
|
|
:deep(.el-scrollbar__view) {
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
min-height: 0;
|
|
|
|
.left {
|
|
flex: 1;
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
|
|
.goods-detail {
|
|
height: 311px;
|
|
background: #F9FAFC;
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
|
|
.service-detail {
|
|
flex: 1;
|
|
background: #FEFCF8;
|
|
padding: 24px;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 314px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 24px;
|
|
.title {
|
|
font-weight: 800;
|
|
font-size: 18px;
|
|
color: #333333;
|
|
font-style: normal;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #999999;
|
|
font-style: normal;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 0;
|
|
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.value {
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 24px;
|
|
}
|
|
</style> |