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"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      "
    >
      <div>
        <div
          style="
            font-size: 20px;
            font-weight: 800;
            padding-right: 20px;
            width: 400px;
            margin: 0 auto;
          "
          >{{ groupName }}销售订单</div
        >
      </div>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <span style="width: 25%">单据日期：{{ row.createTime }}</span>
        <span style="width: 50%">客户简称：{{ formData.customerName }}</span>
        <span style="width: 50%">客户经理：{{ formData.salesman }}</span>
      </div>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <span style="width: 45%">交货日期：{{ formData.deliveryTime }}</span>
        <span style="width: 45%">单据编码：{{ 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"> 存货名称 </td>
            <td style="padding: 5px"> 规格型号 </td>
            <td style="padding: 5px"> 型号 </td>
            <td style="padding: 5px"> 颜色 </td>
            <td style="padding: 5px; width: 60px"> 单位</td>
            <td style="padding: 5px; width: 110px"> 数量</td>
            <!-- <td style="padding: 5px; width: 110px"> 盘具</td>
            <td style="padding: 5px; width: 110px"> 分段</td> -->
            <td style="padding: 5px"> 备注</td>
          </tr>

          <tr align="center" v-for="(item, index) in formData.productInfoList">
            <td style="padding: 5px"> {{ item.productName }} </td>
            <td style="padding: 5px">
              {{ item.specification }}
            </td>
            <td style="padding: 5px"> {{ item.model }}</td>
            <td style="padding: 5px"> {{ item.colorKey.join(',') }}</td>
            <td style="padding: 5px"> {{ item.measuringUnit }}</td>
            <td style="padding: 5px"> {{ item.contractNum }}</td>
            <!-- <td style="padding: 5px"> {{ item.totalCount }}</td>
            <td style="padding: 5px"> {{ item.totalCount }}</td> -->
            <td style="padding: 5px"> {{ item.remark }}</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>制单人：{{ detail.salesOrderBasicInfo.createUserName }}</div>
        </div>
        <div style="flex: 1">
          <div>审核人：{{ formData.createUserName }}</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,
        formData: {},
        row: {},
        detail: {},
        groupName: ''
      };
    },
    methods: {
      async open(row) {
        this.row = row;
        enterprisePage({
        pageNum: 1,
        size: 200
      }).then((res) => {
        if (res.list?.length > 0) {
          this.groupName = res.list[0].name;
        }
      });
        this.formData = await getOrderDetail(row.code);
        this.detail = await getSalesDetail(row.id);
        console.log('formData~~~', this.formData, this.detail);
        this.QRvisible = true;

        //包装维度
      },
      close() {
        this.QRvisible = false;
      },
      getTotalValue(key, num) {
        let val = this.formData?.productList?.reduce((total, item) => {
          return (total += Number(item[key]));
        }, 0);

        return (
          (val &&
            parseFloat(val)
              .toFixed(num)
              .replace(/\.?0+$/, '')) ||
          0
        );
      },
      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>