From 2f894921e5cf74910805f08a5e3180b68ac09e18 Mon Sep 17 00:00:00 2001 From: 廖井涛 <2265517004@qq.com> Date: 星期二, 23 四月 2024 15:50:32 +0800 Subject: [PATCH] Merge branch 'master' of https://gitee.com/a1536384743/erp_-override --- north-glass-erp/northglass-erp/src/views/pp/processCard/PrintProcess.vue | 301 +++++++++++++++++++++++++++++-------------------- 1 files changed, 179 insertions(+), 122 deletions(-) diff --git a/north-glass-erp/northglass-erp/src/views/pp/processCard/PrintProcess.vue b/north-glass-erp/northglass-erp/src/views/pp/processCard/PrintProcess.vue index a2083d3..3f37c21 100644 --- a/north-glass-erp/northglass-erp/src/views/pp/processCard/PrintProcess.vue +++ b/north-glass-erp/northglass-erp/src/views/pp/processCard/PrintProcess.vue @@ -5,111 +5,131 @@ import {Search} from "@element-plus/icons-vue" import {useRouter} from 'vue-router' import {changeFilterEvent, filterChanged} from "@/hook" - import {useI18n} from 'vue-i18n' import deepClone from "@/utils/deepClone"; +import QRCode from "qrcode"; //璇█鑾峰彇 const {t} = useI18n() let router = useRouter() let produceList = ref([]) -let details = ref([]) +let list = ref() +const details = ref([]) + const data = ref({ - printList:[] + printList: [] }) const {currentRoute} = useRouter() const route = currentRoute.value data.value.printList = JSON.parse(route.query.printList) -let flowCardCount=data.value.printList.length +let flowCardCount = data.value.printList.length onMounted(() => { - // if (id === null || id === undefined || id === '') { - // return - // } + // if (id === null || id === undefined || id === '') { + // return + // } request.post(`/processCard/getSelectPrinting`, data.value).then((res) => { if (res.code == 200) { produceList.value = deepClone(res.data.data) + handleGetQRCode() } else { ElMessage.warning(res.msg) router.push("/login") } }) + } - ) + +) + + +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 printFlowCard = () => { - // 闇�瑕佹墦鍗扮殑灞�閮ㄥ尯鍩熻祴浜�"print-wrap"鐨刬d - 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"鐨刬d + 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); - // 涓巗tyle鍏冪礌璁剧疆鐨勬牱寮忕浉閰嶅悎 - // 鎶婃墦鍗板唴瀹圭殑鍏冪礌娣诲姞鍒癰ody(浣滀负body鐨勫瓙鍏冪礌锛屽彲鐢╞ody鐨勫瓙閫夋嫨鍣� '>' 鎺у埗鎵撳嵃鏍峰紡) - body.appendChild(content); - setTimeout(() => { - window.print(); - body.removeChild(content); - body.removeChild(style); - }, 20); -} + // 涓巗tyle鍏冪礌璁剧疆鐨勬牱寮忕浉閰嶅悎 + // 鎶婃墦鍗板唴瀹圭殑鍏冪礌娣诲姞鍒癰ody(浣滀负body鐨勫瓙鍏冪礌锛屽彲鐢╞ody鐨勫瓙閫夋嫨鍣� '>' 鎺у埗鎵撳嵃鏍峰紡) + body.appendChild(content); + setTimeout(() => { + window.print(); + body.removeChild(content); + body.removeChild(style); + }, 20); + } </script> <template> - <el-button id="printButton" @click="printFlowCard">鎵撳嵃</el-button> + <el-button id="printButton" @click="printFlowCard();">鎵撳嵃</el-button> <div id="printFlowCard"> <table v-for="(item,id) in produceList" id="contentTable" :key="id"> <thead> <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 id="bj" style="float: right;font-size: 28px">{{ id + 1 }}</div> <div>甯稿窞甯傚悏鍒╃幓鐠冩湁闄愬叕鍙�</div> <div>鐢熶骇娴佺▼鍗�</div> - <div style="text-align: right;font-weight: bolder">娴佺▼鍗″彿锛� {{ itemFlow.process_id }}/{{ itemFlow.technologyNumber }} 鍏� {{flowCardCount}} 鏋�</div> + <div style="text-align: right;font-weight: bolder">娴佺▼鍗″彿锛� {{ + itemFlow.process_id + }}/{{ itemFlow.technologyNumber }} 鍏� {{ flowCardCount }} 鏋� + </div> </td> </tr> <tr v-for="(items,index) in item.detail" :key="index"> - <td>瀹㈡埛鍚嶇О锛�</td> + <td class="tdNowrap">瀹㈡埛鍚嶇О锛�</td> <td colspan="2">{{ items.customer_name }}</td> - <td>椤圭洰鍚嶇О锛�</td> + <td class="tdNowrap">椤圭洰鍚嶇О锛�</td> <td colspan="2">{{ items.project }}</td> - <td style="width:100px">宸ヨ壓娴佺▼锛�</td> + <td class="tdNowrap">宸ヨ壓娴佺▼锛�</td> <td colspan="16">{{ items.process }}</td> </tr> <tr v-for="(itemTr,index) in item.detail" :key="index"> - <td>纾ㄨ竟绫诲瀷锛�</td> + <td class="tdNowrap">纾ㄨ竟绫诲瀷锛�</td> <td colspan="2">{{ itemTr.edging_type }}</td> - <td>鍗曠墖鍚嶇О锛�</td> + <td class="tdNowrap">鍗曠墖鍚嶇О锛�</td> <td colspan="2">{{ itemTr.glass_child }}</td> - <td>浜у搧鍚嶇О锛�</td> + <td class="tdNowrap">浜у搧鍚嶇О锛�</td> <td colspan="16">{{ itemTr.product_name }}</td> </tr> - - </thead> - <tbody> <tr> <td rowspan='2'>搴忓彿</td> <td rowspan='2'>瀹�*楂�</td> @@ -118,14 +138,15 @@ <td rowspan='2'>鍛ㄩ暱</td> <td rowspan='2'>鍗婂緞</td> <td rowspan='2'>澶囨敞</td> - <td colspan='2'>鍒囧壊</td> - <td colspan='2'>纾ㄨ竟</td> - <td colspan='2'>閽㈠寲</td> - <td colspan='2'>涓┖</td> - <td colspan='2'>鍖呰</td> - <td colspan='2'></td> - <td colspan='2'></td> - <td colspan='2'></td> + <td v-for="(itemPr,index) in item.processList" :key="index" colspan="2">{{ itemPr.process }}</td> + <!-- <td colspan='2'>鍒囧壊</td>--> + <!-- <td colspan='2'>纾ㄨ竟</td>--> + <!-- <td colspan='2'>閽㈠寲</td>--> + <!-- <td colspan='2'>涓┖</td>--> + <!-- <td colspan='2'>鍖呰</td>--> + <!-- <td colspan='2'></td>--> + <!-- <td colspan='2'></td>--> + <!-- <td colspan='2'></td>--> </tr> <tr> <td>姝e搧</td> @@ -145,10 +166,13 @@ <td>姝e搧</td> <td>娆″搧</td> </tr> + </thead> + <tbody> + <tr v-for="(itemDatile,index) in item.detailList" :key="index"> <td>{{ itemDatile.order_number }}</td> <td>{{ itemDatile.child_width }}</td> - <td>{{ itemDatile.quantity }}</td> + <td class="item">{{ itemDatile.quantity }}</td> <td>{{ itemDatile.total_area }}</td> <td>{{ itemDatile.perimeter }}</td> <td>{{ itemDatile.bend_radius }}</td> @@ -172,19 +196,20 @@ </tr> </tbody> <tfoot> - <tr> - <td colspan="24" v-for="(itemsum,index) in item.detail" :key="index"> + <tr style="height: 14px"> + <td v-for="(itemsum,index) in item.detail" :key="index" colspan="24"> 鏁伴噺锛� <label>{{ itemsum.quantity }}</label> 闈㈢Н锛� <label>{{ itemsum.gross_area }}</label> 閲嶉噺锛� - <label>{{ itemsum.gross_area }}</label> + <label>{{ itemsum.weight }}</label> </td> </tr> <tr v-for="(itemtextarea,index) in item.detail" :key="index"> - <td colspan="6" rowspan="6" style="width: 450px;height: 150px "> - <div style="width: 100%;height: 100%"><textarea style="height: 98%;width: 98%">{{ itemtextarea.processing_note }}</textarea></div> + <td colspan="6" rowspan="6" style="width: 480px;height: 100px "> + <div style="width: 100%;height: 100%"><textarea style="height: 99%;width: 99%">{{ itemtextarea.processing_note }}</textarea> + </div> </td> <td>瀹屽伐绛惧悕</td> <td></td> @@ -203,25 +228,25 @@ <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>--> +<!-- <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> @@ -260,29 +285,40 @@ <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 colspan="17" rowspan="2"> - <div style="width: 60px;height: 60px;background-color: red"></div> + <!-- <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)--> +<!-- }}--> + + </div> + </td> + <td colspan="16"> + <span style="float: left;font-weight: bolder">{{ qrCodeItem.processIdNumber }}</span> + </td> + </tr> </tfoot> </table> @@ -296,7 +332,7 @@ padding: 0; } -#printButton{ +#printButton { margin-top: -40px; width: 100px; } @@ -304,8 +340,7 @@ #printFlowCard { margin-top: -40px; text-align: center; - //font-weight: bolder; - height: 600px; +//font-weight: bolder; height: 600px; } #contentTable { @@ -327,32 +362,54 @@ #contentTable tr td { border: 1px solid black; - height: 22px; + height: 18px; font-weight: bolder; } -#contentTable tbody{ - height: 22px; + +#contentTable tbody { + white-space: nowrap; + } -#contentTable tbody td { - width: 50px; +.tdNowrap { + white-space: nowrap; + } -#contentTable tfoot{ +#contentTable tfoot { font-size: 12px; font-weight: bolder; } -/* 鍦� .footer 鍏冪礌鍚庡缁堟彃鍏ュ垎椤电 */ @media print { - #contentTable {page-break-after: always;} + + tbody { + display: table-row-group; + } + + table { + page-break-before: always; + } + + table { + page-break-inside: auto; + } + + thead { + display: table-header-group; + } + + tfoot { + display: table-footer-group; + page-break-inside: avoid; + } } - -thead { display:table-header-group;page-break-inside:avoid; } -tbody { display:table-row-group;} -tfoot { display:table-footer-group;page-break-inside:avoid; } +.qrCode img { + width: 100%; + height: 100%; +} </style> \ No newline at end of file -- Gitblit v1.8.0