|
|
@@ -0,0 +1,172 @@
|
|
|
+<template>
|
|
|
+ <ele-modal
|
|
|
+ title="二维码"
|
|
|
+ :visible.sync="QRvisible"
|
|
|
+ v-if="QRvisible"
|
|
|
+ width="800px"
|
|
|
+ >
|
|
|
+ <div id="printSection">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in codeList"
|
|
|
+ :key="index"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ padding-left: 20px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: auto;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div style="width: 250px; height: 240px">
|
|
|
+ <img
|
|
|
+ :src="item.qrcode"
|
|
|
+ alt="QR Code"
|
|
|
+ style="width: 240px; height: 240px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 440px;
|
|
|
+ height: 240px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div style="text-align: left; font-size: 20px">
|
|
|
+ <span style="display: inline-block; width: 100px">编码:</span>
|
|
|
+ <span style="color: #000">{{
|
|
|
+ dimension == 3 ? item.packagingCode : item.no
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="text-align: left; font-size: 20px">
|
|
|
+ <span style="display: inline-block; width: 100px">名称:</span>
|
|
|
+ <span style="color: #000">{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="text-align: left; font-size: 20px">
|
|
|
+ <span style="display: inline-block; width: 100px">型号:</span>
|
|
|
+ <span style="color: #000">{{ item.modelType }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: left; font-size: 20px">
|
|
|
+ <span style="display: inline-block; width: 100px">规格:</span>
|
|
|
+ <span style="color: #000">{{ item.specification }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: left; font-size: 20px">
|
|
|
+ <span style="display: inline-block; width: 100px">牌号:</span>
|
|
|
+ <span style="color: #000">{{ item.brandNum }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: left; font-size: 20px">
|
|
|
+ <span style="display: inline-block; width: 100px">物料代号:</span>
|
|
|
+ <span style="color: #000">{{ item.materielCode }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: left; font-size: 20px">
|
|
|
+ <span style="display: inline-block; width: 100px">客户代号:</span>
|
|
|
+ <span style="color: #000">{{ item.clientCode }}</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: left; font-size: 20px">
|
|
|
+ <span style="display: inline-block; width: 100px">刻码:</span>
|
|
|
+ <span style="color: #000">{{ item.engrave }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="text-align: left; font-size: 20px">
|
|
|
+ <span style="display: inline-block; width: 100px">工位名称:</span>
|
|
|
+ <span style="color: #000">{{
|
|
|
+ item.workstation ? item.workstation.name : ''
|
|
|
+ }}</span>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="print">打印预览</el-button>
|
|
|
+ <el-button @click="close">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </ele-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import QRCode from 'qrcode';
|
|
|
+ export default {
|
|
|
+ name: 'print',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ QRvisible: false,
|
|
|
+ codeList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: ['dimension'],
|
|
|
+ methods: {
|
|
|
+ open(data) {
|
|
|
+ this.codeList = data;
|
|
|
+ this.QRvisible = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.generateQRCodes();
|
|
|
+ });
|
|
|
+ // queryPrint({ ids }).then(res => {
|
|
|
+ // this.codeList = res;
|
|
|
+ // this.QRvisible = true
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.generateQRCodes()
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ },
|
|
|
+
|
|
|
+ generateQRCodes() {
|
|
|
+ this.codeList.forEach((item) => {
|
|
|
+ let code = '';
|
|
|
+ if (this.dimension == 3) {
|
|
|
+ code = item.packagingCode;
|
|
|
+ } else {
|
|
|
+ code = item.no;
|
|
|
+ }
|
|
|
+ QRCode.toDataURL(code)
|
|
|
+ .then((url) => {
|
|
|
+ item.qrcode = url;
|
|
|
+ this.$forceUpdate();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ close() {
|
|
|
+ this.QRvisible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ print() {
|
|
|
+ const printSection = document.getElementById('printSection');
|
|
|
+ // 创建打印任务
|
|
|
+ const printWindow = window.open('', '_blank');
|
|
|
+ printWindow.document.open();
|
|
|
+ printWindow.document.write('<html><head><title>打印预览</title>');
|
|
|
+ printWindow.document.write(
|
|
|
+ '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
|
|
|
+ );
|
|
|
+ printWindow.document.write('</head><body>');
|
|
|
+ printWindow.document.write(printSection.innerHTML);
|
|
|
+ printWindow.document.write('</body></html>');
|
|
|
+ printWindow.document.close();
|
|
|
+ printWindow.onload = function () {
|
|
|
+ printWindow.print();
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ @media print {
|
|
|
+ #printSection {
|
|
|
+ font-size: 34px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|