首先。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 = this
console.log(that.selectionRows.length)
this.$refs.BulkPrintForm.edit(that.selectionRows)
this.$refs.BulkPrintForm.title = '制作标签'
this.$refs.BulkPrintForm.disableSubmit = false
},
}
- selectionRows是表格中选择的项，把选择的项传入弹窗。
弹窗项
edit(records) {
let that = this
that.recordList = records
console.log(that.recordList)
that.visible = true
// that.visible = true
this.$nextTick(() => {
that.$forceUpdate();
for(let i=0; i<records.length; i++){
let pkgNo = records[i].packageNo
JsBarcode(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,
//预览视图固定宽度为800px
paperPreWidth: '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 = this
that.recordList = records
console.log(that.recordList)
that.visible = true
// that.visible = true
this.$nextTick(() => {
that.$forceUpdate();
for(let i=0; i<records.length; i++){
let pkgNo = records[i].packageNo
JsBarcode(document.getElementById(pkgNo), pkgNo,
{
width:2,
height:60,
text:pkgNo
});
}
setTimeout(() => {
that.clickBtn();
}, 100)
})
},
clickBtn() {
let that = this
that.$refs.batchPrintBtn.$el.click();
},
print(){
// Print(this.$refs.pbatchModal,{});
let that = this
console.log("阿牛1")
setTimeout(() => {
console.log("阿牛2")
console.log()
that.visible = false
that.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>