feat：采购收货单多个打印

src/views/purchasingManage/purchaseOrder/invoice/components/print-template-ht.vue

@@ -5,15 +5,17 @@
     v-if="QRvisible"
     width="80%"
   >
-    <div
-      id="printSection"
-      style="
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-      "
-    >
+    <div style="margin-bottom: 20px;" v-for="(record, recordIndex) in formData" :key="recordIndex">
+      <div
+        :id="'printSection_' + recordIndex"
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          page-break-after: always;
+        "
+      >
       <div
         style="
           text-align: center;
@@ -35,13 +37,13 @@
         "
       >
         <span style="flex: 2; white-space: nowrap; padding-right: 10px"
-          >供应商：{{ formData.supplierName }}</span
+          >供应商：{{ record.supplierName }}</span
         >
         <span style="flex: 1; white-space: nowrap; padding: 0 10px"
-          >日期：{{ formData.receiveDate }}</span
+          >日期：{{ record.receiveDate }}</span
         >
         <span style="flex: 2; white-space: nowrap; padding-left: 10px"
-          >编号：{{ formData.receiveNo }}</span
+          >编号：{{ record.receiveNo }}</span
         >
       </div>
       <div
@@ -81,7 +83,7 @@
             <td style="padding: 5px"> 备注</td>
           </tr>
 
-          <tr align="center" v-for="(item, index) in formData?.productList">
+          <tr align="center" v-for="(item, index) in record?.productList">
             <td style="padding: 5px"> {{ index + 1 }} </td>
             <td style="padding: 5px"> {{ item.productCode }} </td>
             <td style="padding: 5px"> {{ item.productName }} </td>
@@ -100,16 +102,16 @@
             <td style="padding: 5px; text-align: left;" colspan="8">
               <div style="display: flex;">
                 <span style="flex: 1"
-                  >本页数量小计：{{ this.getAll('receiveTotalCount') }}</span
+                  >本页数量小计：{{ getAll(record, 'receiveTotalCount') }}</span
                 >
                 <span style="flex: 1"
-                  >本页金额小计：{{ showPrice ? this.getAll('totalPrice') : '' }}</span
+                  >本页金额小计：{{ showPrice ? getAll(record, 'totalPrice') : '' }}</span
                 >
                 <span style="flex: 1"
-                  >汇总数量：{{ this.getAll('receiveTotalCount') }}</span
+                  >汇总数量：{{ getAll(record, 'receiveTotalCount') }}</span
                 >
                 <span style="flex: 1"
-                  >汇总金额：{{ showPrice ? this.getAll('totalPrice') : '' }}</span
+                  >汇总金额：{{ showPrice ? getAll(record, 'totalPrice') : '' }}</span
                 >
               </div>
             </td>
@@ -119,7 +121,7 @@
             <td style="padding: 5px; text-align: left;" colspan="8">
               <div style="display: flex; margin-top: 6px;">
                 <span style="flex: 1"
-                  >{{ showPrice ? convertToChinese(this.getAll('totalPrice')) : '' }}</span
+                  >{{ showPrice ? convertToChinese(getAll(record, 'totalPrice')) : '' }}</span
                 >
               </div>
             </td>
@@ -127,11 +129,12 @@
         </tbody>
       </table>
       <div style="display: flex; justify-content: space-between; width: 100%; font-size: 13px;">
-        <span style="flex: 1">收货单审核人：{{formData.reviewerName}}</span>
-        <span style="flex: 1">采购发起人：{{formData.purchaseInitiatorName}}</span>
-        <span style="flex: 1">质检人：{{formData.qualityName}}</span>
-        <span style="flex: 1">仓管员：{{formData.warehouseKeeperName}}</span>
-        <!-- <span style="flex: 1">采购收货发起人：{{ formData.purchaseInitiatorName }}</span> -->
+        <span style="flex: 1">收货单审核人：{{record.reviewerName}}</span>
+        <span style="flex: 1">采购发起人：{{record.purchaseInitiatorName}}</span>
+        <span style="flex: 1">质检人：{{record.qualityName}}</span>
+        <span style="flex: 1">仓管员：{{record.warehouseKeeperName}}</span>
+        <!-- <span style="flex: 1">采购收货发起人：{{ record.purchaseInitiatorName }}</span> -->
+      </div>
       </div>
     </div>
     <div slot="footer">
