标识卡打印
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