廖井涛
2024-06-26 c46cb6a71c35f38c7f23a2d01ad686f46a3d0e0b
north-glass-erp/northglass-erp/src/views/pp/Replenish/PrintRepairProcess.vue
@@ -22,6 +22,7 @@
const {currentRoute} = useRouter()
const route = currentRoute.value
const printMerge = route.query.printMerge
data.value.printList = JSON.parse(route.query.printList)
let flowCardCount = data.value.printList.length
onMounted(() => {
@@ -33,7 +34,12 @@
        if (res.code == 200) {
          produceList.value = deepClone(res.data.data)
          console.log(produceList.value)
          if (printMerge!==null && printMerge!==undefined && printMerge!==""){
            produceList.value.forEach(item => {
              item.detail[0].technologyNumber = printMerge;
            });
          }
          handleGetQRCode()
        } else {
          ElMessage.warning(res.msg)
@@ -48,12 +54,21 @@
const handleGetQRCode = async () => {
  for (let i = 0; i < produceList.value.length; i++) {
    list= produceList.value[i].detail[0].processIdNumber;
    const url = `${list}`;
    // 生成 QR Code 并存储到变量中
    const qrcode = ref('');
    qrcode.value =  await QRCode.toDataURL(url);
    produceList.value[i].detail[0]["qrcode"]=qrcode.value
    const technologyNumber = produceList.value[i].detail[0].technologyNumber.toString(); // 转换为字符串以便处理每个字符
    produceList.value[i].detail[0]["qrcodeList"] = []; // 初始化一个空数组用来存储 QR Code
    for (let j = 0; j < technologyNumber.length; j++) {
      const processId = produceList.value[i].detail[0].process_id;
      const url = `${processId}/${technologyNumber[j]}`;
      // 生成 QR Code 并存储到数组中
      const qrcodeData = await QRCode.toDataURL(url);
      produceList.value[i].detail[0]["qrcodeList"].push({
        qrcode: qrcodeData,
        technologyNumber: technologyNumber[j]
      });
    }
  }
};
@@ -61,41 +76,41 @@
// 打印方法
  const printFlowCard = () => {
    // 需要打印的局部区域赋予"print-wrap"的id
    let el = document.getElementById("printFlowCard");
    let doc = document;
    let body = doc.body || doc.getElementsByTagName("body")[0];
    let printId = "print-" + Date.now();
const printFlowCard = () => {
  // 需要打印的局部区域赋予"print-wrap"的id
  let el = document.getElementById("printFlowCard");
  let doc = document;
  let body = doc.body || doc.getElementsByTagName("body")[0];
  let printId = "print-" + Date.now();
    // 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
    let content = doc.createElement("div");
    content.id = printId;
  // 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
  let content = doc.createElement("div");
  content.id = printId;
    // 样式控制与打印无关的元素隐藏
    let style = doc.createElement("style");
    style.innerHTML =
        "body>#" +
        printId +
        "{display:none}@media print{body>:not(#" +
        printId +
        "){display:none !important}body>#" +
        printId +
        "{display:block;padding-top:1px}}";
    //
    content.innerHTML = el.outerHTML;
    // // console.log("el.outerHTML", el.outerHTML);
    body.appendChild(style);
  // 样式控制与打印无关的元素隐藏
  let style = doc.createElement("style");
  style.innerHTML =
      "body>#" +
      printId +
      "{display:none}@media print{body>:not(#" +
      printId +
      "){display:none !important}body>#" +
      printId +
      "{display:block;padding-top:1px}}";
  //
  content.innerHTML = el.outerHTML;
  // // console.log("el.outerHTML", el.outerHTML);
  body.appendChild(style);
    // 与style元素设置的样式相配合
    // 把打印内容的元素添加到body(作为body的子元素,可用body的子选择器 '>' 控制打印样式)
    body.appendChild(content);
    setTimeout(() => {
      window.print();
      body.removeChild(content);
      body.removeChild(style);
    }, 20);
  }
  // 与style元素设置的样式相配合
  // 把打印内容的元素添加到body(作为body的子元素,可用body的子选择器 '>' 控制打印样式)
  body.appendChild(content);
  setTimeout(() => {
    window.print();
    body.removeChild(content);
    body.removeChild(style);
  }, 20);
}
</script>
<template>
@@ -267,14 +282,15 @@
        <td></td>
      </tr>
      <tr v-for="(qrCodeItem,index) in item.detail" :key="index">
        <td rowspan="2">
          <div class='qrCode' style="width: 80px;height: 80px;">
            <img :src= qrCodeItem.qrcode>
        <td colspan="19" >
          <span style="display: flex;">
            <span style="display: flex;width: 25%" v-for="(qrCodeItems,index) in qrCodeItem.qrcodeList" :key="index">
            <div class='qrCode' style="width: 80px;height: 80px;">
            <img :src= qrCodeItems.qrcode>
          </div>
        </td>
        <td colspan="16">
          <span style="float: left;font-weight: bolder">{{ qrCodeItem.processIdNumber }}</span>
          <span style="float: left;font-weight: bolder">{{ qrCodeItem.process_id+"/"+qrCodeItems.technologyNumber }}</span>
          </span>
          </span>
        </td>
      </tr>