kd-aiot-frontend-aps/src/views/saleOrder/components/printTemplateSaleOrder.vue

<template>
  <ele-modal
    title="销售订单"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="90%"
  >
    <div id="printSection">
      <div
        v-for="(item, idx) in printList"
        :key="idx"
        :style="{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          pageBreakInside: 'avoid',
          marginBottom: idx < printList.length - 1 ? '40px' : '0'
        }"
      >
        <div>
          <div
            style="
              font-size: 20px;
              font-weight: 800;
              padding-right: 20px;
              width: 400px;
              margin: 0 auto;
              margin-bottom: 20px;
            "
            >{{ groupName }}销售订单</div
          >
        </div>
        <div
          style="
            width: 100%;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          "
        >
          <span style="width: 25%">单据日期：{{ item.row.createTime }}</span>
          <span style="width: 40%"
            >客户简称：{{ item.formData.customerName }}</span
          >
          <span style="width: 35%"
            >客户经理：{{ item.formData.salesman }}</span
          >
        </div>
        <div
          style="
            width: 100%;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          "
        >
          <span style="width: 65%"
            >交货日期：{{ item.formData.deliveryTime }}</span
          >
          <span style="width: 35%">单据编码：{{ item.formData.code }}</span>
        </div>
        <table
          cellspacing="0"
          border
          style="
            width: 100%;
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
            font-size: 12px;
          "
        >
          <tbody>
            <tr align="center">
              <td style="padding: 5px; width: 25%"> 名称 </td>
              <td style="padding: 5px; width: 25%"> 型号规格 </td>
              <td style="padding: 5px; width: 8%"> 颜色 </td>
              <td style="padding: 5px; width: 10%"> 数量</td>
              <td style="padding: 5px; width: 8%"> 单位</td>
              <td style="padding: 5px; width: 20%"> 生产要求</td>
            </tr>

            <tr
              align="center"
              v-for="(p, pIndex) in item.formData.productInfoList"
              :key="pIndex"
            >
              <td style="padding: 5px"> {{ p.productName }} </td>
              <td style="padding: 5px">
                {{ p.model }}/{{ p.specification }}</td
              >
              <td style="padding: 5px"> {{ p.colorKey }}</td>
              <td style="padding: 5px"> {{ p.contractNum }}</td>
              <td style="padding: 5px"> {{ p.measuringUnit }}</td>
              <td style="padding: 5px"> {{ p.productionRequirements }}</td>
            </tr>
          </tbody>
        </table>
        <div
          style="
            width: 100%;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
          "
        >
          <div style="flex: 1">
            <div
              >制单人：{{
                item.detail.salesOrderBasicInfo.createUserName
              }}</div
            >
          </div>
          <div style="flex: 1">
            <div
              >审核人：{{ item.detail.salesOrderBasicInfo.reviewerName }}</div
            >
          </div>
        </div>
      </div>
    </div>

    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import {
    getOrderDetail,
    getSalesDetail,
    enterprisePage
  } from '@/api/saleOrder';
  import { mapGetters } from 'vuex';
  export default {
    name: 'print',
    computed: {
      ...mapGetters(['user'])
    },
    props: {},
    data() {
      return {
        checked: '',
        QRvisible: false,
        isPrintPrice: false,
        printList: [],
        groupName: ''
      };
    },
    methods: {
      async open(rows) {
        const list = Array.isArray(rows) ? rows : [rows];
        if (!list.length) return;
        enterprisePage({
          pageNum: 1,
          size: 200
        }).then((res) => {
          if (res.list?.length > 0) {
            this.groupName = res.list[0].name;
          }
        });
        const results = await Promise.all(
          list.map(async (row) => {
            const formData = await getOrderDetail(row.code);
            const detail = await getSalesDetail(row.id);
            return { row, formData, detail };
          })
        );
        this.printList = results;
        this.QRvisible = true;
      },
      close() {
        this.QRvisible = false;
      },
      print() {
        const printSection = document.getElementById('printSection');
        const printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write('<html><head><title>打印预览</title>');
        printWindow.document.write(
          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
        );
        printWindow.document.write('</head><body>');
        printWindow.document.write(printSection.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.onload = function () {
          printWindow.print();
        };
      }
    }
  };
</script>

<style lang="scss"></style>