kd-aiot-frontend-mes/src/views/produceOrder/components/printSr.vue

<template>
  <ele-modal
    title="二维码"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="800px"
    :maxable="true"
  >
    <div id="printSection">
      <div
        v-for="(item, index) in codeList"
        :key="index"
        style="
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 30px;
        "
      >
        <div
          style="
            width: 160px;
            height: 160px;
            margin-right: 10px;
            padding-left: 0px;
          "
        >
          <img
            :src="item.qrcode"
            alt="QR Code"
            style="width: 160px; height: 160px"
          />
        </div>
        <div
          style="
            width: 640px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
          "
        >
          <div style="text-align: left; font-size: 16px">
            <span style="display: inline-block">产品编码：</span>
            <span style="color: #000">{{ item.productCode }}</span>
          </div>

          <div style="text-align: left; font-size: 16px">
            <span style="display: inline-block">名称：</span>
            <span style="color: #000">{{ item.productName }}</span>
          </div>

          <div style="text-align: left; font-size: 16px">
            <span style="display: inline-block">牌号：</span>
            <span style="color: #000">{{ item.brandNo }}</span>
          </div>

          <div style="text-align: left; font-size: 16px">
            <span style="display: inline-block">型号：</span>
            <span style="color: #000">{{ item.model }}</span>
          </div>

          <div style="text-align: left; font-size: 16px">
            <span style="display: inline-block">规格：</span>
            <span style="color: #000">{{ item.specification }}</span>
          </div>

          <div style="text-align: left; font-size: 16px">
            <span style="display: inline-block">生产数量：</span>
            <span style="color: #000"
              >{{ item.formingNum }} {{ item.unit }}</span
            >
          </div>

          <div style="text-align: left; font-size: 16px">
            <span style="display: inline-block">生产重量：</span>
            <span style="color: #000"
              >{{ item.formingWeight }} {{ item.weightUnit }}</span
            >
          </div>

          <div style="text-align: left; font-size: 16px">
            <span style="display: inline-block">状态：</span>
            <span style="color: #000">{{ statusList[item.status] }}</span>
          </div>

          <div style="text-align: left; font-size: 16px">
            <span style="display: inline-block">工艺路线：</span>
            <span style="color: #000">{{ item.produceRoutingName }} </span>
          </div>

          <div style="text-align: left;   font-size: 16px; ">
              <span style="display: inline-block;  width: 100px;">颜色：</span>
              <span style="color: #000;">{{ item.colorKey }} </span>
          </div>
          <div style="text-align: left;   font-size: 16px; ">
              <span style="display: inline-block;  width: 100px;">机型：</span>
              <span style="color: #000;">{{ item.modelKey }} </span>
          </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 QRCode from 'qrcode';
  import { queryPrint } from '@/api/produceOrder/index.js';
  export default {
    name: 'print',
    data() {
      return {
        QRvisible: false,

        codeList: [],
        statusList: {
          4: '待生产',
          5: '生产中',
          6: '已完成',
          7: '已延期',
          8: '待下达'
        }
      };
    },

    methods: {
      open(ids) {
        queryPrint({ ids }).then((res) => {
          this.codeList = res;
          this.QRvisible = true;

          this.$nextTick(() => {
            this.generateQRCodes();
          });
        });
      },

      generateQRCodes() {
        this.codeList.forEach((item) => {
          QRCode.toDataURL(item.id)
            .then((url) => {
              item.qrcode = url;
              this.$forceUpdate();
            })
            .catch((err) => {
              console.error(err);
            });
        });
      },

      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" scoped>
  @media print {
    #printSection {
      font-size: 34px;

      span {
        font-size: 34px;
      }
    }
  }
</style>