@@ -160,7 +163,7 @@ export default {
     return {
       showPrice: true,
       QRvisible: false,
-      formData: {}
+      formData: []
     };
   },
 
@@ -209,9 +212,12 @@ export default {
 
     return result;
   },
-    async open(id, status) {
+    async open(ids, status) {
       this.showPrice = status;
-      this.formData = await getReceiveSaleOrderrecordDetail(id);
+      const idList = Array.isArray(ids) ? ids : [ids];
+      this.formData = await Promise.all(
+        idList.map(id => getReceiveSaleOrderrecordDetail(id))
+      );
       this.QRvisible = true;
     },
     close() {
@@ -223,17 +229,18 @@ export default {
       const total = singlePrice * quantity;
       return formatPrice(total);
     },
-    getAll(key) {
+    getAll(record, key) {
       let num = 0;
+      const list = record?.productList || [];
       if (key === 'totalPrice') {
         // 总价需要通过单价*数量计算，避免精度问题
-        this.formData.productList.forEach((item) => {
+        list.forEach((item) => {
           const singlePrice = parseFloat(item.singlePrice) || 0;
           const quantity = parseFloat(item.receiveTotalCount) || 0;
           num += singlePrice * quantity;
         });
       } else {
-        this.formData.productList.forEach((item) => {
+        list.forEach((item) => {
           if (item[key]) {
             num += Number(item[key]);
           }
@@ -242,8 +249,7 @@ export default {
       return num ? formatPrice(num) : '';
     },
     print() {
-      const printSection = document.getElementById('printSection');
-      // 创建打印任务
+      // 创建打印任务，合并所有入库单详情
       const printWindow = window.open('', '_blank');
       printWindow.document.open();
       printWindow.document.write('<html><head><title>打印预览</title>');
@@ -251,7 +257,12 @@ export default {
         '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
       );
       printWindow.document.write('</head><body>');
-      printWindow.document.write(printSection.innerHTML);
+      this.formData.forEach((_, index) => {
+        const section = document.getElementById('printSection_' + index);
+        if (section) {
+          printWindow.document.write(section.innerHTML);
+        }
+      });
       printWindow.document.write('</body></html>');
       printWindow.document.close();
       printWindow.onload = function () {
@@ -259,18 +270,6 @@ export default {
       };
     },
     exportExcel() {
-      const list = this.formData?.productList || [];
-      const totalCount = this.getAll('receiveTotalCount');
-      let totalPriceNum = 0;
-      if (this.showPrice) {
-        list.forEach((item) => {
-          const singlePrice = parseFloat(item.singlePrice) || 0;
-          const quantity = parseFloat(item.receiveTotalCount) || 0;
-          totalPriceNum += singlePrice * quantity;
-        });
-      }
-      const totalPrice = this.showPrice ? totalPriceNum.toFixed(4).replace(/\.?0+$/, '') : '';
-
       const border = 'border-top:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;';
       const cellBase = `${border}padding:4px;mso-number-format:"\\@";vertical-align:middle;text-align:center;mso-horizontal-align:center;`;
       const th = `${cellBase}font-weight:bold;font-family:'宋体';font-size:12pt;`;
@@ -279,28 +278,43 @@ export default {
 
       const colWidths = [50, 100, 120, 100, 60, 80, 90, 100, 80, 120];
       const colGroup = colWidths.map((w) => `<col width="${w}" style="width:${w}pt;" />`).join('');
+      const title = `${this.groupName || ''}入库单`;
+
+      // 遍历多个入库单，分别生成表格
+      let tables = '';
+      this.formData.forEach((record) => {
+        const list = record?.productList || [];
+        let totalPriceNum = 0;
+        if (this.showPrice) {
+          list.forEach((item) => {
+            const singlePrice = parseFloat(item.singlePrice) || 0;
+            const quantity = parseFloat(item.receiveTotalCount) || 0;
+            totalPriceNum += singlePrice * quantity;
+          });
+        }
+        const totalCount = this.getAll(record, 'receiveTotalCount');
+        const totalPrice = this.showPrice ? totalPriceNum.toFixed(4).replace(/\.?0+$/, '') : '';
 
-      const rows = list.map((item, index) => {
-        const singlePrice = parseFloat(item.singlePrice) || 0;
-        const quantity = parseFloat(item.receiveTotalCount) || 0;
-        const totalPrice = this.showPrice ? (singlePrice * quantity).toFixed(4).replace(/\.?0+$/, '') : '';
-        return `
-        <tr height="24" style="height:24pt;">
-          <td align="center" valign="middle" style="${td}">${index + 1}</td>
-          <td align="center" valign="middle" style="${td}">${item.productCode || ''}</td>
-          <td align="center" valign="middle" style="${td}">${item.productName || ''}</td>
-          <td align="center" valign="middle" style="${td}">${item.modelType || ''}</td>
-          <td align="center" valign="middle" style="${td}">${item.measuringUnit || ''}</td>
-          <td align="center" valign="middle" style="${td}">${item.receiveTotalCount ?? ''}</td>
-          <td align="center" valign="middle" style="${td}">${this.showPrice ? item.singlePrice : ''}</td>
-          <td align="center" valign="middle" style="${td}">${totalPrice}</td>
-          <td align="center" valign="middle" style="${td}">${item.batchNo || ''}</td>
-          <td align="center" valign="middle" style="${td}">${item.remark || ''}</td>
-        </tr>`;
-      }).join('');
+        const rows = list.map((item, index) => {
+          const singlePrice = parseFloat(item.singlePrice) || 0;
+          const quantity = parseFloat(item.receiveTotalCount) || 0;
+          const rowTotal = this.showPrice ? (singlePrice * quantity).toFixed(4).replace(/\.?0+$/, '') : '';
+          return `
+          <tr height="24" style="height:24pt;">
+            <td align="center" valign="middle" style="${td}">${index + 1}</td>
+            <td align="center" valign="middle" style="${td}">${item.productCode || ''}</td>
+            <td align="center" valign="middle" style="${td}">${item.productName || ''}</td>
+            <td align="center" valign="middle" style="${td}">${item.modelType || ''}</td>
+            <td align="center" valign="middle" style="${td}">${item.measuringUnit || ''}</td>
+            <td align="center" valign="middle" style="${td}">${item.receiveTotalCount ?? ''}</td>
+            <td align="center" valign="middle" style="${td}">${this.showPrice ? item.singlePrice : ''}</td>
+            <td align="center" valign="middle" style="${td}">${rowTotal}</td>
+            <td align="center" valign="middle" style="${td}">${item.batchNo || ''}</td>
+            <td align="center" valign="middle" style="${td}">${item.remark || ''}</td>
+          </tr>`;
+        }).join('');
 
-      const title = `${this.groupName || ''}入库单`;
-      const table = `
+        const table = `
         <table border="1" cellspacing="0" cellpadding="0" align="center"
           style="border-collapse:collapse;border:1px solid #000;mso-border-alt:solid #000 0.5pt;font-family:'宋体';font-size:11pt;text-align:center;">
           <colgroup>${colGroup}</colgroup>
@@ -308,9 +322,9 @@ export default {
             <td colspan="10" align="center" valign="middle" style="${border}padding:6px;text-align:center;font-family:'宋体';font-size:22pt;font-weight:bold;">${title}</td>
           </tr>
           <tr height="26" style="height:26pt;">
-            <td colspan="4" align="left" valign="middle" style="${labelLeft}">供应商：${this.formData.supplierName || ''}</td>
-            <td colspan="3" align="left" valign="middle" style="${labelLeft}">日期：${this.formData.receiveDate || ''}</td>
-            <td colspan="3" align="left" valign="middle" style="${labelLeft}">编号：${this.formData.receiveNo || ''}</td>
+            <td colspan="4" align="left" valign="middle" style="${labelLeft}">供应商：${record.supplierName || ''}</td>
+            <td colspan="3" align="left" valign="middle" style="${labelLeft}">日期：${record.receiveDate || ''}</td>
+            <td colspan="3" align="left" valign="middle" style="${labelLeft}">编号：${record.receiveNo || ''}</td>
           </tr>
           <tr height="26" style="height:26pt;">
             <td colspan="10" align="left" valign="middle" style="${labelLeft}">摘要：</td>
@@ -344,13 +358,17 @@ export default {
             </td>
           </tr>
           <tr height="28" style="height:28pt;">
-            <td colspan="2" align="left" valign="middle" style="${labelLeft}">收货单审核人：${this.formData.reviewerName || ''}</td>
-            <td colspan="2" align="left" valign="middle" style="${labelLeft}">采购发起人：${this.formData.purchaseInitiatorName || ''}</td>
-            <td colspan="2" align="left" valign="middle" style="${labelLeft}">质检人：${this.formData.qualityName || ''}</td>
-            <td colspan="4" align="left" valign="middle" style="${labelLeft}">仓管员：${this.formData.warehouseKeeperName || ''}</td>
+            <td colspan="2" align="left" valign="middle" style="${labelLeft}">收货单审核人：${record.reviewerName || ''}</td>
+            <td colspan="2" align="left" valign="middle" style="${labelLeft}">采购发起人：${record.purchaseInitiatorName || ''}</td>
+            <td colspan="2" align="left" valign="middle" style="${labelLeft}">质检人：${record.qualityName || ''}</td>
+            <td colspan="4" align="left" valign="middle" style="${labelLeft}">仓管员：${record.warehouseKeeperName || ''}</td>
           </tr>
         </table>`;
 
+        // 每个入库单之间分页
+        tables += table + '<br style="mso-special-character:line-break;page-break-before:always" />';
+      });
+
       const html = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
         <head>
         <meta charset="UTF-8" />
@@ -371,12 +389,14 @@ export default {
         </x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook>
         </xml><![endif]-->
         </head>
-        <body>${table}</body></html>`;
+        <body>${tables}</body></html>`;
 
       const blob = new Blob(['' + html], {
         type: 'application/vnd.ms-excel;charset=utf-8'
       });
-      saveAs(blob, `${title}_${this.formData.receiveNo || ''}.xls`);
+      const firstReceiveNo = this.formData[0]?.receiveNo || '';
+      const suffix = this.formData.length > 1 ? `等${this.formData.length}条` : firstReceiveNo;
+      saveAs(blob, `${title}_${suffix}.xls`);
     }
   }
 };

src/views/purchasingManage/purchaseOrder/invoice/index.vue

@@ -60,7 +60,7 @@
                 >
                 <el-dropdown-item
                   v-if="$hasPermission('eom:purchaseorderreceive:printHt')"
-                  @click.native="handlePrint('printTemplateHtRef')"
+                  @click.native="handlePrintHt('printTemplateHtRef')"
                   >采购入库单</el-dropdown-item
                 >
                 <!-- 特瑞 -->
@@ -504,7 +504,7 @@
           [2].includes(item.reviewStatus)
         );
         if (!flag)
-          return this.$message.warning('抱歉需要已审核的发货单才能打印,请检查');
+          return this.$message.warning('抱歉需要已审核的收货单才能打印,请检查');
         if(ref == 'printTemplateHtRef') {
           
           this.$confirm('是否需要打印金额？', '提示', {
@@ -521,6 +521,28 @@
         }
         this.$refs[ref].open(this.selection[0].id);
       },
+      handlePrintHt(ref) {
+        if (this.selection.length == 0)
+          return this.$message.warning('请选择数据');
+        let flag = this.selection.every((item) =>
+          [2].includes(item.reviewStatus)
+        );
+        if (!flag)
+          return this.$message.warning('抱歉需要已审核的收货单才能打印,请检查');
+        if(ref == 'printTemplateHtRef') {
+          
+          this.$confirm('是否需要打印金额？', '提示', {
+            confirmButtonText: '是',
+            cancelButtonText: '否',
+            type: 'warning'
+          }) .then((res) => {
+            this.$refs[ref].open(this.selection.map((v) => v.id), true);
+          })
+          .catch((err) => {
+            this.$refs[ref].open(this.selection.map((v) => v.id), false);
+          });
+        }
+      },
       //删除弹框确定
       commitBtn() {
         const dataId = this.selection.map((v) => v.id);