web/src/components/retail/OrderDetail.vue

<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&#45;&#45;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 = () => {
  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("retail/getDetailByCode", {code}).then((res: any) => {
      res.printerName = printConfig.printName
      res.pageType = printConfig.pageType
      if (res.retailSocialPayLog){
        res.retailSocialPayLog.medTypeStr = medTypeJson[res.retailSocialPayLog.medType as MedTypeKey];
      }
      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>