dev
This commit is contained in:
parent
2a379369e3
commit
fc7e7ee768
|
|
@ -0,0 +1,388 @@
|
|||
<template>
|
||||
<Mask :width="1000" :height="560" :is-show="show" @close="show = false" title="订单详情">
|
||||
<div class="container">
|
||||
<div class="title">
|
||||
<CloseBtn @click="show = false"></CloseBtn>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="goods-detail">
|
||||
<div class="title">药品详情</div>
|
||||
<el-table border :header-cell-style="{ backgroundColor: '#f5f7fa' }" :data="orderInfo.goodsDetail" style="height: 100%">
|
||||
<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: '#f5f7fa' }" :data="orderInfo.serviceDetail" style="height: 100%">
|
||||
<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="right_head">
|
||||
<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">{{ orderInfo.orderId }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">零售备注</div>
|
||||
<div class="value">{{ orderInfo.orderId }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_body">
|
||||
<div class="label">发票状态</div>
|
||||
<div class="value">未开票</div>
|
||||
</div>
|
||||
<div class="right_foot">
|
||||
<div class="label">
|
||||
<div class="pay">收-{{ orderInfo.payType ? getPayTypeStr(orderInfo.payType) : "" }}</div>
|
||||
<div class="name">{{ orderInfo.salePersonName }}</div>
|
||||
<div>备注：-</div>
|
||||
</div>
|
||||
<div class="value">￥{{orderInfo.totalPrice}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>-->
|
||||
<el-button type="danger" plain @click="refund" v-if="orderInfo.status == 1">退款</el-button>
|
||||
<el-button type="primary" @click="print" v-if="orderInfo.status == 1">
|
||||
打印<el-icon class="el-icon--right"><Upload /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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("retail/refund",{orderId:orderInfo.value.id}).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%;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding:0 24px;
|
||||
|
||||
.title {
|
||||
height: 35px;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
.left {
|
||||
flex: 2;
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
min-height: 0;
|
||||
.goods-detail{
|
||||
|
||||
height: 40%;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.service-detail{
|
||||
height: 40%;
|
||||
margin-top: 50px;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
min-width: 100px;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
border: solid 1px #e6e6e6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.right_head {
|
||||
padding: 10px;
|
||||
|
||||
.title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999ca1;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.value {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right_body {
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
height: 30px;
|
||||
color: #999ca1;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.value {
|
||||
color: base.$warning-color;
|
||||
}
|
||||
}
|
||||
.right_foot {
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999ca1;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
.pay{
|
||||
color: #000;
|
||||
}
|
||||
.name{
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -171,7 +171,7 @@ import Mask from "@/components/common/Mask.vue";
|
|||
import Grant from "@/components/member/memberProfile/Grant.vue";
|
||||
import Exchange from "@/components/member/memberProfile/Exchange.vue";
|
||||
import FlowingWater from "@/components/member/memberProfile/FlowingWater.vue";
|
||||
import OrderDetail from "@/components/retail/OrderDetail.vue";
|
||||
import OrderDetail from "@/components/charge/OrderDetail.vue";
|
||||
import VipEdit from "@/components/member/memberProfile/VipEdit.vue";
|
||||
import VipLevelEdit from "@/components/member/memberProfile/VipLevelEdit.vue";
|
||||
import Panel from "@/components/common/Panel.vue";
|
||||
|
|
@ -331,13 +331,14 @@ const statusObj = {
|
|||
3: "已退款"
|
||||
}
|
||||
const payTypeObj = {
|
||||
0: "微信",
|
||||
1: "支付宝",
|
||||
2: "现金",
|
||||
3: "医保"
|
||||
1: "医保",
|
||||
2: "微信",
|
||||
3: "支付宝",
|
||||
4: "现金",
|
||||
5: "其他"
|
||||
}
|
||||
type StatusKey = 0 | 1 | 2 | 3;
|
||||
type PayTypeKey = 0 | 1 | 2 | 3;
|
||||
type PayTypeKey = 1 | 2 | 3 | 4 | 5;
|
||||
//修改时间格式化
|
||||
const formatDate = (isoStr: any) => {
|
||||
const date = new Date(isoStr);
|
||||
|
|
@ -604,10 +605,12 @@ const certTypeList = ref<any>(Object.entries(psnCertTypes).map(([id, name]) => (
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
|
||||
.list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue