Yangwl
/
LJ-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

标识卡打印修改

Browse Source
yangwl
guoshuang 3 months ago
parent c8901fba0d
commit 178befbc64
2 changed files with 77 additions and 62 deletions
Show Stats Download Patch File Download Diff File

4
src/views/plan/workorder/index.vue
Unescape Escape View File

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

131
src/views/plan/workorder/printID.vue
Unescape Escape View File

@ -1,15 +1,9 @@
<template>
<div class="app-container">
<!-- 打印预览弹出层 -->
<el-dialog title="" :visible.sync="printDialogVisible" width="990px">
<div>
<el-input v-model="idCardsNum" placeholder="请输入板次数量" style="width:100px"/>
<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>
<!-- 表头-工单信息 -->
<div class="app-container">
<el-dialog title="" :visible.sync="printDialogVisible" width="990px">
<div id="printFrom" class="my-print-box">
<div v-for="(item, index) in printData.idCardList" :key="index">
<el-form class="print-card">
<el-row>
<el-col :span="7">
<img src="@/assets/logo/lanjv.png" class="report-logo" />
@ -17,34 +11,34 @@
<el-col :span="10" class="center-text">
<span>产品标识卡</span>
</el-col>
</el-row>
<el-row class="my-print-head">
<el-col><el-divider/></el-col>
</el-row>
<div class="custom-divider"></div>
<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>产品名称: {{ printData.factory }}</div><br />
<div>批次号: {{ printData.factory }}</div><br />
<div>生产日期: {{ printData.factory }}</div><br />
<div>板次: {{ printData.factory }}</div><br />
<div>数量: {{ printData.factory }}</div>
</el-col>
<el-col :offset="1" :span="10">
<canvas ref="qrCanvas"></canvas>
<canvas :id="'qrcode-' + index" class="qrcode"></canvas>
</el-col>
</el-row>
</el-form>
<div style="clear: both; margin-bottom: 30px;"></div>
<div v-if="(index + 1) % 2 === 0" class="print-page"></div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
</span>
</el-dialog>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
getIdCardList,
@ -79,7 +73,8 @@ export default {
ignore: ["no-print"],
workCenter: "暂无数据",
factory: null,
idCardList: []
idCardList: [],
//gridStyle:'border: 1px solid lightgray; margin-bottom: -1px;'
},
workorderCode: '',
//工单重新渲染表格
@ -92,6 +87,10 @@ export default {
};
},
created() {
},
mounted() {
//this.showPrint();
},
methods: {
init(workorderCode){
@ -101,41 +100,33 @@ export default {
// 打印预览-浏览器打印
handlePrint(params) {
printJS({
printable: params.printable, // 'printFrom', // 标签元素id
type: params.type || "html",
maxWidth: 1500, // 最大宽度
font_size: "", // 设置字体大小
header: params.header, // '表单',
targetStyles: ["*"],
style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
ignoreElements: params.ignore || [], // ['no-print']
properties: params.properties || null,
});
printable: params.printable,
type: params.type || 'html',
maxWidth: 1500,
font_size: "", // 设置字体大小
header: params.header, // '表单',
targetStyles: ['*'],
style: `
@page { margin: 30mm 10mm; }
.print-page { page-break-after: always; }
`,
ignoreElements: params.ignore || [],
});
},
// 打印预览-点击打印预览按钮
showPrint() {
// 清楚缓存
//this.printData.workCenter = "暂无数据";
getIdCardList(this.workorderCode,this.idCardNum).then((response) => {
debugger
//this.reset();
this.printData.idCardList = response.idCards;
// 使用 Vue 的 nextTick 来确保 DOM 已经更新
this.$nextTick(() => {
//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);
});
//}
async showPrint() {
console.log('执行了打印预览');
let response = await getIdCardList(this.workorderCode,this.idCardNum);
this.printData.idCardList = response.idCards;
this.$nextTick(() => {
this.printData.idCardList.forEach((item, index) => {
const canvas = document.getElementById('qrcode-' + index);
QRCode.toCanvas(canvas, item, { width: 350,margin:1 }, function (error) {
if (error) console.error(error);
console.log('success!');
});
});
})
}
},
};
@ -150,6 +141,7 @@ export default {
text-align: left;
font-size: 63px;
font-weight: 800;
color: black;
}
.report-logo {
@ -178,4 +170,25 @@ export default {
.my-print-box{
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>

Write Preview
Loading…
Cancel
Save