From 39868da3de6192d19dfd316c8be1c080b2d3ebe7 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期五, 18 四月 2025 14:35:46 +0800
Subject: [PATCH] 修改
---
src/views/hazardousChemicals/warehouseManage/components/printCode.vue | 78 ++++++++++++++++++++++++++++++++-------
1 files changed, 64 insertions(+), 14 deletions(-)
diff --git a/src/views/hazardousChemicals/warehouseManage/components/printCode.vue b/src/views/hazardousChemicals/warehouseManage/components/printCode.vue
index d52ee4f..9cdf7cc 100644
--- a/src/views/hazardousChemicals/warehouseManage/components/printCode.vue
+++ b/src/views/hazardousChemicals/warehouseManage/components/printCode.vue
@@ -31,16 +31,18 @@
<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 class="page-break"></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"
@@ -50,7 +52,7 @@
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose" size="default">取 消</el-button>
- <el-button type="primary" @click="printEvent" size="default" v-preReClick>打印</el-button>
+ <el-button type="primary" @click="handlePrint" size="default" v-preReClick>打印</el-button>
</span>
</template>
</el-dialog>
@@ -60,6 +62,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 +90,7 @@
chooseList: []
})
-
+const pageCount = ref(3)
const originalList = ref([])
const openDialog = async (type,value) => {
// state.queryParams.warehouseId =value.warehouseId
@@ -133,11 +136,11 @@
const res = await getWhProDetail(state.queryParams)
if(res.code == 200){
state.dataList = res.data.list.map(item => {
- return{
- ...item,
- name: item.productBasic.name,
- productSn: item.productBasic.productSn
- }
+ return{
+ ...item,
+ name: item.productBasic.name,
+ productSn: item.productBasic.productSn
+ }
})
state.total = res.data.total
originalList.value = state.dataList
@@ -166,6 +169,7 @@
}
const printEvent=() => {
+
let data = []
if(state.chooseList && state.chooseList.length>0){
data = state.chooseList
@@ -175,7 +179,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 +198,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,14 +208,58 @@
</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)
// handleClose()
}
+const handlePrint = () => {
+ let data = [];
+ if(state.chooseList && state.chooseList.length>0){
+ data = state.chooseList;
+ }else {
+ data = state.dataList;
+ }
+ let qrCodes="";
+ for(const index in data){
+ console.log(index,"index");
+ 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;
+ document.getElementsByTagName("body")[0].style.zoom=0.92;
+ // 获取打印模板的DOM元素
+ if (printContent) {
+ // 显示打印模板，以便能够打印
+ printContent.classList.remove("print-hide");
+ // 使用vue-printjs打印模板内容
+ const style = "@media print {@page { size:auto;margin:0; } .page-break { page-break-after:always;} .changeFont{text-align:center;margin-top: 10px} ";
+ printJS({
+ printable: printContent,
+ type: "html",
+ style: style,
+ error: (err) => {
+ console.log("err", err);
+ },
+ font_size: "10px"
+ });
+ // 打印完成后隐藏打印模板
+ printContent.classList.add("print-hide");
+ }
+};
defineExpose({
openDialog
@@ -232,5 +281,6 @@
flex-direction: column;
align-items: flex-start;
}
+
}
</style>
--
Gitblit v1.9.2