1

src/views/produceOrder/components/print.vue

@@ -5,7 +5,7 @@
 
 
             <div v-for="(item, index) in codeList" :key="index"
-                style=" display: flex; padding-left: 20px;  align-items: center; justify-content: center; margin: auto;">
+                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>

src/views/produceOrder/components/printTg.vue

@@ -0,0 +1,164 @@
+<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;width: 100%; height: 100%; align-items: center; justify-content: center; margin: auto;">
+                <div style="width: 200px; height: 200px; margin-right: 18px;">
+                    <img :src="item.qrcode" alt="QR Code" style=" width: 200px; height: 200px;">
+                </div>
+                <div
+                    style="width: 520px; 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;  ">产品编码：</span>
+                        <span style="color: #000;">{{ item.productCode }}</span>
+                    </div>
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  ">名称：</span>
+                        <span style="color: #000;">{{ item.productName }}</span>
+                    </div>
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  ">牌号：</span>
+                        <span style="color: #000;">{{ item.brandNo }}</span>
+                    </div>
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  ">型号：</span>
+                        <span style="color: #000;">{{ item.model }}</span>
+                    </div>
+
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  ">生产数量：</span>
+                        <span style="color: #000;">{{ item.formingNum }} {{ item.unit }}</span>
+                    </div>
+
+
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  ">生产重量：</span>
+                        <span style="color: #000;">{{ item.formingWeight }} {{ item.weightUnit }}</span>
+                    </div>
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  ">状态：</span>
+                        <span style="color: #000;">{{ statusList[item.status] }}</span>
+                    </div>
+
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  ">工艺路线：</span>
+                        <span style="color: #000;">{{ item.produceRoutingName }} </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.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>

src/views/produceOrder/index.vue

@@ -74,6 +74,7 @@
 
     <print ref="printRef"></print>
     <printSr ref="printSrRef"></printSr>
+    <printTg ref="printTgRef"></printTg>
 
     <createDialog ref="createRef" @success="createSuccess" />
     <unpackDialog ref="unpackRef" @success="createSuccess" />
@@ -94,6 +95,7 @@ import unpackDialog from './components/unpackDialog.vue';
 import pickingDialog from './components/pickingDialog.vue';
 import print from './components/print.vue';
 import printSr from './components/printSr'
+import printTg from './components/printTg'
 
 
 export default {
@@ -103,7 +105,8 @@ export default {
     createDialog,
     unpackDialog,
     print,
-    printSr
+    printSr,
+    printTg
 
   },
   data() {
@@ -503,6 +506,8 @@ export default {
     handleQRcode(row) {
       if (this.clientEnvironmentId == 2) {
         this.$refs.printSrRef.open([row.id])
+      } else if (this.clientEnvironmentId == 2) {
+        this.$refs.printTgRef.open(ids)
       } else {
         this.$refs.printRef.open([row.id])
       }
@@ -514,7 +519,13 @@ export default {
 
       if (this.clientEnvironmentId == 2) {
         this.$refs.printSrRef.open(ids)
-      } else {
+      } else if (this.clientEnvironmentId == 2) {
+        this.$refs.printTgRef.open(ids)
+      }
+
+
+
+      else {
         this.$refs.printRef.open(ids)
       }