提交

廖井涛

2024-07-03 c5151996182a7342bed2d62fcbd99349b9b2e3a1

 north-glass-erp/northglass-erp/src/views/pp/processCard/PrintProcess.vue

@@ -8,7 +8,9 @@
import {useI18n} from 'vue-i18n'
import deepClone from "@/utils/deepClone";
import QRCode from "qrcode";
import companyInfo from "@/stores/sd/companyInfo";
//语言获取
const company = companyInfo()
const {t} = useI18n()
let router = useRouter()
let produceList = ref([])
@@ -22,6 +24,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 +36,46 @@
        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;
            });
          }
          let technologyNumberMerge = printMerge.split('').join(',');
          console.log(technologyNumberMerge)
          produceList.value[0].detail[0].technologyNumberMerge = technologyNumberMerge
          console.log(produceList.value[0].detail[0])
          const s01Values = [];
          // 遍历 res.data.numberList 数组，获取每个元素的 S01 值并存储到 s01Values 数组中
          produceList.value[0].detailList.forEach(element => {
            try {
              const otherColumnsObject = JSON.parse(element.other_columns);
              const s01Value = otherColumnsObject.S01;
              if (s01Value) {
                s01Values.push(s01Value);
              } else {
                // 如果 S01 值为空，可以选择添加默认值或者忽略这个元素
                s01Values.push(''); // 例如添加空字符串
              }
            } catch (error) {
              // console.error('Error parsing JSON or accessing S01 value:', error);
              // 处理 JSON 解析错误或其他异常情况
            }
          });
          // 遍历 res.data.Detail 数组，将 s01Values 中的值赋给每个订单详情对象的 s01Value 属性
          produceList.value[0].detailList.forEach((detail, index) => {
            if (index < s01Values.length) {
              detail.s01Value = s01Values[index]; // 添加一个名为 s01Value 的新属性，存储对应的 S01 值
            } else {
              detail.s01Value = ''; // 如果 s01Values 中的值不足，可以添加默认值或者不进行赋值处理
            }
          });





          handleGetQRCode()
        } else {
          ElMessage.warning(res.msg)
@@ -42,60 +84,66 @@
      })

    }

)


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]
      });

    }
  }
};




// 打印方法
  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>
@@ -106,9 +154,13 @@
      <tr v-for="(itemFlow,index) in item.detail" :key="index">
        <td colspan="24">
          <div id="bj" style="float: right;font-size: 28px">{{ id + 1 }}</div>
          <div>常州市吉利玻璃有限公司</div>
          <div>{{company.companyName}}</div>
          <div>生产流程卡</div>
          <div style="text-align: right;font-weight: bolder">流程卡号： {{
          <div v-if="itemFlow.technologyNumberMerge!=''" style="text-align: right;font-weight: bolder">流程卡号： {{
              itemFlow.process_id
            }}/{{ itemFlow.technologyNumberMerge }} 共 {{ flowCardCount }} 架
          </div>
          <div v-else style="text-align: right;font-weight: bolder">流程卡号： {{
              itemFlow.process_id
            }}/{{ itemFlow.technologyNumber }} 共 {{ flowCardCount }} 架
          </div>
@@ -120,7 +172,7 @@
        <td class="tdNowrap">项目名称：</td>
        <td colspan="2">{{ items.project }}</td>
        <td class="tdNowrap">工艺流程：</td>
        <td colspan="16">{{ items.process }}</td>
        <td colspan="17">{{ items.process }}</td>
      </tr>
      <tr v-for="(itemTr,index) in item.detail" :key="index">
        <td class="tdNowrap">磨边类型：</td>
@@ -128,10 +180,11 @@
        <td class="tdNowrap">单片名称：</td>
        <td colspan="2">{{ itemTr.glass_child }}</td>
        <td class="tdNowrap">产品名称：</td>
        <td colspan="16">{{ itemTr.product_name }}</td>
        <td colspan="17">{{ itemTr.product_name }}</td>
      </tr>
      <tr>
        <td rowspan='2'>序号</td>
        <td rowspan='2'>编号</td>
        <td rowspan='2'>宽*高</td>
        <td rowspan='2'>数量</td>
        <td rowspan='2'>面积</td>
@@ -171,6 +224,7 @@

      <tr v-for="(itemDatile,index) in item.detailList" :key="index">
        <td>{{ itemDatile.order_number }}</td>
        <td>{{itemDatile.s01Value}}</td>
        <td>{{ itemDatile.child_width }}</td>
        <td class="item">{{ itemDatile.quantity }}</td>
        <td>{{ itemDatile.total_area }}</td>
@@ -201,9 +255,9 @@
          数量：
          <label>{{ itemsum.quantity }}</label>
          面积：
          <label>{{ parseFloat(itemsum.gross_area,2) }}</label>
          <label>{{ parseFloat(itemsum.gross_area.toFixed(2)) }}</label>
          重量：
          <label>{{ itemsum.weight }}</label>
          <label>{{ parseFloat(itemsum.weight.toFixed(2)) }}</label>
        </td>
      </tr>
      <tr v-for="(itemtextarea,index) in item.detail" :key="index">
@@ -227,28 +281,12 @@
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
<!--      <tr>-->
<!--        <td>接受签名</td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--      </tr>-->
      <tr>
        <td>生产日期</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
@@ -284,39 +322,20 @@
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <!--      <tr>-->
      <!--        <td>架子编号</td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <td></td>-->
      <!--        <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>
<!--            {{-->
<!--              getUrl(qrCodeItem.process_id)-->
<!--            }}-->

        <td colspan="19">
          <span style="display: flex;">
            <span v-for="(qrCodeItems,index) in qrCodeItem.qrcodeList" :key="index" style="display: flex;width: 35%">
            <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>
@@ -380,6 +399,11 @@
  font-weight: bolder;
}

@page {
  size: auto;  /* auto is the initial value */
  margin: 13mm 6mm 0mm 6mm  /* this affects the margin in the printer settings */

}

@media print {