优化

package.json

@@ -31,6 +31,7 @@
     "json-bigint": "^1.0.0",
     "jspdf": "^2.5.1",
     "nprogress": "^0.2.0",
+    "qrcodejs2": "^0.0.2",
     "tinymce": "^5.10.5",
     "vue": "^2.7.10",
     "vue-clipboard2": "^0.3.3",

src/views/produceOrder/index.vue

@@ -9,9 +9,9 @@
         <el-tab-pane label="已完成工单" name="second"></el-tab-pane>
       </el-tabs>
       <!-- 数据表格 -->
-      <ele-pro-table ref="table" :key="activeName" :initLoad="false" :columns="columns" :datasource="datasource"  row-key="code"
-        :cache-key="`${activeName}produceOrderTable`" :selection.sync="selection" :parse-data="parseData">
-     
+      <ele-pro-table ref="table" :key="activeName" :initLoad="false" :columns="columns" :datasource="datasource"
+        row-key="code" :cache-key="`${activeName}produceOrderTable`" :selection.sync="selection" :parse-data="parseData">
+
         <template v-slot:toolbar>
           <el-button type="success">新建</el-button>
           <el-button type="success">暂停</el-button>
@@ -24,7 +24,7 @@
           <!-- <el-button type="success" @click="handleCreate">创建工单</el-button> -->
           <!-- <el-button type="success">工单操作控制</el-button> -->
         </template>
-        
+
 
 
 
@@ -34,6 +34,12 @@
           </el-link>
         </template>
 
+        <template v-slot:QRcode="{ row }">
+          <el-link type="primary" :underline="false" @click="handleQRcode(row)">生成二维码 </el-link>
+        </template>
+
+
+
         <template v-slot:status="{ row }">
           <span :class="{ 'ele-text-danger': row.status == 3 }">
             {{ statusFormatter(row.status) }}
@@ -46,10 +52,12 @@
               取消完结
             </el-link></template>
           <template v-if="activeName != 'second'">
-            <el-link v-if="row.isSplit == 0" type="primary" :underline="false" icon="el-icon-truck" @click="handleOrderPublish(1, row)">
+            <el-link v-if="row.isSplit == 0" type="primary" :underline="false" icon="el-icon-truck"
+              @click="handleOrderPublish(1, row)">
               报工
             </el-link>
-            <el-link v-if="row.status == 4 && row.isSplit == 0 && !row.originalCode " type="primary" :underline="false" icon="el-icon-truck" @click="toUnpack(row)">
+            <el-link v-if="row.status == 4 && row.isSplit == 0 && !row.originalCode" type="primary" :underline="false"
+              icon="el-icon-truck" @click="toUnpack(row)">
               拆分
             </el-link>
             <el-link v-if="row.isSplit == 0" type="primary" :underline="false" icon="el-icon-edit" @click="toEnd(row)">
@@ -59,6 +67,22 @@
         </template>
       </ele-pro-table>
     </el-card>
+
+
+    <ele-modal title="二维码" :visible.sync="QRvisible" width="450px">
+
+      <div style="width: 400px ;text-align: center;  display: flex;  flex-direction: column;  align-items: center;" id="printSection">
+        <div id="qrCode" ref="qrCode"></div>
+        <div style="width: 400px; font-size: 12px;     margin-top: 16px; text-align: left;">{{ qrCode }}</div>
+      </div>
+
+      <div slot="footer">
+        <el-button @click="print">打印预览</el-button>
+        <el-button @click="QRvisible = false">关闭</el-button>
+      </div>
+    </ele-modal>
+
+
     <createDialog ref="createRef" @success="createSuccess" />
     <unpackDialog ref="unpackRef" @success="createSuccess" />
     <pickingDialog ref="PickingRef" />
@@ -75,7 +99,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 { positiveIntegerReg } from 'ele-admin';
+import QRCode from 'qrcodejs2'
 export default {
   components: {
     produceOrderSearch,
@@ -107,7 +131,10 @@ export default {
         { label: '外销计划', value: '2' },
         { label: '预制计划', value: '3' }
       ],
-      selection: []
+      selection: [],
+
+      QRvisible: false,
+      qrCode: null,
     };
   },
   computed: {
@@ -145,7 +172,7 @@ export default {
           align: 'center',
           fixed: 'left'
         },
- 
+
         {
           slot: 'code',
           label: '生产工单号',
@@ -158,6 +185,14 @@ export default {
         //   align: 'center',
         //   minWidth: 110
         // },
+
+        {
+          slot: 'QRcode',
+          label: '二维码',
+          align: 'center',
+          minWidth: 110
+        },
+
         {
           prop: 'productionPlanCode',
           label: '计划编号',
@@ -310,7 +345,7 @@ export default {
     flattenArray(arr) {
       var result = []; // 存放结果的数组
       for (let i = 0; i < arr.length; i++) {
-            if (Array.isArray(arr[i].subWorkOrder)) {
+        if (Array.isArray(arr[i].subWorkOrder)) {
           let _arr = []
           _arr = _arr.concat(arr[i].subWorkOrder)
           delete arr[i].subWorkOrder
@@ -320,7 +355,7 @@ export default {
           result.push(arr[i])
         }
       }
- 
+
 
       return result;
     },
@@ -443,9 +478,63 @@ export default {
         this.$message.success('删除成功！');
         this.reload();
       });
+    },
+
+    handleQRcode(row) {
+
+      this.QRvisible = true
+
+      this.$nextTick(() => {
+        this.creatQrCode("qrCode", row.code);
+      })
+    },
+
+    // 生成二维码
+    creatQrCode(refName, text) {
+      if (document.getElementById(refName)) {
+        document.getElementById(refName).innerHTML = ''; //防止重复生成二维码
+        this.qrCode = null
+        this.$nextTick(function () {
+          this.qrCode = text
+          new QRCode(document.getElementById(refName), {
+            text: text, // 二维码内容
+            width: 120,
+            height: 120,
+            colorDark: '#333333', // 二维码颜色
+            colorLight: '#ffffff', // 二维码背景色
+            correctLevel: QRCode.CorrectLevel.L,
+          })
+        })
+      }
+    },
+
+    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></style>
+<style lang="scss" scoped>
+/* 打印样式 */
+@media print {
+  .qr_box {
+    display: block !important;
+  }
+
+}
+</style>