<template>
|
<div>
|
<vol-box
|
v-model="showDetialBox"
|
:lazy="true"
|
width="300px"
|
:padding="15"
|
title="打印"
|
>
|
<div
|
id="printContent"
|
style="display: flex; justify-content: center; align-items: center"
|
>
|
<div
|
style="display: flex; justify-content: center; align-items: center"
|
>
|
<VueQrcode id="qrcode" :value="Code" :size="200"></VueQrcode>
|
</div>
|
</div>
|
<div id="palletcode">
|
<span
|
style="display: flex; justify-content: center; align-items: center"
|
>物料编码:{{ materielCode }}</span
|
>
|
</div>
|
|
<template #footer>
|
<el-button type="primary" size="small" @click="print()">打印</el-button>
|
<el-button type="danger" size="small" @click="showDetialBox = false"
|
>关闭</el-button
|
>
|
</template>
|
</vol-box>
|
</div>
|
</template>
|
|
<script>
|
import VolBox from "@/components/basic/VolBox.vue";
|
import VueQrcode from "vue-qrcode";
|
import QRCode from "qrcode";
|
import { da } from "element-plus/es/locales.mjs";
|
export default {
|
components: { VolBox, VueQrcode },
|
data() {
|
return {
|
showDetialBox: false,
|
row: null,
|
qrcodeDataURL: "",
|
Code: "",
|
materielCode: "",
|
lotNo: "",
|
purchaseOrderNo: "",
|
quantity: "",
|
productionDate: "",
|
effectiveDate: "",
|
};
|
},
|
methods: {
|
open(row) {
|
this.row = row;
|
this.showDetialBox = true;
|
if (row && row.materielCode) {
|
this.materielCode = row.materielCode;
|
this.lotNo = row.lotNo;
|
this.purchaseOrderNo = row.purchaseOrderNo;
|
this.quantity = row.quantity;
|
this.productionDate = formatDate(row.productionDate);
|
this.effectiveDate = formatDate(row.effectiveDate);
|
}
|
this.Code =
|
"M:" +
|
this.materielCode +
|
",BS:" +
|
this.lotNo +
|
",DM:" +
|
this.productionDate +
|
",DE:" +
|
this.effectiveDate +
|
",Q:" +
|
this.quantity +
|
",PO:" +
|
this.purchaseOrderNo;
|
},
|
print() {
|
let printContent = document.getElementById("printContent");
|
let palletcode = document.getElementById("palletcode");
|
var printWindow = window.open("", "");
|
printWindow.document.write(printContent.innerHTML);
|
printWindow.document.write(palletcode.innerHTML);
|
printWindow.document.close();
|
printWindow.focus();
|
printWindow.print();
|
printWindow.close();
|
},
|
formatDate(dateStr) {
|
let date = new Date(dateStr);
|
let year = date.getFullYear();
|
let month = String(date.getMonth() + 1).padStart(2, "0");
|
let day = String(date.getDate()).padStart(2, "0");
|
return year + "-" + month + "-" + day;
|
},
|
},
|
|
created() {},
|
};
|
function formatDate(dateStr) {
|
const date = new Date(dateStr);
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
|
2,
|
"0"
|
)}-${String(date.getDate()).padStart(2, "0")}`;
|
}
|
</script>
|
|
<style scoped>
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
|
.content-text {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.right-text {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
</style>
|
<style>
|
.el-table .warning-row {
|
background: #e6a23c;
|
}
|
|
.el-table .success-row {
|
background: #f0f9eb;
|
}
|
|
.el-table .error-row {
|
background: #f56c6c;
|
}
|
|
canvas {
|
display: block;
|
margin: auto;
|
}
|
</style>
|
