标识卡打印修改

yangwl
guoshuang 3 months ago
parent c8901fba0d
commit 178befbc64

@ -1987,8 +1987,10 @@ export default {
/**打印标识卡弹出框**/ /**打印标识卡弹出框**/
printIdCard() { printIdCard() {
this.$refs.printID.printDialogVisible = true;
this.$refs.printID.init("20021221552"); this.$refs.printID.init("20021221552");
this.$refs.printID.showPrint();
this.$refs.printID.printDialogVisible = true;
}, },
// //
printIdFunc(obj) { printIdFunc(obj) {

@ -1,15 +1,9 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- 打印预览弹出层 --> <el-dialog title="" :visible.sync="printDialogVisible" width="990px">
<el-dialog title="" :visible.sync="printDialogVisible" width="990px"> <div id="printFrom" class="my-print-box">
<div> <div v-for="(item, index) in printData.idCardList" :key="index">
<el-input v-model="idCardsNum" placeholder="请输入板次数量" style="width:100px"/> <el-form class="print-card">
<el-button type="primary" icon="el-icon-check" circle @click="showPrint()"/>
</div>
<div id="printFrom" class="my-print-box">
<div v-for="(item, index) in printData.idCardList" :key="index">
<el-form>
<!-- 表头-工单信息 -->
<el-row> <el-row>
<el-col :span="7"> <el-col :span="7">
<img src="@/assets/logo/lanjv.png" class="report-logo" /> <img src="@/assets/logo/lanjv.png" class="report-logo" />
@ -17,34 +11,34 @@
<el-col :span="10" class="center-text"> <el-col :span="10" class="center-text">
<span>产品标识卡</span> <span>产品标识卡</span>
</el-col> </el-col>
</el-row>
<el-row class="my-print-head">
<el-col><el-divider/></el-col>
</el-row> </el-row>
<div class="custom-divider"></div>
<el-row class="my-print-foot"> <el-row class="my-print-foot">
<el-col :offset="1" :span="10"> <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><br/> <div>生产日期: {{ printData.factory }}</div><br />
<div>板次:{{ printData.factory }}</div><br/> <div>板次: {{ printData.factory }}</div><br />
<div>数量:{{ printData.factory }}</div> <div>数量: {{ printData.factory }}</div>
</el-col> </el-col>
<el-col :offset="1" :span="10"> <el-col :offset="1" :span="10">
<canvas ref="qrCanvas"></canvas> <canvas :id="'qrcode-' + index" class="qrcode"></canvas>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div style="clear: both; margin-bottom: 30px;"></div>
<div v-if="(index + 1) % 2 === 0" class="print-page"></div>
</div> </div>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlePrint(printData)"> </el-button> <el-button type="primary" @click="handlePrint(printData)"> </el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { import {
getIdCardList, getIdCardList,
@ -79,7 +73,8 @@ export default {
ignore: ["no-print"], ignore: ["no-print"],
workCenter: "暂无数据", workCenter: "暂无数据",
factory: null, factory: null,
idCardList: [] idCardList: [],
//gridStyle:'border: 1px solid lightgray; margin-bottom: -1px;'
}, },
workorderCode: '', workorderCode: '',
// //
@ -92,6 +87,10 @@ export default {
}; };
}, },
created() { created() {
},
mounted() {
//this.showPrint();
}, },
methods: { methods: {
init(workorderCode){ init(workorderCode){
@ -101,41 +100,33 @@ export default {
// - // -
handlePrint(params) { handlePrint(params) {
printJS({ printJS({
printable: params.printable, // 'printFrom', // id printable: params.printable,
type: params.type || "html", type: params.type || 'html',
maxWidth: 1500, // maxWidth: 1500,
font_size: "", // font_size: "", //
header: params.header, // '', header: params.header, // '',
targetStyles: ["*"], targetStyles: ['*'],
style: "@page {margin:0 10mm};", // - style: `
ignoreElements: params.ignore || [], // ['no-print'] @page { margin: 30mm 10mm; }
properties: params.properties || null, .print-page { page-break-after: always; }
}); `,
ignoreElements: params.ignore || [],
});
}, },
// - // -
showPrint() { async showPrint() {
// console.log('执行了打印预览');
//this.printData.workCenter = ""; let response = await getIdCardList(this.workorderCode,this.idCardNum);
getIdCardList(this.workorderCode,this.idCardNum).then((response) => { this.printData.idCardList = response.idCards;
debugger this.$nextTick(() => {
//this.reset(); this.printData.idCardList.forEach((item, index) => {
this.printData.idCardList = response.idCards; const canvas = document.getElementById('qrcode-' + index);
// 使 Vue nextTick DOM QRCode.toCanvas(canvas, item, { width: 350,margin:1 }, function (error) {
this.$nextTick(() => { if (error) console.error(error);
console.log('success!');
//for(var i=0;0<response.idCards.length;i++){
let qrCanvasIndex = "qrCanvas"+0;
const canvas = this.$refs.qrCanvas;
const options = {
width: 350, //
height: 350 //
};
QRCode.toCanvas(canvas,response.idCards[0], options, error => {
if (error) console.error(error);
});
//}
}); });
}); });
})
} }
}, },
}; };
@ -150,6 +141,7 @@ export default {
text-align: left; text-align: left;
font-size: 63px; font-size: 63px;
font-weight: 800; font-weight: 800;
color: black;
} }
.report-logo { .report-logo {
@ -178,4 +170,25 @@ export default {
.my-print-box{ .my-print-box{
width:100% width:100%
} }
.custom-divider {
width: 100%;
height: 1px;
background-color: #a5a4a4 !important;
margin: 20px 0 !important;
-webkit-print-color-adjust: exact;
}
.print-page {
page-break-after: always;
}
@media print {
.custom-divider {
width: 100%;
height: 1px;
background-color: #a5a4a4 !important;
margin: 20px 0 !important;
-webkit-print-color-adjust: exact;
}
}
</style> </style>

Loading…
Cancel
Save