cashier_desktop/src/views/order/components/printDrawer.vue

<template>
  <el-drawer v-model="showDrawer" direction="rtl" size="300px">
    <template #header>
      <h4>订单打印</h4>
    </template>
    <template #default>
      <div class="prinr_wrap" v-loading="loading">
        <div class="header center">{{ userStore.shopInfo.shopName }}</div>
        <div class="row center">结算单</div>
        <div class="row center">桌号：{{ orderInfo.tableName }}</div>
        <div class="row" style="margin-top: 20px">
          订单号：{{ orderInfo.orderNo }}
        </div>
        <div class="row">交易时间：{{ orderInfo.paidTime }}</div>
        <div class="row">收银员：{{ userStore.userInfo.name }}</div>
        <div class="line"></div>
        <div class="row" style="margin-top: 10px">
          <div class="table">
            <div class="table_head">
              <div class="item">品名</div>
              <div class="item">单价</div>
              <div class="item">数量</div>
              <div class="item">小计</div>
            </div>
            <div class="table_content">
              <div class="table_row" v-for="item in orderInfo.cartList" :key="item.id">
                <div v-if="item.productType == 'package'">
                  <div class="flex">
                    <div class="item">
                      {{ item.productName }}
                    </div>
                    <div class="item">
                      {{ formatDecimal(item.payAmount) }}
                    </div>
                  </div>
                  <div class="flex" v-for="val in item.proGroupInfo.map(item => item.goods).flat()" :key="val.proId">
                    <div class="item">>{{ val.proName }}</div>
                    <div class="item">0.00</div>
                    <div class="item">{{ val.number }}</div>
                    <div class="item">0.00</div>
                  </div>
                </div>
                <div class="flex" v-else>
                  <div class="item">
                    <div>{{ item.productName }}</div>
                    <div v-if="item.skuName">规格：{{ item.skuName }}</div>
                  </div>
                  <div class="item">{{ formatDecimal(item.price) }}</div>
                  <div class="item">{{ item.num }}</div>
                  <div class="item">{{ formatDecimal(item.payAmount) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="row between">
          <span>原价</span>
          <span>{{ formatDecimal(+orderInfo.originAmount) }}</span>
        </div>
        <div class="row between">
          <span>折扣</span>
          <span>
            {{ formatDecimal(orderInfo.originAmount - orderInfo.orderAmount) }}
          </span>
        </div>
        <div class="line"></div>
        <div class="row between blod">
          <span>实付</span>
          <span> ￥{{ formatDecimal(+orderInfo.payAmount) }} </span>
        </div>
        <div class="line"></div>
        <div class="row">备注：{{ orderInfo.remark }}</div>
      </div>
    </template>
    <template #footer>
      <div class="drawer_footer">
        <div class="btn">
          <el-button style="width: 100%" :loading="printLoading" @click="printHandle('label')">
            打印标签
          </el-button>
        </div>
        <div class="btn">
          <el-button type="primary" style="width: 100%" :loading="printLoading" @click="printHandle('normal')">
            打印小票
          </el-button>
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";
import { usePrint } from "@/store/print.js";
import { useUser } from "@/store/user.js";
import {
  formatDecimal,
  getOrderByIdAjax,
  commOrderPrintData,
} from "@/utils/index.js";
import { orderPrint } from "@/api/order.js";
import { ElMessage } from 'element-plus'

const userStore = useUser();
const printStore = usePrint();

const showDrawer = ref(false);
const orderInfo = ref({});
const loading = ref(false);
const printLoading = ref(false);

// 打印操作
async function printHandle(type) {
  try {
    printLoading.value = true;
    switch (type) {
      case "normal":
        // 打印订单小票
        if (printStore.deviceNoteList.length) {
          printStore.pushReceiptData(commOrderPrintData(orderInfo.value));
        } else {
          await orderPrint({
            id: orderInfo.value.id,
            type: 0 // 0结算单 1预结算单 2退款单
          })
          ElMessage.success('云打印小票成功')
        }
        break;
      case "label":
        // 打印标签小票
        printStore.labelPrint(commOrderPrintData(orderInfo.value));
        break;
      default:
        break;
    }
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    printLoading.value = false;
  }, 1500);
}

async function show(row) {
  try {
    showDrawer.value = true;
    loading.value = true;
    orderInfo.value = await getOrderByIdAjax(row.id);
  } catch (error) {
    console.log(error);
  }
  loading.value = false;
}

defineExpose({
  show,
});
</script>

<style scoped lang="scss">
.prinr_wrap {
  padding-top: 20px;
  padding-bottom: 50px;
  color: #333;

  .header {
    font-size: 24px;
  }

  .center {
    display: flex;
    justify-content: center;
  }

  .line {
    margin: 14px 0;
    border-bottom: 1px dashed #666;
  }

  .blod {
    font-size: 20px;
    font-weight: bold;
  }

  .row {
    margin-top: 4px;
    font-size: 14px;
  }

  .between {
    display: flex;
    justify-content: space-between;
  }

  .table {
    --itemWidth: 45px;

    .flex {
      display: flex;
      margin-top: 2px;
    }

    .item {
      &:nth-child(1) {
        flex: 1;
      }

      &:nth-child(2) {
        width: var(--itemWidth);
      }

      &:nth-child(3) {
        width: var(--itemWidth);
      }

      &:nth-child(4) {
        width: var(--itemWidth);
      }
    }

    .table_head {
      display: flex;
    }

    .table_row {
      margin-top: 8px;
    }
  }
}

.drawer_footer {
  display: flex;
  gap: var(--el-font-size-base);

  .btn {
    flex: 1;
  }
}
</style>