feat: 工艺卡打印修改成批量打印

src/views/produceOrder/index.vue

@@ -48,7 +48,7 @@
             >批量打印二维码</el-button
           >
 
-          <el-button :disabled="selection.length > 1" type="success" @click="cardPrinting()"
+          <el-button type="success" @click="cardPrinting()"
             >工艺卡打印</el-button
           >
         </template>
@@ -1086,7 +1086,7 @@
       },
       // 工艺卡打印
       cardPrinting() {
-        if (this.selection.length !== 1) {
+        if (this.selection.length < 1) {
           return this.$message.warning('请选择一条工单！');
         }
         let ids = this.findAllIds(this.selection);

src/views/produceOrder/print.vue

@@ -6,79 +6,81 @@
     width="70%"
   >
     <div id="printSection" style="font-family: 'Microsoft Yahei', Arial, sans-serif; font-size: 12px; background: #fff; padding: 10px; margin: 40px;">
-      <div style="text-align: center; font-size: 16px; font-weight: bold; margin: 5px 0;">工艺流程卡</div>
-      <table style="width: 100%; border-collapse: collapse; margin-bottom: 6px;">
-        <tr>
-          <td rowspan="4" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle; text-align: center; width: 90px; height: 120px;">
-            <img :src="card.qrLeft" alt="二维码" style="width: 80px; height: 80px;" />
-          </td>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">单号</td>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.code }}</td>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">单据日期</td>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.createDate }}</td>
-          <td rowspan="4" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle; text-align: center; width: 90px; height: 120px;">
-            <img :src="card.qrRight" alt="二维码" style="width: 80px; height: 80px;" />
-          </td>
-        </tr>
-        <tr>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">编号</td>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.productCode }}</td>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">存货名称</td>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.productName }}</td>
-        </tr>
-        <tr>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">图号</td>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.imgCode }}</td>
-           <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">计划开始时间</td>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.planStartTime }}</td>
-        </tr>
-        <tr>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">计划结束时间</td>
-          <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.planCompleteTime }}</td>
-          <td colspan="2" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;"></td>
-        </tr>
-      </table>
-
-      <table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;">
-        <thead>
+      <div style="margin-bottom: 40px;" v-for="card in printList">
+        <div style="text-align: center; font-size: 16px; font-weight: bold; margin: 5px 0;">工艺流程卡</div>
+        <table style="width: 100%; border-collapse: collapse; margin-bottom: 6px;">
           <tr>
-            <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">工序</th>
-            <th colspan="4" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">数量</th>
-            <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">品质验收</th>
-            <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">交接签字</th>
-            <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">备注</th>
+            <td rowspan="4" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle; text-align: center; width: 100px; height: 120px;">
+              <img :src="card.qrLeft" alt="二维码" style="width: 90px; height: 90px;" />
+            </td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">单号</td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.code }}</td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">单据日期</td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.createDate }}</td>
+            <td rowspan="4" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle; text-align: center; width: 100px; height: 120px;">
+              <img :src="card.qrRight" alt="二维码" style="width: 90px; height: 90px;" />
+            </td>
           </tr>
           <tr>
-            <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">加工</th>
-            <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">发料</th>
-            <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">合格</th>
-            <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">报废</th>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">编号</td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.productCode }}</td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">存货名称</td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.productName }}</td>
           </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, idx) in card.printTaskCarDetail" :key="idx">
-            <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.taskName }}</td>
-            <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.formingNum }}</td>
-            <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.formedNum }}</td>
-            <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.qualified }}</td>
-            <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.noQualifiedSum }}</td>
-            <td style="border: 1px solid #000; padding: 3px; text-align: center;"></td>
-            <td style="border: 1px solid #000; padding: 3px; text-align: center;"></td>
-            <td style="border: 1px solid #000; padding: 3px; text-align: center;"></td>
+          <tr>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">图号</td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.imgCode }}</td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">计划开始时间</td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.planStartTime }}</td>
           </tr>
