优化

src/views/produceOrder/components/print.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; 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;">{{ item.productCode }}</span>
+                    </div>
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  width: 100px;">名称：</span>
+                        <span style="color: #000;">{{ item.productName }}</span>
+                    </div>
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  width: 100px;">牌号：</span>
+                        <span style="color: #000;">{{ item.brandNo }}</span>
+                    </div>
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  width: 100px;">型号：</span>
+                        <span style="color: #000;">{{ item.model }}</span>
+                    </div>
+
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <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: 20px; ">
+                        <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: 20px; ">
+                        <span style="display: inline-block;  width: 100px;">状态：</span>
+                        <span style="color: #000;">{{ statusList[item.status] }}</span>
+                    </div>
+
+
+                    <div style="text-align: left;   font-size: 20px; ">
+                        <span style="display: inline-block;  width: 100px;">工艺路线：</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

@@ -72,71 +72,7 @@
     </el-card>
 
 
-    <ele-modal title="二维码" :visible.sync="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;">{{ item.productCode }}</span>
-            </div>
-
-          <div style="text-align: left;   font-size: 20px; "   >
-              <span style="display: inline-block;  width: 100px;">名称：</span>
-              <span style="color: #000;">{{ item.productName }}</span>
-            </div>
-
-          <div style="text-align: left;   font-size: 20px; "   >
-              <span style="display: inline-block;  width: 100px;">牌号：</span>
-              <span style="color: #000;">{{ item.brandNo }}</span>
-            </div>
-
-          <div style="text-align: left;   font-size: 20px; "   >
-              <span style="display: inline-block;  width: 100px;">型号：</span>
-              <span style="color: #000;">{{ item.model }}</span>
-            </div>
-
-
-          <div style="text-align: left;   font-size: 20px; "   >
-              <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: 20px; "   >
-              <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: 20px; "   >
-              <span style="display: inline-block;  width: 100px;">状态：</span>
-              <span style="color: #000;">{{ statusList[item.status] }}</span>
-            </div>
-
-
-          <div style="text-align: left;   font-size: 20px; "   >
-              <span style="display: inline-block;  width: 100px;">工艺路线：</span>
-              <span style="color: #000;">{{ item.produceRoutingName }} </span>
-            </div>
-
-
-          </div>
-
-        </div>
-      </div>
-
-
-      <div slot="footer">
-        <el-button @click="print">打印预览</el-button>
-        <el-button @click="QRvisible = false">关闭</el-button>
-      </div>
-    </ele-modal>
-
+    <print ref="printRef"></print>
 
     <createDialog ref="createRef" @success="createSuccess" />
     <unpackDialog ref="unpackRef" @success="createSuccess" />
@@ -149,20 +85,23 @@ import {
   getPage,
   batchCompletion,
   cancelCompletion,
-  queryPrint
+
 } from '@/api/produceOrder/index.js';
 import produceOrderSearch from './components/produceOrder-search.vue';
 import createDialog from './components/createDialog.vue';
 import unpackDialog from './components/unpackDialog.vue';
 import pickingDialog from './components/pickingDialog.vue';
-import QRCode from 'qrcode'
+import print from './components/print.vue';
+
 
 export default {
   components: {
     produceOrderSearch,
     pickingDialog,
     createDialog,
-    unpackDialog
+    unpackDialog,
+    print
+
   },
   data() {
     return {
@@ -190,16 +129,9 @@ export default {
       ],
       selection: [],
 
-      QRvisible: false,
 
-      codeList: [],
-      statusList: {
-        4: '待生产',
-        5: '生产中',
-        6: '已完成',
-        7: '已延期',
-        8: '待下达'
-      }
+
+
 
 
 
@@ -561,56 +493,15 @@ export default {
     },
 
     handleQRcode(row) {
-
-      let ids = [ row.id ]
-      queryPrint({ ids }).then(res => {
-        this.codeList = res;
-
-        this.QRvisible = true
-
-        this.$nextTick(() => {
-          this.generateQRCodes()
-        })
-
-
-      })
+      this.$refs.printRef.open([row.id])
     },
 
     allPrinting() {
-
       let ids = this.findAllIds(this.selection);
-      console.log(ids)
-
-      queryPrint({ ids }).then(res => {
-        this.codeList = res;
-
-        this.QRvisible = true
-
-        this.$nextTick(() => {
-          this.generateQRCodes()
-        })
-
-
-      })
-
-
-
-
+       this.$refs.printRef.open(ids)
 
     },
 
-    generateQRCodes() {
-      this.codeList.forEach(item => {
-        QRCode.toDataURL(item.code)
-          .then(url => {
-            item.qrcode = url
-            this.$forceUpdate()
-          })
-          .catch(err => {
-            console.error(err)
-          })
-      })
-    },
 
 
     findAllIds(nodes) {
@@ -628,39 +519,8 @@ export default {
 
 
 
-    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>