交换标签批量打印功能

首先。cnm! cnm! cnm！(重要的事情说三遍)

交换包标签批量打印，现在的标签打印只能一行一行打。

结果你吗了八字的有9千多张标签？想tm累死老子。添加批量打印功能。

添加弹窗

<a-dropdown v-if="selectedRowKeys.length > 0"><a-menu slot="overlay"><a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item><a-menu-item key="2" @click="bulkPrint"><a-icon type="delete"/>打印</a-menu-item></a-menu><a-button style="margin-left: 8px"> 批量操作<a-icon type="down"/></a-button></a-dropdown><--  表单区域-->
<bulk-print-modal ref="BulkPrintForm"></bulk-print-modal>

components: {BulkPrintModal},
methods: {bulkPrint(e){let that = thisconsole.log(that.selectionRows.length)this.$refs.BulkPrintForm.edit(that.selectionRows)this.$refs.BulkPrintForm.title = '制作标签'this.$refs.BulkPrintForm.disableSubmit = false},
}

selectionRows是表格中选择的项，把选择的项传入弹窗。

弹窗项

edit(records) {let that = thisthat.recordList = recordsconsole.log(that.recordList)that.visible = true//  that.visible = truethis.$nextTick(() => {that.$forceUpdate();for(let i=0; i<records.length; i++){let pkgNo = records[i].packageNoJsBarcode(document.getElementById(pkgNo), pkgNo,{width:2,height:60,text:pkgNo});}setTimeout(() => {that.clickBtn();}, 100)})},

JsBarcode为条形码
records是传入的选择的项
that.clickBtn();为多少毫秒自动执行方法。这里直接进入打印界面。

<div id="batchModal" ref="pbatchModal"><div v-for="item in recordList" :key="item.packageNo" style="page-break-after:always;"><div style="height: 40px; width: 60px;">
<!--          {{item.packageNo}}--><div style="margin-bottom: -20px;text-align: center;"><div style="margin-left: 50px"><svg :id="item.packageNo" width="300px"></svg></div><div style="margin-top: -10px;margin-left: -18px"><textarea style="text-align: center; border: none; font-size: 26px; color: black;height: 30%;max-height: 45px;width: 25rem">{{item.simpleBankName}}  {{item.busiCodeName}}</textarea><textarea style="margin-top: -15px;text-align: center; border: none; font-size: 35px;font-weight: bold; color: black;max-height: 58px">{{item.labelId}}</textarea>
<!--              <input type="text" style="margin-top: -25px;text-align: center; border: none; font-size: 35px;font-weight: bold; color: black;max-height: 58px" :value="item.labelId">--></div></div><div style="text-align: center;"></div></div></div></div>

将所有项循环显示

完整代码

<template><a-modal:title="title":width="848":visible="visible":confirmLoading="confirmLoading":destroyOnClose="true":footer="null"@ok="handleOk"@cancel="handleCancel"cancelText="关闭"><div id="batchModal" ref="pbatchModal"><div v-for="item in recordList" :key="item.packageNo" style="page-break-after:always;"><div style="height: 40px; width: 60px;">
<!--          {{item.packageNo}}--><div style="margin-bottom: -20px;text-align: center;"><div style="margin-left: 50px"><svg :id="item.packageNo" width="300px"></svg></div><div style="margin-top: -10px;margin-left: -18px"><textarea style="text-align: center; border: none; font-size: 26px; color: black;height: 30%;max-height: 45px;width: 25rem">{{item.simpleBankName}}  {{item.busiCodeName}}</textarea><textarea style="margin-top: -15px;text-align: center; border: none; font-size: 35px;font-weight: bold; color: black;max-height: 58px">{{item.labelId}}</textarea>
<!--              <input type="text" style="margin-top: -25px;text-align: center; border: none; font-size: 35px;font-weight: bold; color: black;max-height: 58px" :value="item.labelId">--></div></div><div style="text-align: center;"></div></div></div></div><a-button ref="batchPrintBtn" type="primary" v-print="'#batchModal'" @click="print()" style="dispaly: none;">打印</a-button></a-modal>
</template><script>import { httpAction } from '@/api/manage'import pick from 'lodash.pick'import Print from 'vue-print-nb'import JsBarcode from 'jsbarcode'import ACol from 'ant-design-vue/es/grid/Col'export default {name: 'BulkPrintModal',components: {ACol,Print,JsBarcode},data() {return {title: '设置标签打印模板',visible: false,model: {mmWidth: 80,mmHeight: 50,mmTop: 3,mmBottom: 3,mmLeft: 3,mmRight: 3,landscape: false,},confirmLoading: false,//预览视图固定宽度为800pxpaperPreWidth: '800px',preWidth: 800,recordList: [],printObj: {id: "batchModal",popTitle: '',extraCss: '',extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> @page {size: auto;margin-top: 0mm;margin-bottom: 0mm;} </style>,<style> #batchModal { height: auto !important; } <style>,<style> html { width: 800px; height: auto; background-color: #FFFFFF; } </style>',}}},methods: {add() {this.edit({})},edit(records) {let that = thisthat.recordList = recordsconsole.log(that.recordList)that.visible = true//  that.visible = truethis.$nextTick(() => {that.$forceUpdate();for(let i=0; i<records.length; i++){let pkgNo = records[i].packageNoJsBarcode(document.getElementById(pkgNo), pkgNo,{width:2,height:60,text:pkgNo});}setTimeout(() => {that.clickBtn();}, 100)})},clickBtn() {let that = thisthat.$refs.batchPrintBtn.$el.click();},print(){// Print(this.$refs.pbatchModal,{});let that = thisconsole.log("阿牛1")setTimeout(() => {console.log("阿牛2")console.log()that.visible = falsethat.close()}, 2000)},close() {this.$emit('close')this.visible = false},handleOk() {const that = this//保存到本地//window.localStorage.setItem('bqPaperModel', JSON.stringify(that.model))that.close()},handleCancel() {this.close()},barcode () {JsBarcode(this.$refs.barcodeImg, "Hi world!",{format: "CODE128",//选择要使用的条形码类型text: this.recipe.recipeNo,displayValue: true,//是否在条形码下方显示文字textPosition: "top"//设置文本的垂直位置})},},}
</script><style scoped>@page{size:  auto;   /* auto is the initial value */margin: 3mm;  /* this affects the margin in the printer settings */}html{background-color: #FFFFFF;margin: 0px;  /* this affects the margin on the html before sending to printer */}</style>

交换标签批量打印功能相关推荐

得力标签批量打印二维码
得力标签批量打印二维码最近公司要求做一个二维码标签打印, 网上搜索了很多..期间实验了多种方案: 1 javax.print 打印(离线本地打印,无法做到只要用户有打印机就可以) 2 网页打印(将图 ...
python自动排版 html_Python 实现自动完成A4标签排版打印功能
老婆大人让俺帮她通过Excel生成百人的准考证,她们学校打算来一次高考模拟.由于高考改革,每个学生的考试科目不一样,需要自动生成一下. 我一个程序员平时很少用到Excel,自己也不打算深入研究这个软件 ...
vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
python标签打印_Python 实现自动完成A4标签排版打印功能
老婆大人让俺帮她通过Excel生成百人的准考证,她们学校打算来一次高考模拟.由于高考改革,每个学生的考试科目不一样,需要自动生成一下. 我一个程序员平时很少用到Excel,自己也不打算深入研究这个软件 ...
cad无法安装_快速实现CAD图纸中的一图多页批量打印功能教程
如何实现CAD批量打印功能有时工作中需要一张图纸里多页打印出来,如果每次用窗口框选或者"布局"进行打印有点浪费时间影响工作效率.下面分享一下博主如何进行一张图纸里多页进行打印,提高 ...
vue 批量打印功能打印自定义表格table
vue 批量打印功能打印自定义表格table 批量打印功能需求图 1.用excle先画出来 2.然后变为代码点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存然后在 ...
如何用C#实现电子面单批量打印功能
电子面单的使用,改变了传统物流操作模式,订单填写更加规范,有效降低贴单错误率.同时便捷打单,不仅提升了客户体验,而且实现网点工作效率提高. 公司普及应用电子面单,可以有效降低成本.提升分拣效率等,更大 ...
cad布局教程_发布，一个好用的CAD原生批量打印功能
点击上方 "CAD自学网 " → 点击右上角"..." → 点选"设为星标 ★ " 为CAD自学网加上星标,即可及时收到干货啦! 左下角阅 ...
python如何连续打印_Python实现批量打印功能
前言尝试着用安装批量打印所需要的组件 pip install pypiwin32 单个文件打印代码: import win32api import win32print import os def ...

交换标签批量打印功能

交换标签批量打印功能相关推荐

最新文章

热门文章