| | |
| | | |
| | | 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(() => { |
| | |
| | | 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) |
| | |
| | | |
| | | 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> |
| | |
| | | <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> |