工单列表二维码新增型号字段

src/views/produceOrder/components/printSr.vue

@@ -1,164 +1,184 @@
 <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="width: 100%; height: 100%; display: flex;   align-items: center; justify-content: center;  ">
-                <div style="width: 160px; height: 160px; margin-right: 10px; padding-left: 0px;">
-                    <img :src="item.qrcode" alt="QR Code" style=" width: 160px; height: 160px;">
-                </div>
-                <div
-                    style="width: 640px; 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>
+  <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="
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        "
+      >
+        <div
+          style="
+            width: 160px;
+            height: 160px;
+            margin-right: 10px;
+            padding-left: 0px;
+          "
+        >
+          <img
+            :src="item.qrcode"
+            alt="QR Code"
+            style="width: 160px; height: 160px"
+          />
         </div>
-
-
-        <div slot="footer">
-            <el-button @click="print">打印预览</el-button>
-            <el-button @click="close">关闭</el-button>
+        <div
+          style="
+            width: 640px;
+            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.specification }}</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>
-    </ele-modal>
+      </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',
+  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: '待下达'
-            }
+      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)
-                    })
+      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();
             })
-        },
-
-        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();
-            };
-        }
-
+            .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 {
-
+  @media print {
     #printSection {
-        font-size: 34px;
-
-        span {
-            font-size: 34px;
-        }
+      font-size: 34px;
 
+      span {
+        font-size: 34px;
+      }
     }
-
-}
+  }
 </style>

src/views/produceOrder/components/printTg.vue

@@ -1,164 +1,178 @@
 <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;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>
+  <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;
+          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 slot="footer">
-            <el-button @click="print">打印预览</el-button>
-            <el-button @click="close">关闭</el-button>
+        <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.specification }}</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>
-    </ele-modal>
+      </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',
+  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: '待下达'
-            }
+      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)
-                    })
+      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();
             })
-        },
-
-        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();
-            };
-        }
-
+            .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 {
-
+  @media print {
     #printSection {
-        font-size: 34px;
-
-        span {
-            font-size: 34px;
-        }
+      font-size: 34px;
 
+      span {
+        font-size: 34px;
+      }
     }
-
-}
+  }
 </style>