11

package.json

@@ -39,6 +39,7 @@
     "json-bigint": "^1.0.0",
     "jspdf": "^2.5.1",
     "nprogress": "^0.2.0",
+    "qrcode": "^1.5.3",
     "tinymce": "^5.10.5",
     "vue": "^2.7.10",
     "vue-clipboard2": "^0.3.3",

src/views/produceOrder/index.vue

@@ -72,13 +72,63 @@
     </el-card>
 
 
-    <ele-modal title="二维码" :visible.sync="QRvisible" width="450px">
+    <ele-modal title="二维码" :visible.sync="QRvisible" width="800px">
 
-      <div >
-   
-      
+      <div id="printSection">
+        <div v-for="(item, index) in codeList" :key="index" style=" display: flex;  align-items: center; justify-content: center; padding-top: 40px;">
+          <img :src="item.qrcode" alt="QR Code" style=" width: 120px; height: 120px; margin-right: 20px;">
+          <div  style="width: 500px; display: flex;  flex-direction: row;  flex-wrap: wrap; justify-content: space-between; align-items: center;">
+            <div style="width: 240px; text-align: left;">
+              <span style="display: inline-block;  width: 80px;">产品编码：</span>
+              <span style="color: #000;">{{ item.productCode }}</span>
+            </div>
+
+            <div style="width: 240px; text-align: left;">
+              <span style="display: inline-block;  width: 80px;">名称：</span>
+              <span style="color: #000;">{{ item.productName }}</span>
+            </div>
+
+            <div style="width: 240px; text-align: left;">
+              <span style="display: inline-block;  width: 80px;">牌号：</span>
+              <span style="color: #000;">{{ item.brandNo }}</span>
+            </div>
+
+            <div style="width: 240px; text-align: left;">
+              <span style="display: inline-block;  width: 80px;">型号：</span>
+              <span style="color: #000;">{{ item.model }}</span>
+            </div>
+
+
+            <div style="width: 240px; text-align: left;">
+              <span style="display: inline-block;  width: 80px;">生产数量：</span>
+              <span style="color: #000;">{{ item.formingNum }} {{ item.unit }}</span>
+            </div>
+
+
+
+            <div style="width: 240px; text-align: left;">
+              <span style="display: inline-block;  width: 80px;">生产重量：</span>
+              <span style="color: #000;">{{ item.formingWeight }} {{ item.weightUnit }}</span>
+            </div>
+
+            <div style="width: 240px; text-align: left;">
+              <span style="display: inline-block;  width: 80px;">状态：</span>
+              <span style="color: #000;">{{ statusList[item.status] }}</span>
+            </div>
+
+
+            <div style="width: 240px; text-align: left;">
+              <span style="display: inline-block;  width: 80px;">工艺路线：</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>
@@ -103,7 +153,7 @@ 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'
 
 export default {
   components: {
@@ -140,6 +190,18 @@ export default {
 
       QRvisible: false,
 
+      codeList: [],
+      statusList: {
+        4: '待生产',
+        5: '生产中',
+        6: '已完成',
+        7: '已延期',
+        8: '待下达'
+      }
+
+
+
+
     };
   },
   computed: {
@@ -498,19 +560,57 @@ export default {
 
     handleQRcode(row) {
 
-      this.QRvisible = true
+      let ids = [ row.id ]
+      queryPrint({ ids }).then(res => {
+        this.codeList = res;
+
+        this.QRvisible = true
+
+        this.$nextTick(() => {
+          this.generateQRCodes()
+        })
 
-      this.$nextTick(() => {
 
       })
     },
 
     allPrinting() {
-      console.log(this.selection)
+
       let ids = this.findAllIds(this.selection);
       console.log(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)
+          })
+      })
+    },
+
+
     findAllIds(nodes) {
       let ids = [];
       nodes.forEach(node => {
@@ -527,6 +627,7 @@ export default {
 
 
     print() {
+
       const printSection = document.getElementById('printSection');
       // 创建打印任务
       const printWindow = window.open('', '_blank');
@@ -548,11 +649,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/* 打印样式 */
 @media print {
-  .qr_box {
-    display: block !important;
+  #printSection{
+    font-size: 20px;
   }
 
 }
+
 </style>