From d098e2e3a16837ad0a61c1a2df93b27c7d16bfd2 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期五, 06 九月 2024 17:10:29 +0800 Subject: [PATCH] 批量导入 --- src/views/hazardousChemicals/warehouseManage/components/printCode.vue | 64 ++++++++++++++++++++----------- 1 files changed, 41 insertions(+), 23 deletions(-) diff --git a/src/views/hazardousChemicals/warehouseManage/components/printCode.vue b/src/views/hazardousChemicals/warehouseManage/components/printCode.vue index cfb3a63..a92c71e 100644 --- a/src/views/hazardousChemicals/warehouseManage/components/printCode.vue +++ b/src/views/hazardousChemicals/warehouseManage/components/printCode.vue @@ -3,7 +3,7 @@ <el-dialog v-model="dialogVisible" :title="title == 'pro' ? '成品二维码打印' : '危化品二维码打印'" - width="600px" + width="650px" :before-close="handleClose" :close-on-press-escape="false" :close-on-click-modal="false" @@ -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,11 +61,12 @@ 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"; -import {getProDetail, getProductRecord} from "@/api/hazardousChemicals/productRecord"; -import {getRawDetail} from "@/api/hazardousChemicals/rawRecord"; +import {getProDetail, getProductRecord, getWhProDetail} from "@/api/hazardousChemicals/productRecord"; +import {getRawDetail, getWhRawDetail} from "@/api/hazardousChemicals/rawRecord"; const dialogVisible = ref(false); const title = ref(""); @@ -79,18 +81,20 @@ queryParams:{ pageNum: 1, pageSize: 5, - warehouseId: null, - basicId: null, + // warehouseId: null, + // basicId: null, + entryId: null, code: '' }, chooseList: [] }) - +const pageCount = ref(3) const originalList = ref([]) const openDialog = async (type,value) => { - state.queryParams.warehouseId =value.warehouseId - state.queryParams.basicId =value.basicId + // state.queryParams.warehouseId =value.warehouseId + // state.queryParams.basicId =value.basicId + state.queryParams.entryId = value.id title.value = type; await getList() @@ -120,8 +124,7 @@ state.queryParams = { pageNum: 1, pageSize: 5, - warehouseId: null, - basicId: null, + entryId: null, code: '' } state.total = 0 @@ -129,14 +132,14 @@ } const getList = async () => { if(title.value == 'pro'){ - const res = await getProDetail(state.queryParams) + 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 @@ -144,7 +147,7 @@ ElMessage.warning(res.message) } }else { - const res = await getRawDetail(state.queryParams) + const res = await getWhRawDetail(state.queryParams) if(res.code == 200){ state.dataList = res.data.list.map(item => { return{ @@ -165,6 +168,7 @@ } const printEvent=() => { + let data = [] if(state.chooseList && state.chooseList.length>0){ data = state.chooseList @@ -174,10 +178,11 @@ 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 + //创建一个新的隐藏的iframe元素 const printFrame =document.createElement('iframe') printFrame.style.display='none' @@ -192,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> @@ -201,7 +207,18 @@ </html> `) printDocument.close() + let ct = document.getElementById('codeTitle').offsetWidth + console.log('ct',ct) //在打印窗口中调用打印功能 + // debugger + // if(ct >= 180) { + + // }else { + // + // printFrame.contentWindow.document.body.style.zoom = '100%' + // } + + printFrame.contentWindow.print() //移除隐藏的iframe元素 document.body.removeChild(printFrame) @@ -229,5 +246,6 @@ flex-direction: column; align-items: flex-start; } + } </style> -- Gitblit v1.9.2