kd-aiot-frontend-mes/src/views/produceOrder/components/print.vue

<template>
    <ele-modal title="二维码" :visible.sync="QRvisible" v-if="QRvisible" width="800px" :maxable="true">

        <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; margin-bottom: 30px;">
                <div style="width: 250px; height: 240px; ">
                    <img :src="item.qrcode" alt="QR Code" style=" width: 200px; height: 200px;">
                </div>
                <div
                    style="width: 440px; display: flex;  flex-direction: column;  flex-wrap: wrap; justify-content: space-between; align-items:flex-start;">
                    <div style="text-align: left;   font-size: 16px; ">
                        <span style="display: inline-block;  width: 100px;">产品编码：</span>
                        <span style="color: #000;">{{ item.productCode }}</span>
                    </div>

                    <div style="text-align: left;   font-size: 16px; ">
                        <span style="display: inline-block;  width: 100px;">名称：</span>
                        <span style="color: #000;">{{ item.productName }}</span>
                    </div>

                    <div style="text-align: left;   font-size: 16px; ">
                        <span style="display: inline-block;  width: 100px;">牌号：</span>
                        <span style="color: #000;">{{ item.brandNo }}</span>
                    </div>

                    <div style="text-align: left;   font-size: 16px; ">
                        <span style="display: inline-block;  width: 100px;">型号：</span>
                        <span style="color: #000;">{{ item.model }}</span>
                    </div>


                    <div style="text-align: left;   font-size: 16px; ">
                        <span style="display: inline-block;  width: 100px;">生产数量：</span>
                        <span style="color: #000;">{{ item.formingNum }} {{ item.unit }}</span>
                    </div>



                    <div style="text-align: left;   font-size: 16px; ">
                        <span style="display: inline-block;  width: 100px;">生产重量：</span>
                        <span style="color: #000;">{{ item.formingWeight }} {{ item.weightUnit }}</span>
                    </div>

                    <div style="text-align: left;   font-size: 16px; ">
                        <span style="display: inline-block;  width: 100px;">状态：</span>
                        <span style="color: #000;">{{ statusList[item.status] }}</span>
                    </div>


                    <div style="text-align: left;   font-size: 16px; ">
                        <span style="display: inline-block;  width: 100px;">工艺路线：</span>
                        <span style="color: #000;">{{ item.produceRoutingName }} </span>
                    </div>
                    <div style="text-align: left;   font-size: 16px; ">
                        <span style="display: inline-block;  width: 100px;">颜色：</span>
                        <span style="color: #000;">{{ item.colorKey }} </span>
                    </div>
                    <div style="text-align: left;   font-size: 16px; ">
                        <span style="display: inline-block;  width: 100px;">机型：</span>
                        <span style="color: #000;">{{ item.modelKey }} </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'
import {
    queryPrint
} from '@/api/produceOrder/index.js';
export default {
  name: 'print',
    data() {
        return {
            QRvisible: false,

            codeList: [],
            statusList: {
                4: '待生产',
                5: '生产中',
                6: '已完成',
                7: '已延期',
                8: '待下达'
            }
        }
    },


    methods: {

        open(ids) {
            queryPrint({ ids }).then(res => {
                this.codeList = res;
                this.QRvisible = true


                this.$nextTick(() => {
                    this.generateQRCodes()
                })


            })

        },

        generateQRCodes() {
            this.codeList.forEach(item => {
                QRCode.toDataURL(item.id)
                    .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>