kd-aiot-frontend-eom/src/views/saleManage/saleOrder/invoice/components/print-template-jr.vue

<template>
  <ele-modal title="出库单" :visible.sync="QRvisible" width="90%">
    <div id="printSection">
      <div
        class="print"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        "
      >
        <div
          style="
            width: 100%;
            font-size: 12px;
            display: flex;
            margin-bottom: 10px;
          "
        >
          <span style="width: 48%">
            <span style="width: 60px; display: inline-block">购货单位：</span>
            {{ formData.contactName }}
          </span>
          <span>
            <span style="width: 60px; display: inline-block">单据编码：</span>
            {{ formData.docNo }}
          </span>
        </div>
        <div
          style="
            width: 100%;
            font-size: 12px;
            display: flex;
            margin-bottom: 10px;
          "
        >
          <span style="width: 48%">
            <span style="width: 170px; display: inline-block"
              >生产厂家/上市许可持有人：</span
            >
            湖南聚仁中药饮片有限公司
          </span>
          <span style="width: 17%">
            <span style="width: 60px; display: inline-block">发货仓库</span>
            成品仓
          </span>
          <span style="width: 17%">
            <span style="width: 60px; display: inline-block">发货日期</span>
            2025-01-01  
          </span>
          <span style="width: 17%">
            <span style="width: 60px; display: inline-block">总计金额</span>
            ￥{{ formData.totalPrice }}
          </span>
        </div>
        <table
          cellspacing="0"
          border
          style="
            width: 100%;
            height: 190px;
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
            font-size: 12px;
          "
        >
          <tbody>
            <tr align="center" style="height: 30px">
              <td style="width: 6%"> 商品编号 </td>
              <td style="width: 6%"> 品名 </td>
              <td style="width: 6%"> 规格 </td>
              <td style="width: 6%"> 产地</td>
              <td style="width: 3%"> 单位</td>
              <td style="width: 6%"> 数量</td>
              <td style="width: 7%"> 单价</td>
              <td style="width: 7%"> 金额</td>
              <td style="width: 8%"> 批号</td>
              <td style="width: 8%"> 生产日期</td>
              <td style="width: 8%"> 保质期至</td>
              <td> 贮藏</td>
              <td> 备注</td>
            </tr>
            <tr
              align="center"
              style="height: 22px"
              v-for="(item, index) in [{}, {}, {}, {}, {}, {}]"
            >
              <td> {{ item.productCode }} </td>
              <td> {{ item.productName }} </td>
              <td> {{ item.totalWeight }}</td>
              <td> {{ item.totalCount }}</td>
              <td> {{ item.remark }}</td>
              <td> {{ item.remark }}</td>
              <td> {{ item.remark }}</td>
              <td> {{ item.remark }}</td>
              <td> {{ item.remark }}</td>
              <td> {{ item.remark }}</td>
              <td> {{ item.remark }}</td>
              <td> {{ item.remark }}</td>
              <td> {{ item.remark }}</td>
            </tr>
            <tr align="center" style="height: 30px">
              <td :colspan="5">
                <div style="margin-left: 35px"></div>
              </td>
              <td :colspan="3">
                <div style="margin-left: 65px"></div>
              </td>
              <td :colspan="5">
                <div style="margin-left: 65px"></div>
              </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>开票员：</div>
          </div>
          <div style="flex: 1">
            <div>业务员：</div>
          </div>
          <div style="flex: 1">
            <div>发货员：</div>
          </div>
          <div style="flex: 1">
            <div>收货方：</div>
          </div>
          <div style="flex: 1">
            <div>质量状况：</div>
          </div>
          <div style="flex: 1">
            <div>提货方式：</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 { getSendSaleOrderrecordDetailSplit } from '@/api/saleManage/saleordersendrecord';
  import { getInfoBySourceBizNoAll } from '@/api/wms';
  import { mapGetters } from 'vuex';
  export default {
    name: 'print',
    computed: {
      ...mapGetters(['user'])
    },
    props: {
      groupName: ''
    },
    data() {
      return {
        checked: '',
        QRvisible: false,
        isPrintPrice: false,
        formData: {},
        outBound: {}
      };
    },

    methods: {
      async open(id) {
        this.formData = await getSendSaleOrderrecordDetailSplit(id);
        this.QRvisible = true;
        let dataArray = await getInfoBySourceBizNoAll(this.formData.docNo);
        this.outBound = JSON.parse(JSON.stringify(dataArray[0]));
        this.outBound['outInDetailRecordRequestList'] = [];

        dataArray.forEach((item) => {
          item.outInDetailList.forEach((val) => {
            if (val.outInDetailRecordRequestList.length) {
              val.outInDetailRecordRequestList.forEach((j) => {
                j['categoryName'] = val.categoryName;
                j['categoryModel'] = val.categoryModel;
                j['specification'] = val.specification;
                j['categoryCode'] = val.categoryCode;
              });
              this.outBound['outInDetailRecordRequestList'].push(
                ...val.outInDetailRecordRequestList
              );
            } else {
              this.outBound['outInDetailRecordRequestList'].push(val);
            }
          });
        });
        //包装维度
      },
      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(`<style>
    @media print {
      .print{
        page-break-before: always !important;
        page-break-inside: avoid !important;
      };
       @page {
      size: 200cm 11cm;
        }
       }
  
  </style>`);

        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>
  @media print {
    .print {
      page-break-before: always !important;
      page-break-inside: avoid !important;
    }
    @page {
      size: 30cm 11cm;
      margin: 0;
    }
  }
</style>