From e8ae17c0fbe5dc0a5424905c738004b143d9ce2c Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期四, 22 八月 2024 15:04:14 +0800 Subject: [PATCH] 二维码打印排版 --- src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue | 24 +++++++- src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue | 36 +++++++++--- src/views/hazardousChemicals/warehouseManage/components/rawDetail.vue | 23 ++++++- src/views/hazardousChemicals/overdueWarning/index.vue | 8 ++ src/views/hazardousChemicals/warehouseManage/components/proDetail.vue | 23 ++++++- src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue | 24 +++++++- src/views/hazardousChemicals/warehouseManage/components/printCode.vue | 31 +++++++-- 7 files changed, 138 insertions(+), 31 deletions(-) diff --git a/src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue b/src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue index cb696d6..1e2249c 100644 --- a/src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue +++ b/src/views/hazardousChemicals/electronicWarehouse/components/proDetail.vue @@ -37,7 +37,7 @@ </div> </div> <!-- 表格数据 --> - <el-table v-loading="loading" :data="data.dataList" :border="true"> + <el-table v-loading="loading" :data="data.dataList" :border="true" :cell-style="cellStyle"> <el-table-column label="序号" type="index" align="center" width="80" /> <el-table-column label="品名" prop="productBasic.name" align="center" /> <el-table-column label="产品编号" prop="productBasic.productSn" align="center" /> @@ -59,8 +59,7 @@ </el-table-column> <el-table-column label="在库余量" prop="remaining" align="center" > <template #default="scope"> - <span v-if="scope.row.state === 0">{{scope.row.remaining}}{{scope.row.productBasic.unit}}</span> - <span v-else>—</span> + <span >{{scope.row.remaining}}{{scope.row.productBasic.unit}}</span> </template> </el-table-column> <el-table-column label="所在仓库" prop="warehouseName" align="center" /> @@ -211,6 +210,25 @@ }) } + + +const cellStyle = ({ row, column,rowIndex, columnIndex }) => { + let arr = [] + if (data.dataList !== null) { + data.dataList.filter((item, index) => { + arr.push(item.basicId) + }) + } + for (let i = 0; i <= arr.length; i++) { + if (arr[i] == row.basicId) { + if(row.remaining < row.productBasic.metering){ + if (columnIndex === 11 || columnIndex === 10){ + return { color:' red' } + } + } + } + } +}; </script> <style scoped lang="scss"> diff --git a/src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue b/src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue index 6756fd2..2c88aab 100644 --- a/src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue +++ b/src/views/hazardousChemicals/electronicWarehouse/components/rawDetail.vue @@ -37,7 +37,7 @@ </div> </div> <!-- 表格数据 --> - <el-table v-loading="loading" :data="data.dataList" :border="true"> + <el-table v-loading="loading" :data="data.dataList" :border="true" :cell-style="cellStyle"> <el-table-column label="序号" type="index" align="center" width="80" /> <el-table-column label="品名" prop="hazmatBasic.name" align="center" /> <el-table-column label="产品编号" prop="hazmatBasic.productSn" align="center" /> @@ -59,8 +59,8 @@ </el-table-column> <el-table-column label="在库余量" prop="remaining" align="center" > <template #default="scope"> - <span v-if="scope.row.state === 0 || scope.row.state === 1">{{scope.row.remaining}}{{scope.row.hazmatBasic.unit}}</span> - <span v-else>—</span> + <span>{{scope.row.remaining}}{{scope.row.hazmatBasic.unit}}</span> + </template> </el-table-column> <el-table-column label="所在仓库" prop="warehouseName" align="center" /> @@ -219,6 +219,24 @@ dialogVisible.value = false } +const cellStyle = ({ row, column,rowIndex, columnIndex }) => { + let arr = [] + if (data.dataList !== null) { + data.dataList.filter((item, index) => { + arr.push(item.basicId) + }) + } + for (let i = 0; i <= arr.length; i++) { + if (arr[i] == row.basicId) { + if(row.remaining < row.hazmatBasic.metering){ + if (columnIndex === 11 || columnIndex === 10){ + return { color:' red' } + } + } + } + } +}; + </script> <style scoped lang="scss"> diff --git a/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue b/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue index bea1c50..a8f124d 100644 --- a/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue +++ b/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue @@ -12,12 +12,19 @@ </div> <el-card style="max-width: 480px"> <div :id="state.form.code"> - <div style="display: flex;flex-direction: column;align-items: center;"> - <span style="font-size:14px;margin-top:10px;">{{title}}</span> - <vue-qr :size="80" :margin="0" :auto-color="true" :dot-scale="1" :text="state.form.code" style="margin: 10px 0 5px 0"></vue-qr> - <span style="font-size:10px;margin-top:5px;">{{state.form.code}}</span> + <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;"> + <div style="font-size:14px;margin-bottom: 2px" id="codeTitle">{{title}}</div> + <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true" :text="state.form.code"></vue-qr> + <div style="font-size:10px;margin-top: 2px">{{state.form.code}}</div> </div> </div> +<!-- <div :id="state.form.code">--> +<!-- <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">--> +<!-- <span style="font-size:14px;margin-bottom: 2px">{{title}}</span>--> +<!-- <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true" :text="state.form.code" ></vue-qr>--> +<!-- <span style="font-size:10px;margin-top: 2px">{{state.form.code}}</span>--> +<!-- </div>--> +<!-- </div>--> </el-card> </el-dialog> </div> @@ -39,9 +46,9 @@ const openDialog = async (type,value) => { if(type == 'pro'){ - title.value = value.productBasic.name + ' ' + '—' + ' '+ value.productBasic.productSn + title.value = value.productBasic.name + '—' + value.productBasic.productSn }else { - title.value = value.hazmatBasic.name + ' ' + '—' + ' '+ value.hazmatBasic.productSn + title.value = value.hazmatBasic.name + '—' + value.hazmatBasic.productSn } state.form = JSON.parse(JSON.stringify(value)); @@ -57,7 +64,7 @@ let qrCodes='' for(let index in data){ console.log(index,'index') - qrCodes+=`<div class="my-list-col"><div class="centered-content">${document.getElementById(data[index].code).innerHTML}</div></div>` + qrCodes+=`<div class="my-list-col"><div class="centered-content changeFont">${document.getElementById(data[index].code).innerHTML}</div></div>` } const printContent=document.createElement('div') printContent.innerHTML=qrCodes @@ -76,8 +83,9 @@ <style> @media print { .page-break { page-break-after:always;} /* 定义分页符格式*/ - .centered-content { text-align:center;} /* 居中对齐内容*/ + .centered-content { display: flex;justify-content: center; align-items: center;height: 90vh;} /* 居中对齐内容*/ @page { size:50mm 40mm;margin:0mm; } + .changeFont{font-size:12px;transform: scale(0.8);-webkit-transform: scale(0.85);} } </style> </head> @@ -85,8 +93,18 @@ </html> `) printDocument.close() + let ct = document.getElementById('codeTitle').offsetWidth + console.log('ct',ct) //在打印窗口中调用打印功能 - console.log('printFrame.contentWindow.document.body.style',printFrame.contentWindow.document.body.style) + // debugger + // if(ct >= 180) { + + // }else { + // + // printFrame.contentWindow.document.body.style.zoom = '100%' + // } + + printFrame.contentWindow.print() //移除隐藏的iframe元素 document.body.removeChild(printFrame) diff --git a/src/views/hazardousChemicals/overdueWarning/index.vue b/src/views/hazardousChemicals/overdueWarning/index.vue index 18e9967..7fa70a0 100644 --- a/src/views/hazardousChemicals/overdueWarning/index.vue +++ b/src/views/hazardousChemicals/overdueWarning/index.vue @@ -42,8 +42,12 @@ <el-table-column label="生成时间" prop="createTime" align="center" /> <el-table-column label="领用人" prop="createName" align="center" /> <el-table-column label="领用时间" prop="useTime" align="center" /> - <el-table-column label="最后流转时间" prop="updateTime" align="center" /> - <el-table-column label="处理时间" prop="handleTime" align="center" /> +<!-- <el-table-column label="最后流转时间" prop="updateTime" align="center" />--> + <el-table-column label="处理时间" prop="updateTime" align="center" > + <template #default="scope"> + <span>{{scope.row.state === 1 ? scope.row.updateTime :'--'}}</span> + </template> + </el-table-column> <el-table-column label="状态" prop="name" align="center" > <template #default="scope"> <span>{{scope.row.state === 0 ? '未处理':'已处理'}}</span> diff --git a/src/views/hazardousChemicals/warehouseManage/components/printCode.vue b/src/views/hazardousChemicals/warehouseManage/components/printCode.vue index d52ee4f..14a6dcd 100644 --- a/src/views/hazardousChemicals/warehouseManage/components/printCode.vue +++ b/src/views/hazardousChemicals/warehouseManage/components/printCode.vue @@ -31,16 +31,17 @@ <el-table-column align="center" > <template #default="scope"> <div :id="scope.row.code"> - <div style="display: flex;flex-direction: column;align-items: center;justify-content: center"> - <div style="font-size:14px;margin-top:10px;">{{scope.row.name}}—{{scope.row.productSn}}</div> - <vue-qr :size="80" :margin="0" :auto-color="true" :dot-scale="1" :text="scope.row.code" style="margin-top:10px;"></vue-qr> - <div style="font-size:10px;margin-top:10px;">{{scope.row.code}}</div> + <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;"> + <div style="font-size:14px;margin-bottom: 2px" id="codeTitle">{{scope.row.name}}—{{scope.row.productSn}}</div> + <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true" :text="scope.row.code"></vue-qr> + <div style="font-size:10px;margin-top: 2px">{{scope.row.code}}</div> </div> </div> </template> </el-table-column> </el-table> <pagination + v-model:pager-count="pageCount" v-show="state.total > 0" :total="state.total" v-model:page="state.queryParams.pageNum" @@ -60,6 +61,7 @@ import {reactive, ref, toRefs} from 'vue' import VueQr from 'vue-qr/src/packages/vue-qr.vue' import {ElMessage} from "element-plus"; +import printJS from 'print-js'; import {addWarehouse, checkName, editWarehouse} from "@/api/hazardousChemicals/warehouse"; import {verifyPhone} from "@/utils/validate"; import {checkBasicName} from "@/api/hazardousChemicals/basicInfo"; @@ -87,7 +89,7 @@ chooseList: [] }) - +const pageCount = ref(3) const originalList = ref([]) const openDialog = async (type,value) => { // state.queryParams.warehouseId =value.warehouseId @@ -166,6 +168,7 @@ } const printEvent=() => { + let data = [] if(state.chooseList && state.chooseList.length>0){ data = state.chooseList @@ -175,7 +178,7 @@ let qrCodes='' for(let index in data){ console.log(index,'index') - qrCodes+=`<div class="my-list-col"><div class="centered-content">${document.getElementById(data[index].code).innerHTML}</div></div>` + qrCodes+=`<div class="my-list-col"><div class="centered-content changeFont">${document.getElementById(data[index].code).innerHTML}</div></div>` } const printContent=document.createElement('div') printContent.innerHTML=qrCodes @@ -194,8 +197,9 @@ <style> @media print { .page-break { page-break-after:always;} /* 定义分页符格式*/ - .centered-content { text-align:center;} /* 居中对齐内容*/ + .centered-content { display: flex;justify-content: center; align-items: center;height: 90vh;} /* 居中对齐内容*/ @page { size:50mm 40mm;margin:0mm; } + .changeFont{font-size:12px;transform: scale(0.8);-webkit-transform: scale(0.85);} } </style> </head> @@ -203,8 +207,18 @@ </html> `) printDocument.close() + let ct = document.getElementById('codeTitle').offsetWidth + console.log('ct',ct) //在打印窗口中调用打印功能 - console.log('printFrame.contentWindow.document.body.style',printFrame.contentWindow.document.body.style) + // debugger + // if(ct >= 180) { + + // }else { + // + // printFrame.contentWindow.document.body.style.zoom = '100%' + // } + + printFrame.contentWindow.print() //移除隐藏的iframe元素 document.body.removeChild(printFrame) @@ -232,5 +246,6 @@ flex-direction: column; align-items: flex-start; } + } </style> diff --git a/src/views/hazardousChemicals/warehouseManage/components/proDetail.vue b/src/views/hazardousChemicals/warehouseManage/components/proDetail.vue index 3ac5639..bcecf09 100644 --- a/src/views/hazardousChemicals/warehouseManage/components/proDetail.vue +++ b/src/views/hazardousChemicals/warehouseManage/components/proDetail.vue @@ -37,7 +37,7 @@ </div> </div> <!-- 表格数据 --> - <el-table v-loading="loading" :data="data.dataList" :border="true"> + <el-table v-loading="loading" :data="data.dataList" :border="true" :cell-style="cellStyle"> <el-table-column label="序号" type="index" align="center" width="80" /> <el-table-column label="品名" prop="productBasic.name" align="center" /> <el-table-column label="产品编号" prop="productBasic.productSn" align="center" /> @@ -59,8 +59,8 @@ </el-table-column> <el-table-column label="在库余量" prop="remaining" align="center" > <template #default="scope"> - <span v-if="scope.row.state === 0">{{scope.row.remaining}}{{scope.row.productBasic.unit}}</span> - <span v-else>—</span> + <span>{{scope.row.remaining}}{{scope.row.productBasic.unit}}</span> + </template> </el-table-column> <el-table-column label="所在仓库" prop="warehouseName" align="center" /> @@ -211,6 +211,23 @@ } +const cellStyle = ({ row, column,rowIndex, columnIndex }) => { + let arr = [] + if (data.dataList !== null) { + data.dataList.filter((item, index) => { + arr.push(item.basicId) + }) + } + for (let i = 0; i <= arr.length; i++) { + if (arr[i] == row.basicId) { + if(row.remaining < row.hproductBasic.metering){ + if (columnIndex === 11 || columnIndex === 10){ + return { color:' red' } + } + } + } + } +}; </script> <style scoped lang="scss"> diff --git a/src/views/hazardousChemicals/warehouseManage/components/rawDetail.vue b/src/views/hazardousChemicals/warehouseManage/components/rawDetail.vue index 1ce954a..131fec3 100644 --- a/src/views/hazardousChemicals/warehouseManage/components/rawDetail.vue +++ b/src/views/hazardousChemicals/warehouseManage/components/rawDetail.vue @@ -37,7 +37,7 @@ </div> </div> <!-- 表格数据 --> - <el-table v-loading="loading" :data="data.dataList" :border="true"> + <el-table v-loading="loading" :data="data.dataList" :border="true" :cell-style="cellStyle"> <el-table-column label="序号" type="index" align="center" width="80" /> <el-table-column label="品名" prop="hazmatBasic.name" align="center" /> <el-table-column label="产品编号" prop="hazmatBasic.productSn" align="center" /> @@ -59,8 +59,8 @@ </el-table-column> <el-table-column label="在库余量" prop="remaining" align="center" > <template #default="scope"> - <span v-if="scope.row.state === 0 || scope.row.state === 1">{{scope.row.remaining}}{{scope.row.hazmatBasic.unit}}</span> - <span v-else>—</span> + <span>{{scope.row.remaining}}{{scope.row.hazmatBasic.unit}}</span> + </template> </el-table-column> <el-table-column label="所在仓库" prop="warehouseName" align="center" /> @@ -215,6 +215,23 @@ }) } +const cellStyle = ({ row, column,rowIndex, columnIndex }) => { + let arr = [] + if (data.dataList !== null) { + data.dataList.filter((item, index) => { + arr.push(item.basicId) + }) + } + for (let i = 0; i <= arr.length; i++) { + if (arr[i] == row.basicId) { + if(row.remaining < row.hazmatBasic.metering){ + if (columnIndex === 11 || columnIndex === 10){ + return { color:' red' } + } + } + } + } +}; </script> <style scoped lang="scss"> -- Gitblit v1.9.2