|
|
|
|
@ -1,6 +1,15 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<el-dialog title="" :visible.sync="printDialogVisible" width="990px">
|
|
|
|
|
<el-dialog title="" :visible.sync="printDialogVisible" width="1000px">
|
|
|
|
|
<div>
|
|
|
|
|
<el-form inline>
|
|
|
|
|
<el-form-item label="补打版次" prop="factory">
|
|
|
|
|
<el-input v-model="idCardsNum" placeholder="请输入补打版次" style="width:100px"/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-button type="primary" icon="el-icon-check" circle @click="showPrint()"/>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div id="printFrom" class="my-print-box">
|
|
|
|
|
<div v-for="(item, index) in printData.idCardList" :key="index">
|
|
|
|
|
<el-form class="print-card">
|
|
|
|
|
@ -8,7 +17,9 @@
|
|
|
|
|
<el-col :span="7">
|
|
|
|
|
<img src="@/assets/logo/lanjv.png" class="report-logo" />
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="10" class="center-text">
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col class="center-text">
|
|
|
|
|
<span>产品标识卡</span>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
@ -16,11 +27,11 @@
|
|
|
|
|
|
|
|
|
|
<el-row class="my-print-foot">
|
|
|
|
|
<el-col :offset="1" :span="10">
|
|
|
|
|
<div>产品名称: {{ printData.factory }}</div><br />
|
|
|
|
|
<div>批次号: {{ printData.factory }}</div><br />
|
|
|
|
|
<div>生产日期: {{ printData.factory }}</div><br />
|
|
|
|
|
<div>板次: {{ printData.factory }}</div><br />
|
|
|
|
|
<div>数量: {{ printData.factory }}</div>
|
|
|
|
|
<div class="card-div1">产品名称: {{ item.productName }}</div><br />
|
|
|
|
|
<div class="card-div1">批次号: {{ item.batchCode }}</div><br />
|
|
|
|
|
<div class="card-div2">生产日期: {{ item.productDateStr }}</div><br />
|
|
|
|
|
<div class="card-div2">板次: {{ item.palletNo }}</div><br />
|
|
|
|
|
<div class="card-div2">数量: {{ item.batchQuantity }}</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :offset="1" :span="10">
|
|
|
|
|
<canvas :id="'qrcode-' + index" class="qrcode"></canvas>
|
|
|
|
|
@ -28,7 +39,7 @@
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div style="clear: both; margin-bottom: 30px;"></div>
|
|
|
|
|
<div v-if="(index + 1) % 2 === 0" class="print-page"></div>
|
|
|
|
|
<div v-if="(index + 1) % 1 === 0" class="print-page"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
@ -51,7 +62,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
idCardsNum: 1,
|
|
|
|
|
idCardsNum: null,
|
|
|
|
|
optType: undefined,
|
|
|
|
|
// 遮罩层
|
|
|
|
|
loading: true,
|
|
|
|
|
@ -89,12 +100,13 @@ export default {
|
|
|
|
|
created() {
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
//this.showPrint();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
init(workorderCode){
|
|
|
|
|
this.workorderCode = workorderCode;
|
|
|
|
|
this.showPrint();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 打印预览-浏览器打印
|
|
|
|
|
@ -107,7 +119,7 @@ export default {
|
|
|
|
|
header: params.header, // '表单',
|
|
|
|
|
targetStyles: ['*'],
|
|
|
|
|
style: `
|
|
|
|
|
@page { margin: 30mm 10mm; }
|
|
|
|
|
@page { size: A5 landscape; } body { margin: 10mm; padding: 0; }
|
|
|
|
|
.print-page { page-break-after: always; }
|
|
|
|
|
`,
|
|
|
|
|
ignoreElements: params.ignore || [],
|
|
|
|
|
@ -116,12 +128,17 @@ export default {
|
|
|
|
|
// 打印预览-点击打印预览按钮
|
|
|
|
|
async showPrint() {
|
|
|
|
|
console.log('执行了打印预览');
|
|
|
|
|
let response = await getIdCardList(this.workorderCode,this.idCardNum);
|
|
|
|
|
this.printData.idCardList = response.idCards;
|
|
|
|
|
let params = {
|
|
|
|
|
};
|
|
|
|
|
if(this.idCardsNum!=null){
|
|
|
|
|
params.palletNo=this.idCardsNum;
|
|
|
|
|
}
|
|
|
|
|
let response = await getIdCardList({workorderCode:this.workorderCode,...params});
|
|
|
|
|
this.printData.idCardList = response;
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.printData.idCardList.forEach((item, index) => {
|
|
|
|
|
const canvas = document.getElementById('qrcode-' + index);
|
|
|
|
|
QRCode.toCanvas(canvas, item, { width: 350,margin:1 }, function (error) {
|
|
|
|
|
QRCode.toCanvas(canvas, item.palletCode, { width: 350,margin:1 }, function (error) {
|
|
|
|
|
if (error) console.error(error);
|
|
|
|
|
console.log('success!');
|
|
|
|
|
});
|
|
|
|
|
@ -138,7 +155,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.center-text {
|
|
|
|
|
text-align: left;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 63px;
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
color: black;
|
|
|
|
|
@ -190,5 +207,14 @@ export default {
|
|
|
|
|
-webkit-print-color-adjust: exact;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-div1{
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
padding-top: 14px;
|
|
|
|
|
}
|
|
|
|
|
.card-div2{
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
padding-top: 14px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
