mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/utils/print/codeListPrint.js

import moment from 'moment'
import QRCode from 'qrcodejs2'
import { v4 as uuidv4 } from "uuid";

function codeListPrint(data, domId) {
  if (data.length == 0) {
    return
  }
  let preHtml = ` <div style="width: 800px;position: relative;">

    <div style="width: 100%;position: relative;text-align: center;">
      <span style="font-size: 24px;font-weight: 500;">诸暨市新丝维化纤有限公司</span>
    </div>`
  let endHtml = `<div style="display: flex;flex-direction: row-reverse;">
      <span>注：不同批号，请勿混用</span>
    </div>
  </div>`
  let res = ``;
  let uuidList = [];
  for (let i = 0; i < data.length; i++) {
    let item = data[i]
    let {
      qrCode,//序号
      machineTool,//机台
      boxWeight,//箱重-车重
      canisterweight,//筒重
      canisterNum,//筒数
      grossWeight,//毛重
      suttle,//净重
      workShifts,//班次
      tubecolor,//管色
      boxOrderNum, //生成的随机码
      myNO,//箱号
      productionDate, //日期
      printFormat, //格式
      productName, //产品名
      productSpecifications, //规格
      productColor, //色泽
      lotNum, //批次
      levels,//等级
      directionOfTwist,//捻向
      qrCodeData,
      boxNumber//箱号
    } = item
    let theNumber = Number(printFormat) //小包装:1  大包装:2
    while (theNumber > 0) {
      let uuid = uuidv4().slice(0, 8);
      theNumber--;
      res += preHtml;
      // let qrCodeData = '123456';
      uuidList.push({
        id: uuid,
        qrCodeData: qrCodeData
      })
      res += `<div style="width: 100%;display: flex;justify-content: center;margin:5px 0;">
      <div id="${uuid}" style="width: 120px;height: 120px;"></div>
    </div>
    <table style="width: 100%;border-collapse:collapse;" cellpadding="10" border="1">
      <tr style="text-align: center;">
        <td style="width: 100px;" colspan="1">品种</td>
        <td style="width: 300px;">${productName}</td>
        <td style="width: 100px;" colspan="1">规格</td>
        <td style="width: 300px;" colspan="2">${productSpecifications}</td>
      </tr>
      <tr style="text-align: center;">
        <td style="width: 100px;" colspan="1">批号</td>
        <td style="width: 300px;">${lotNum}</td>
        <td style="width: 100px;" colspan="1">色号</td>
        <td style="width: 300px;" colspan="2">${productColor}</td>
      </tr>
      <tr style="text-align: center;">
        <td style="width: 100px;" colspan="1">等级</td>
        <td style="width: 300px;">${levels}</td>
        <td style="width: 100px;" colspan="1">箱号</td>
        <td style="width: 250px;" colspan="1">${qrCode}</td>
        <td style="width: 50px;" colspan="1">${boxNumber}</td>
      </tr>
      <tr style="text-align: center;">
        <td style="width: 100px;" colspan="1">筒数</td>
        <td style="width: 300px;">${canisterNum}&ensp;&ensp;&ensp;${tubecolor}</td>
        <td style="width: 100px;" colspan="1">捻向</td>
        <td style="width: 300px;" colspan="2">${directionOfTwist}</td>
      </tr>
      <tr style="text-align: center;">
        <td style="width: 100px;" colspan="1">班次</td>
        <td style="width: 300px;">${workShifts}&ensp;&ensp;&ensp;${machineTool}</td>
        <td style="width: 100px;" colspan="1">日期</td>
        <td style="width: 300px;" colspan="2">${productionDate}</td>
      </tr>
      <tr style="text-align: center;">
        <td style="width: 100px;" colspan="1">毛重</td>
        <td style="width: 300px;">${grossWeight}</td>
        <td style="width: 100px;" colspan="1">净重</td>
        <td style="width: 300px;font-size: 20px;font-weight: 500;" colspan="2">${suttle}</td>
      </tr>
    </table>`
      res += endHtml;
    }
  }
  document.body.innerHTML = document.getElementById(domId).innerHTML = res;
  for (var i = 0; i < uuidList.length; i++) {
    let data = uuidList[i]
    new QRCode(document.getElementById("" + data.id), {
      text: sleep(1) + data.qrCodeData,
      width: 120,
      height: 120,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
    });
  }
  window.print();//打印
  // window.location.reload();
  return false;
}
// 延迟
function sleep(ms) {
  var unixtime_ms = new Date().getTime();
  while (new Date().getTime() < unixtime_ms + ms) { }
  return "";
}

export default codeListPrint