-        </tbody>
-      </table>
+          <tr>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">计划结束时间</td>
+            <td style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;">{{ card.planCompleteTime }}</td>
+            <td colspan="2" style="border: 1px solid #000; padding: 3px 5px; vertical-align: middle;"></td>
+          </tr>
+        </table>
 
-      <el-row :gutter="16">
-        <el-col :span="12"><div>制单人：{{ card.createUserName }}</div></el-col>
-        <el-col :span="12"><div>审核人：</div></el-col>
-      </el-row>
+        <table style="width: 100%; border-collapse: collapse; margin-bottom: 8px;">
+          <thead>
+            <tr>
+              <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">工序</th>
+              <th colspan="4" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">数量</th>
+              <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">品质验收</th>
+              <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">交接签字</th>
+              <th rowspan="2" style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">备注</th>
+            </tr>
+            <tr>
+              <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">加工</th>
+              <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">发料</th>
+              <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">合格</th>
+              <th style="border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold;">报废</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, idx) in card.printTaskCarDetail" :key="idx">
+              <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.taskName }}</td>
+              <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.formingNum }}</td>
+              <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.formedNum }}</td>
+              <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.qualified }}</td>
+              <td style="border: 1px solid #000; padding: 3px; text-align: center;">{{ row.noQualifiedSum }}</td>
+              <td style="border: 1px solid #000; padding: 3px; text-align: center;"></td>
+              <td style="border: 1px solid #000; padding: 3px; text-align: center;"></td>
+              <td style="border: 1px solid #000; padding: 3px; text-align: center;"></td>
+            </tr>
+          </tbody>
+        </table>
 
+        <div style="display: flex; justify-content: flex-start; align-items: center;">
+          <div style="width: 50%">制单人：{{ card.createUserName }}</div>
+          <div style="width: 50%">审核人：{{ card.auditor }}</div>
+        </div>
+      </div>
       <!-- 打印按钮 -->
       <!-- <div style="margin-top: 10px; display: block;">
         <button @click="doPrint">打印</button>
       </div> -->
     </div>
+
     <div slot="footer">
       <el-button @click="print">打印预览</el-button>
       <el-button @click="close">关闭</el-button>
@@ -110,6 +112,7 @@ import QRCode from 'qrcode';
           page: 6,
           totalPages: 14,
         },
+        printList: [],
         printId: '',
         QRvisible: false
       };
@@ -121,7 +124,7 @@ import QRCode from 'qrcode';
     methods: {
       open(ids) {
         console.log('ids~~~', ids);
-        this.printId = ids[0]
+        this.printId = ids;
         this.getData()
         this.QRvisible = true;
       },
@@ -129,19 +132,32 @@ import QRCode from 'qrcode';
         this.QRvisible = false;
       },
       getData() {
-        queryPrintV2({id: this.printId}).then(res => {
+        queryPrintV2({ids: this.printId}).then(res => {
           console.log('queryPrintV2', res)
           if(res.length) {
-            this.card = res[0]
-            QRCode.toDataURL(this.printId)
-            .then((url) => {
-              this.card.qrLeft = url;
-              this.card.qrRight = url;
-              this.$forceUpdate();
+            this.printList = res;
+            this.printList.map((item, index) => {
+              QRCode.toDataURL(this.printId[index])
+              .then((url) => {
+                item.qrLeft = url;
+                item.qrRight = url;
+                this.$forceUpdate();
+              })
+              .catch((err) => {
+                console.error(err);
+              });
+              return item;
             })
-            .catch((err) => {
-              console.error(err);
-            });
+            // this.card = res[0]
+            // QRCode.toDataURL(this.printId)
+            // .then((url) => {
+            //   this.card.qrLeft = url;
+            //   this.card.qrRight = url;
+            //   this.$forceUpdate();
+            // })
+            // .catch((err) => {
+            //   console.error(err);
+            // });
           }
         }).catch(err => {
           console.log('err', err)