kd-aiot-frontend-mes/src/views/produceOrder/print.vue

<template>
  <ele-modal
    title="工艺流程卡"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="70%"
  >
    <div id="printSection" style="font-family: 'Microsoft Yahei', Arial, sans-serif; font-size: 12px; background: #fff; padding: 10px; margin: 40px;">
      <div style="text-align: center; font-size: 16px; font-weight: bold; margin: 5px 0;">工艺流程卡</div>
      <table style="width: 100%; border-collapse: collapse; margin-bottom: 6px;">
        <tr>
          <td rowspan="4" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle; text-align: center; width: 90px; height: 120px;">
            <img :src="card.qrLeft" alt="二维码" style="width: 80px; height: 80px;" />
          </td>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">单号</td>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.code }}</td>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">单据日期</td>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.createDate }}</td>
          <td rowspan="4" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle; text-align: center; width: 90px; height: 120px;">
            <img :src="card.qrRight" alt="二维码" style="width: 80px; height: 80px;" />
          </td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">编号</td>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.productCode }}</td>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">存货名称</td>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.productName }}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">图号</td>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.imgCode }}</td>
           <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">计划开始时间</td>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.planStartTime }}</td>
        </tr>
        <tr>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">计划结束时间</td>
          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.planCompleteTime }}</td>
          <td colspan="2" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;"></td>
        </tr>
      </table>

      <table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;">
        <thead>
          <tr>
            <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">工序</th>
            <th colspan="4" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">数量</th>
            <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">品质验收</th>
            <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">交接签字</th>
            <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">备注</th>
          </tr>
          <tr>
            <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">加工</th>
            <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">发料</th>
            <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">合格</th>
            <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">报废</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, idx) in card.printTaskCarDetail" :key="idx">
            <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.taskName }}</td>
            <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.formingNum }}</td>
            <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.formedNum }}</td>
            <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.qualified }}</td>
            <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.noQualifiedSum }}</td>
            <td style="border: 1px solid #000; padding: 3px; text-align: center;"></td>
            <td style="border: 1px solid #000; padding: 3px; text-align: center;"></td>
            <td style="border: 1px solid #000; padding: 3px; text-align: center;"></td>
          </tr>
        </tbody>
      </table>

      <el-row :gutter="16">
        <el-col :span="12"><div>制单人：{{ card.createUserName }}</div></el-col>
        <el-col :span="12"><div>审核人：</div></el-col>
      </el-row>

      <!-- 打印按钮 -->
      <!-- <div style="margin-top: 10px; display: block;">
        <button @click="doPrint">打印</button>
      </div> -->
    </div>
    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
import { queryPrintV2 } from '@/api/produceOrder';
import QRCode from 'qrcode';
  export default {
    name: 'print-dialog',

    data() {
      return {
        card: {
          qrLeft: '',
          qrRight: '',
          productCode: '',
          createDate: '',
          code: '',
          productName: '',
          imgCode: '',
          planStartTime: '',
          planCompleteTime: '',
          printTaskCarDetail: [],
          createUserName: '',
          auditor: '',
          page: 6,
          totalPages: 14,
        },
        printId: '',
        QRvisible: false
      };
    },

    mounted() {
      // this.doPrint();
    },
    methods: {
      open(ids) {
        console.log('ids~~~', ids);
        this.printId = ids[0]
        this.getData()
        this.QRvisible = true;
      },
      close() {
        this.QRvisible = false;
      },
      getData() {
        queryPrintV2({id: this.printId}).then(res => {
          console.log('queryPrintV2', res)
          if(res.length) {
            this.card = res[0]
            QRCode.toDataURL(this.printId)
            .then((url) => {
              this.card.qrLeft = url;
              this.card.qrRight = url;
              this.$forceUpdate();
            })
            .catch((err) => {
              console.error(err);
            });
          }
        }).catch(err => {
          console.log('err', err) 
        })
      },
      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();
        };
      },
      doPrint() {
        this.$nextTick(() => {
          window.print();
        });
      }
    }
  };
</script>