You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
316 lines
8.8 KiB
Vue
316 lines
8.8 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-dialog title="" :visible.sync="printDialogVisible" width="1000px">
|
|
<div>
|
|
<el-form inline label-width="80px">
|
|
<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="showSupplementPrint()"/>
|
|
|
|
<el-form-item label="增打批次" prop="batchCode">
|
|
<el-select
|
|
v-model="batchCode"
|
|
placeholder="请选择批次"
|
|
@change="$forceUpdate()"
|
|
clearable
|
|
style="width: 200px"
|
|
>
|
|
<el-option
|
|
v-for="item in batchCodeOption"
|
|
:key="item.batchCode"
|
|
:label="item.batchCode"
|
|
:value="item.batchCode"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="增打板次" prop="idCardsNumAdd">
|
|
<el-input v-model="idCardsNumAdd" placeholder="请输入" style="width:100px"/>
|
|
</el-form-item>
|
|
<el-form-item label="增打数量" prop="batchQuantity">
|
|
<el-input v-model="batchQuantity" placeholder="请输入" style="width:100px"/>
|
|
</el-form-item>
|
|
<el-button type="primary" icon="el-icon-check" circle @click="showAddPrint()"/>
|
|
</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">
|
|
<el-row>
|
|
<el-col :span="7">
|
|
<img src="@/assets/logo/lanjv.png" class="report-logo" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col class="center-text">
|
|
<span>产品标识卡</span>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="custom-divider"></div>
|
|
|
|
<el-row class="my-print-foot">
|
|
<el-col :offset="1" :span="13">
|
|
<div class="card-div2">产品名称: {{ item.productName }}</div><br />
|
|
<div class="card-div2">批次号: {{ 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="9">
|
|
<canvas :id="'qrcode-' + index" class="qrcode"></canvas>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div style="margin-top: 10px;">
|
|
<table align="center" border="1" cellpadding="0" cellspacing="0" width="820">
|
|
<tr class="tr-row"><td class="tr-row-1"></td><td class="tr-row-2"></td></tr>
|
|
<tr class="tr-row"><td class="tr-row-1"></td><td class="tr-row-2"></td></tr>
|
|
<tr class="tr-row"><td class="tr-row-1"></td><td class="tr-row-2"></td></tr>
|
|
</table>
|
|
</div>
|
|
<div v-if="(index + 1) % 1 === 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>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import {
|
|
getIdCardList,
|
|
getBatchCode,
|
|
} from '@/api/plan/workorder';
|
|
import QRCode from 'qrcode';
|
|
|
|
export default {
|
|
name: "printID",
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
idCardsNum: null,//板次
|
|
idCardsNumAdd: null,//增打板次
|
|
batchCode: null,//批次
|
|
batchQuantity: null,//数量
|
|
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: [],
|
|
//gridStyle:'border: 1px solid lightgray; margin-bottom: -1px;'
|
|
},
|
|
workorderCode: '',
|
|
workorderId: '',
|
|
batchCodeOption: [],
|
|
//工单重新渲染表格
|
|
refreshWorkerTable: true,
|
|
// 表单校验
|
|
rules: {
|
|
|
|
},
|
|
tableIndex: "tableIndex",
|
|
};
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
|
|
|
|
},
|
|
methods: {
|
|
init(workorderCode,workorderId){
|
|
this.workorderCode = workorderCode;
|
|
this.workorderId = workorderId;
|
|
this.idCardsNum = null;
|
|
this.idCardsNumAdd = null;
|
|
this.batchCode = null;
|
|
this.batchQuantity = null;
|
|
this.initBatchCodeselection(this.workorderId);
|
|
this.showSupplementPrint();
|
|
},
|
|
|
|
//初始化批次号选择框
|
|
initBatchCodeselection(workorderId){
|
|
getBatchCode(workorderId).then((response) => {
|
|
this.batchCodeOption = response;
|
|
});
|
|
},
|
|
|
|
// 打印预览-浏览器打印
|
|
handlePrint(params) {
|
|
printJS({
|
|
printable: params.printable,
|
|
type: params.type || 'html',
|
|
maxWidth: 1500,
|
|
font_size: "", // 设置字体大小
|
|
header: params.header, // '表单',
|
|
targetStyles: ['*'],
|
|
style: `
|
|
body { margin: 10mm; padding: 0; }
|
|
.print-page { page-break-after: always; }
|
|
`,
|
|
ignoreElements: params.ignore || [],
|
|
});
|
|
//打印完成后 版次变为空
|
|
|
|
},
|
|
// 打印预览-点击打印预览按钮-补打
|
|
async showSupplementPrint() {
|
|
console.log('执行了补充打印预览');
|
|
let params = {};
|
|
params.addFlag = '0'; //增打标志
|
|
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.palletCode, { width: 300 , margin:1 }, function (error) {
|
|
if (error) console.error(error);
|
|
console.log('success!');
|
|
});
|
|
});
|
|
})
|
|
},
|
|
|
|
// 打印预览-增打
|
|
async showAddPrint() {
|
|
console.log('执行了新增打印预览');
|
|
let params = {};
|
|
if(this.idCardsNumAdd == null || this.batchCode == null || this.batchQuantity == null
|
|
||this.idCardsNumAdd == '' || this.batchCode == '' || this.batchQuantity == ''
|
|
){
|
|
this.$modal.msg("您填入的增打信息存在空值！");
|
|
return;
|
|
}else{
|
|
//产品名称 后台返回
|
|
//生产日期 后台返回
|
|
params.batchCode = this.batchCode;//批次号 需要选择
|
|
params.palletNo = this.idCardsNumAdd;//板次
|
|
params.batchQuantity = this.batchQuantity;//数量
|
|
params.addFlag = '1';//增打标志
|
|
}
|
|
let response = await getIdCardList({workorderCode:this.workorderCode,...params});
|
|
this.printData.idCardList = response;
|
|
if(this.printData.idCardList.length == 0){
|
|
this.$modal.msg("该板次已被正常打印，请填入正确板次！");
|
|
}else{
|
|
this.$nextTick(() => {
|
|
this.printData.idCardList.forEach((item, index) => {
|
|
const canvas = document.getElementById('qrcode-' + index);
|
|
QRCode.toCanvas(canvas, item.palletCode, { width: 300 , margin:1 }, function (error) {
|
|
if (error) console.error(error);
|
|
console.log('success!');
|
|
});
|
|
});
|
|
})
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.print-btn {
|
|
margin-bottom: 15px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.center-text {
|
|
text-align: center;
|
|
font-size: 50px;
|
|
font-weight: 800;
|
|
color: black;
|
|
}
|
|
|
|
.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%
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.card-div1{
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
padding-top: 14px;
|
|
}
|
|
.card-div2{
|
|
font-size: 25px;
|
|
font-weight: 700;
|
|
padding-top: 2px;
|
|
margin-left: 35px;
|
|
}
|
|
.tr-row {
|
|
height: 35px;
|
|
}
|
|
.tr-row-1 {
|
|
width: 246px;
|
|
}
|
|
.tr-row-2 {
|
|
width: 574px;
|
|
}
|
|
</style>
|