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="margin-bottom: 40px;" v-for="card in printList">
        <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="7" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle; text-align: center; width: 100px; height: 120px;">
              <img :src="card.qrLeft" alt="二维码" style="width: 90px; height: 90px;" />
            </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="7" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle; text-align: center; width: 100px; height: 120px;">
              <img :src="card.qrRight" alt="二维码" style="width: 90px; height: 90px;" />
            </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.quantity }}</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.unit }}</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.model }}</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.specification }}</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.colorKey }}</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.modelKey }}</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.serialNo }}</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.imgCode }}</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.planStartTime }}</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.planCompleteTime }}</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;"></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>
              <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>

        <div style="display: flex; justify-content: flex-start; align-items: center;">
          <div style="width: 50%">制单人：{{ card.createUserName }}</div>
          <div style="width: 50%">审核人：{{ card.auditor }}</div>
        </div>
      </div>
      <!-- 打印按钮 -->
      <!-- <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,
        },
        printList: [],
        printId: '',
        QRvisible: false
      };
    },

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