zpy 打印

ruoyi-ui/src/views/smartSchool/schoolProperty/equipmenTledger/printBarcodes.vue

+<template>
+    <div>
+        <!-- 打印二维码 弹框部分 -->
+        <el-dialog title="打印条码预览" :visible.sync="printDialog" width="30%">
+            <div class="qrCodeList">
+                <div v-for="(item, index) in chooseList" :key="index">
+                    <div class="titlShow">东营市二中</div>
+                    <div class="flexBlock qrCode">
+                        <div class="qrCodeLeft">
+                            <div :id="'qrcode' + index"></div>
+                            <div>{{ item.encode }}</div>
+                        </div>
+                        <div class="qrCodeRight">
+                            <div>{{ item.equipmentName }}：{{ item.model }}</div>
+                            <div>地点：{{ item.place }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="printCode">打 印</el-button>
+            </div>
+        </el-dialog>
+        <!-- 打印二维码 弹框部分 -->
+
+        <!-- 隐藏二维码页面样式 -->
+        <div id="printBlock">
+            <div v-for="(item, index) in printList" :key="index" class="printBody">
+                <div class="titlePrint">东营市二中</div>
+                <div class="flexBlock printQrCode">
+                    <div class="printLeft">
+                        <div :id="'print' + index" class="printImg"></div>
+                        <div>{{ item.encode }}</div>
+                    </div>
+                    <div class="printRight">
+                        <div>{{ item.equipmentName }}：{{ item.model }}</div>
+                        <div>地点：{{ item.place }}</div>
+                    </div>
+                </div>
+                <div style="page-break-after:always"></div>
+            </div>
+        </div>
+        <!-- 隐藏二维码页面样式 -->
+
+    </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import QRCode from "qrcodejs2"; // 生成二维码插件
+import printJS from "print-js"; // 打印插件
+
+
+export default {
+    name: "index",
+    data() {
+        return {
+            loading: true, // 遮罩层
+            total: 0, // 总条数
+            deviceData: [], // 设备台账表格数据
+            title: "", // 弹出层标题
+            dialogVisible: false, // 添加或修改
+            queryParams: { // 查询参数
+                pageNum: 1,
+                pageSize: 10,
+                equipmentName: '',
+                classificationCode: undefined,
+                equipmentState: '',
+                affiliationType: '',
+            },
+            classificationOptions: [], // 分类编码树状结构
+            formModel: {},
+            nowOptionType: '', // 0 入库 1 编辑 2 查看
+            electItem: [], // 选中的数据
+            isDisabledBtn: true,
+            chooseList: [], //用户选择的table数据
+            printDialog: false, // 打印二维码预览
+            printList: [],
+            userList: [] //使用人列表
+        };
+    },
+    created() {
+        const ids = this.$route.query.ids;
+        const encodes = this.$route.query.encodes;
+        const printList = JSON.parse(decodeURIComponent(this.$route.query.printList));
+        this.printBarcodes(ids, encodes, printList);
+    },
+
+
+    methods: {
+        //生成批量打印条码
+        printBarcodes(ids, encodes, printList) {
+            this.printDialog = true;
+            console.log(ids, encodes);
+            this.printList = [...printList];
+            this.chooseList = [...this.printList];
+            console.log(this.chooseList, '122');
+            this.$nextTick(() => {
+                this.printList.map((item, index) => {
+                    const domPrint = document.getElementById(`print${index}`).lastElementChild;
+                    if (domPrint == null) {
+                        new QRCode(`print${index}`, {
+                            width: 60,
+                            height: 60,
+                            text: item.encode,
+                        });
+                    }
+                });
+                this.chooseList.map((item, index) => {
+                    const dom = document.getElementById(`qrcode${index}`).lastElementChild;
+                    if (dom == null) {
+                        new QRCode(`qrcode${index}`, {
+                            width: 150,
+                            height: 150,
+                            text: item.encode,
+                        });
+                    }
+                });
+
+            });
+        },
+
+
+        //打印条码
+        printCode() {
+            printJS({
+                printable: printBlock,
+                type: 'html',
+                targetStyles: ['*'],
+                font_size: '10px',
+                style: `
+        @media print{
+          @page{
+            size:auto;
+            margin:4mm 0mm 0mm 0mm
+          }
+          @page :first{
+            margin-top:2mm
+          }
+          #printBlock{
+            display:block!important
+          }
+        }`
+            });
+        }
+    },
+
+
+
+
+}
+</script>
+
+<style scoped>
+::v-deep .el-form-item,
+::v-deep .el-select {
+    width: 100%;
+}
+
+::v-deep .el-form-item--small .el-form-item__content {
+    width: 75%;
+}
+
+.qrCodeList {
+    max-height: 500px;
+    overflow-y: scroll;
+}
+
+.qrCode {
+    width: 300px;
+    font-size: 14px;
+    line-height: 30px;
+    align-items: flex-start;
+    margin: 0 auto 20px auto;
+}
+
+.qrCodeLeft {
+    text-align: center;
+}
+
+.qrCodeRight {
+    padding: 20px 0 20px 15px;
+}
+
+.titlShow {
+    font-weight: bold;
+    text-align: center;
+    padding-bottom: 10px;
+    font-size: 16px;
+}
+
+#printBlock {
+    display: none;
+    margin: 0px !important;
+}
+
+.printLeft {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.printBody {
+    width: 250px;
+}
+
+.printQrCode {
+    font-size: 6px;
+    line-height: 20px;
+    align-items: center;
+    padding: 8px;
+}
+
+.printRight {
+    width: 60%;
+    padding: 0 5px;
+}
+
+.titlePrint {
+    font-size: 8px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.printImg {
+    display: block;
+}
+</style>