打印优化

zhanghua

2024-12-24 f05801f2ee1f1d394f3b018255f5a84df5356a2e

 src/views/order/index.vue

@@ -16,7 +16,7 @@
        </el-input>
      </div>
    </div>
    <div style="height: calc(100vh - 208px)">
    <div style="height: calc(100vh - 168px)">
      <el-table
        v-loading="listLoading"
        :data="list"
@@ -70,8 +70,8 @@
</template>

<script>
import { getData } from "@/api/order";
import { printHtml } from "@/utils/print";
import { getData, findPlayerAccByOrderId } from "@/api/order";
import { printHtml, loadPrintStyle } from "@/utils/print";
import { convertCurrency } from "@/utils/ruoyi";

export default {
@@ -109,6 +109,7 @@
  },
  created() {
    this.fetchData();
    // loadPrintStyle();
  },
  methods: {
    reloadData() {
@@ -136,13 +137,27 @@
    },
    handlePrint(row) {
      const orgName = JSON.parse(localStorage.getItem("selectStaff")).org.name;
      row.orgName = orgName;

      if (row.payType == "DIRECT") {
        findPlayerAccByOrderId({ orderId: row.id }).then((res) => {
          if (res.data.findPlayerAccByOrderId.length > 0) {
            row.saleStaffName = res.data.findPlayerAccByOrderId[0].staffName;
          }

          this.doPrint(row);
        });
      } else {
        this.doPrint(row);
      }
    },
    doPrint(row) {
      let detail = "";
      row.details.forEach((o) => {
        detail += `<tr>
                <td> ${o.voucherName || o.goodsName}</td>
                <td>${o.voucherName || o.goodsName}</td>
                <td>${o.qty} </td>
                <td> ${o.giftQty}</td>
                <td>${o.giftQty || 0}</td>
                <td>${o.amt}</td>
                <td>${row.saleStaff.name} </td>
            </tr>`;
@@ -150,7 +165,7 @@

      let printData = `<div style="display: flex; justify-content: center;">
    <div style="margin-top: 50px; width: 600px;line-height: 2;">
        <h2 style="text-align: center;">${orgName}缴费收据 </h2>
        <h2 style="text-align: center;">${row.orgName}缴费收据 </h2>
        <div> 订单号：${row.number}</div>
        <div class="div-2-column">
            <div> 学员姓名：<u>${
@@ -192,11 +207,12 @@
        <br>
        <br>
        <div class="div-2-column">
            <div> 经办人：${row.buyer.name}  </div>
            <div>经办人：${row.saleStaffName || ""}  </div>
            <div>经办日期：${row.createTime} </div>
        </div>
    </div>
</div>`;

      printHtml(printData);
    },
    showCreate() {
@@ -205,3 +221,41 @@
  },
};
</script>
<style>
#print-container {
  display: none;
}
@media print {
  body > :not(.print-container) {
    display: none;
  }
  html,
  body {
    display: block !important;
  }
  #print-container {
    display: block;
  }
}
@page {
  margin-top: 0;
  margin-bottom: 0;
}
.div-2-column {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.m-h2 {
  text-align: center;
  font-size: 1.17em;
  margin-top: 50px;
  font-weight: bold;
}
#tr {
  height: 30px;
}
.txt-center {
  text-align: center;
}
</style>