| | |
| | | label: 'mg', |
| | | }, |
| | | { |
| | | value: 'kg', |
| | | label: 'kg', |
| | | }, |
| | | { |
| | | value: 'ml', |
| | | label: 'ml', |
| | | }, |
| | |
| | | label: 'mg', |
| | | }, |
| | | { |
| | | value: 'kg', |
| | | label: 'kg', |
| | | }, |
| | | { |
| | | value: 'ml', |
| | | label: 'ml', |
| | | }, |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | // 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 |