标识卡打印
zhaoxiaolin
4 months ago
parent
fa17d4fc12
commit
c8901fba0d
@ -0,0 +1,181 @@
|
||||
<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>
|
||||
<!-- 表头-工单信息 -->
|
||||
<el-row>
|
||||
<el-col :span="7">
|
||||
<img src="@/assets/logo/lanjv.png" class="report-logo" />
|
||||
</el-col>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="10">
|
||||
<canvas ref="qrCanvas"></canvas>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</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,
|
||||
} from '@/api/plan/workorder';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
export default {
|
||||
name: "printID",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
idCardsNum: 1,
|
||||
optType: undefined,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
selectRow: {},
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
printDialogVisible: false,
|
||||
// 打印
|
||||
printData: {
|
||||
printable: "printFrom",
|
||||
ignore: ["no-print"],
|
||||
workCenter: "暂无数据",
|
||||
factory: null,
|
||||
idCardList: []
|
||||
},
|
||||
workorderCode: '',
|
||||
//工单重新渲染表格
|
||||
refreshWorkerTable: true,
|
||||
// 表单校验
|
||||
rules: {
|
||||
|
||||
},
|
||||
tableIndex: "tableIndex",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
init(workorderCode){
|
||||
this.workorderCode = workorderCode;
|
||||
},
|
||||
|
||||
// 打印预览-浏览器打印
|
||||
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,
|
||||
});
|
||||
},
|
||||
// 打印预览-点击打印预览按钮
|
||||
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);
|
||||
});
|
||||
//}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.print-btn {
|
||||
margin-bottom: 15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.center-text {
|
||||
text-align: left;
|
||||
font-size: 63px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.report-logo {
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.my-print-table {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.my-print-foot {
|
||||
font-size: 17px;
|
||||
}
|
||||
.my-print-foot2 {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.my-print-box{
|
||||
width:100%
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue