feat: 销售订单多条打印导出

src/views/saleManage/saleOrder/components/printTemplateHt.vue

@@ -5,154 +5,157 @@
     v-if="QRvisible"
     width="90%"
   >
-    <div
-      id="printSection"
-      style="
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-      "
-    >
-      <div style="width: 100%;">
-        <div
-          style="
-            font-size: 20px;
-            font-weight: 800;
-            padding-right: 20px;
-            width: 400px;
-            margin: 0 auto;
-          "
-          >
-            {{ groupName }}销售订单
-          </div>
-          <span style="font-size: 13px; float: right;">门店：{{ formData.salesDeptName }}</span>
-      </div>
-      <div
-        style="
-          width: 100%;
-          font-size: 13px;
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 10px;
-          margin-top: 20px;
-        "
-      >
-        <span style="width: 50%">客户：{{ formData.partaName }}</span>
-        <span style="width: 50%">单据日期：{{ formData.createTime ? formData.createTime.split(' ')[0] : '' }}</span>
-      </div>
+    <div id="printSection">
       <div
         style="
-          width: 100%;
-          font-size: 13px;
           display: flex;
-          justify-content: space-between;
-          margin-bottom: 10px;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
         "
+        v-for="wrapperItem in formData"
+        :key="wrapperItem.id"
       >
-        <span style="width: 50%">项目名称：{{ formData.projectName }}</span>
-        <span style="width: 50%">单据编号：{{ formData.orderNo }}</span>
-      </div>
-      <table
-        cellspacing="0"
-        border
-        style="
-          width: 100%;
-          table-layout: fixed;
-          word-break: break-all;
-          word-wrap: break-word;
-          font-size: 12px;
-        "
-      >
-        <tbody>
-          <tr align="center">
-            <td style="padding: 2px; width: 5%"> 序号 </td>
-            <!-- <td style="padding: 2px; width: 17%"> 名称 </td> -->
-            <td style="padding: 2px; width: 18%"> 规格型号 </td>
-            <td style="padding: 2px; width: 6%"> 单位</td>
-            <td style="padding: 2px; width: 8%"> 数量</td>
-            <td style="padding: 2px; width: 10%"> 单价</td>
-            <td style="padding: 2px; width: 8%"> 税率</td>
-            <td style="padding: 2px; width: 8%"> 金额</td>
-            <td style="padding: 2px; width: 8%"> 颜色 </td>
-            <td style="padding: 2px; width: 10%"> 备注</td>
-          </tr>
-
-          <tr align="center" v-for="(item, index) in formData.productList">
-            <td style="padding: 2px"> {{ index + 1 }} </td>
-            <!-- <td style="padding: 2px"> {{ item.productName }} </td> -->
-            <td style="padding: 2px">
-              <!-- {{ item.specification }}/ -->
-              {{ item.modelType }}
-            </td>
-            <td style="padding: 2px"> {{ item.saleUnit }}</td>
-            <td style="padding: 2px"> {{ item.saleCount }}</td>
-            <td style="padding: 2px"> {{ item.singlePrice }}</td>
-            <td style="padding: 2px"> {{ item.taxRate }}{{ item.taxRate ? '%' : '0%' }}</td>
-            <td style="padding: 2px"> {{ item.totalPrice }}</td>
-            <td style="padding: 2px"> {{ item.colorKey }}</td>
-            <!-- <td style="padding: 5px"> {{ item.modelKey }}</td> -->
-            <td style="padding: 2px"> {{ item.remark }}</td>
-          </tr>
-          <tr align="center">
-            <td style="padding: 2px"> 合计 </td>
-            <td style="padding: 2px" colspan="2">{{ numberToChinese(getTotalValue('totalPrice', 2)) }}</td>
-            <td style="padding: 2px">{{ getTotalValue('saleCount', 2) }} </td>
-            <td style="padding: 2px"> </td>
-            <td style="padding: 2px"> </td>
-            <td style="padding: 2px">{{ getTotalValue('totalPrice', 2) }}</td>
-            <td style="padding: 2px"> </td>
-            <td style="padding: 2px"> </td>
-            <!-- <td style="padding: 2px"> </td> -->
-            <!-- <td style="padding: 2px"> </td> -->
-          </tr>
-        </tbody>
-      </table>
-      <div
-        style="
-          width: 100%;
-          font-size: 13px;
-          display: flex;
-          justify-content: space-between;
-          margin-top: 10px;
-        "
-      >
-        <div style="flex: 1">
-          <div>业务员：{{ formData.salesmanName }}</div>
+        <div style="width: 100%;">
+          <div
+            style="
+              font-size: 20px;
+              font-weight: 800;
+              padding-right: 20px;
+              width: 400px;
+              margin: 0 auto;
+            "
+            >
+              {{ groupName }}销售订单
+            </div>
+            <span style="font-size: 13px; float: right;">门店：{{ wrapperItem.salesDeptName }}</span>
         </div>
-        <div style="flex: 1">
-          <div>制单人：{{ formData.createUserName }}</div>
+        <div
+          style="
+            width: 100%;
+            font-size: 13px;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            margin-top: 20px;
+          "
+        >
+          <span style="width: 50%">客户：{{ wrapperItem.partaName }}</span>
+          <span style="width: 50%">单据日期：{{ wrapperItem.createTime ? wrapperItem.createTime.split(' ')[0] : '' }}</span>
         </div>
-        <div style="flex: 1"> 核对人： {{ formData.reviewerName }}</div>
-        <div style="flex: 1"> 发货人： </div>
-      </div>
-      <div
-        style="
-          width: 100%;
-          font-size: 13px;
-          display: flex;
-          justify-content: space-between;
-          margin-top: 10px;
-        "
-      >
-        <div style="flex: 1">
-          <div>地址：{{ formData.partbAddress }}</div>
+        <div
+          style="
+            width: 100%;
+            font-size: 13px;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+          "
+        >
+          <span style="width: 50%">项目名称：{{ wrapperItem.projectName }}</span>
+          <span style="width: 50%">单据编号：{{ wrapperItem.orderNo }}</span>
         </div>
-        <div style="flex: 1">
-          <div>客户签字：</div>
+        <table
+          cellspacing="0"
+          border
+          style="
+            width: 100%;
+            table-layout: fixed;
+            word-break: break-all;
+            word-wrap: break-word;
+            font-size: 12px;
+          "
+        >
+          <tbody>
+            <tr align="center">
+              <td style="padding: 2px; width: 5%"> 序号 </td>
+              <!-- <td style="padding: 2px; width: 17%"> 名称 </td> -->
+              <td style="padding: 2px; width: 18%"> 规格型号 </td>
+              <td style="padding: 2px; width: 6%"> 单位</td>
+              <td style="padding: 2px; width: 8%"> 数量</td>
+              <td style="padding: 2px; width: 10%"> 单价</td>
+              <td style="padding: 2px; width: 8%"> 税率</td>
+              <td style="padding: 2px; width: 8%"> 金额</td>
+              <td style="padding: 2px; width: 8%"> 颜色 </td>
+              <td style="padding: 2px; width: 10%"> 备注</td>
+            </tr>
+
+            <tr align="center" v-for="(item, index) in wrapperItem.productList">
+              <td style="padding: 2px"> {{ index + 1 }} </td>
+              <!-- <td style="padding: 2px"> {{ item.productName }} </td> -->
+              <td style="padding: 2px">
+                <!-- {{ item.specification }}/ -->
+                {{ item.modelType }}
+              </td>
+              <td style="padding: 2px"> {{ item.saleUnit }}</td>
+              <td style="padding: 2px"> {{ item.saleCount }}</td>
+              <td style="padding: 2px"> {{ item.singlePrice }}</td>
+              <td style="padding: 2px"> {{ item.taxRate }}{{ item.taxRate ? '%' : '0%' }}</td>
+              <td style="padding: 2px"> {{ item.totalPrice }}</td>
+              <td style="padding: 2px"> {{ item.colorKey }}</td>
+              <!-- <td style="padding: 5px"> {{ item.modelKey }}</td> -->
+              <td style="padding: 2px"> {{ item.remark }}</td>
+            </tr>
+            <tr align="center">
+              <td style="padding: 2px"> 合计 </td>
+              <td style="padding: 2px" colspan="2">{{ numberToChinese(getTotalValue(item, 'totalPrice', 2)) }}</td>
+              <td style="padding: 2px">{{ getTotalValue(item, 'saleCount', 2) }} </td>
+              <td style="padding: 2px"> </td>
+              <td style="padding: 2px"> </td>
+              <td style="padding: 2px">{{ getTotalValue(item, 'totalPrice', 2) }}</td>
+              <td style="padding: 2px"> </td>
+              <td style="padding: 2px"> </td>
+              <!-- <td style="padding: 2px"> </td> -->
+              <!-- <td style="padding: 2px"> </td> -->
+            </tr>
+          </tbody>
+        </table>
+        <div
+          style="
+            width: 100%;
+            font-size: 13px;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+          "
+        >
+          <div style="flex: 1">
+            <div>业务员：{{ wrapperItem.salesmanName }}</div>
+          </div>
+          <div style="flex: 1">
+            <div>制单人：{{ wrapperItem.createUserName }}</div>
+          </div>
+          <div style="flex: 1"> 核对人： {{ wrapperItem.reviewerName }}</div>
+          <div style="flex: 1"> 发货人： </div>
         </div>
-      </div>
-      <div
-        style="
-          width: 100%;
-          font-size: 13px;
-          display: flex;
-          justify-content: space-between;
-          margin-top: 10px;
-        "
-      >
-        <div style="flex: 1">
-          <div>备注：{{ formData.remark }}</div>
+        <div
+          style="
+            width: 100%;
+            font-size: 13px;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+          "
+        >
+          <div style="flex: 1">
+            <div>地址：{{ wrapperItem.partbAddress }}</div>
+          </div>
+          <div style="flex: 1">
+            <div>客户签字：</div>
+          </div>
+        </div>
+        <div
+          style="
+            width: 100%;
+            font-size: 13px;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+          "
+        >
+          <div style="flex: 1">
+            <div>备注：{{ wrapperItem.remark }}</div>
+          </div>
         </div>
       </div>
     </div>
@@ -166,7 +169,7 @@
 </template>
 
 <script>
-  import { getSaleOrderDetail } from '@/api/saleManage/saleorder';
+  import { getSaleOrderDetails } from '@/api/saleManage/saleorder';
   import { mapGetters } from 'vuex';
   import { saveAs } from 'file-saver';
   export default {
@@ -196,7 +199,7 @@
 
     methods: {
       async open(id) {
-        this.formData = await getSaleOrderDetail(id);
+        this.formData = await getSaleOrderDetails(id);
         console.log('formData~~~', this.formData);
         this.QRvisible = true;
 
@@ -205,8 +208,8 @@
       close() {
         this.QRvisible = false;
       },
-      getTotalValue(key, num) {
-        let val = this.formData?.productList?.reduce((total, item) => {
+      getTotalValue(itemI,key, num) {
+        let val = itemI?.productList?.reduce((total, item) => {
           return (total += Number(item[key]));
         }, 0);
 
@@ -276,17 +279,11 @@
         return negative + intStr + decStr;
       },
       exportExcel() {
-        const list = this.formData.productList || [];
-        const totalCount = this.getTotalValue('saleCount', 2);
-        const totalPrice = this.getTotalValue('totalPrice', 2);
-        const totalChinese = this.numberToChinese(totalPrice);
-
         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;`;
         const td = `${cellBase}font-family:'宋体';font-size:11pt;`;
-        const label = td;
         const labelLeft = `${border}padding:4px;mso-number-format:"\\@";vertical-align:middle;text-align:left;mso-horizontal-align:left;font-family:'宋体';font-size:11pt;`;
 
         const colWidths = [55, 170, 55, 70, 75, 65, 90, 70, 110];
@@ -294,9 +291,19 @@
           .map((w) => `<col width="${w}" style="width:${w}pt;" />`)
           .join('');
 
-        const rows = list
-          .map(
-            (item, index) => `
+        const title = `${this.groupName || ''}销售订单`;
+
+        // 遍历多个单据生成多个表格
+        let tables = '';
+        this.formData.forEach((wrapperItem, wi) => {
+          const list = wrapperItem.productList || [];
+          const totalCount = this.getTotalValue(wrapperItem, 'saleCount', 2);
+          const totalPrice = this.getTotalValue(wrapperItem, 'totalPrice', 2);
+          const totalChinese = this.numberToChinese(totalPrice);
+
+          const rows = list
+            .map(
+              (item, index) => `
               <tr height="24" style="height:24pt;">
                 <td align="center" valign="middle" style="${td}">${index + 1}</td>
                 <td align="center" valign="middle" style="${td}">${item.modelType || ''}</td>
@@ -310,11 +317,10 @@
                 <td align="center" valign="middle" style="${td}">${item.colorKey || ''}</td>
                 <td align="center" valign="middle" style="${td}">${item.remark || ''}</td>
               </tr>`
-          )
-          .join('');
+            )
+            .join('');
 
-        const title = `${this.groupName || ''}销售订单`;
-        const table = `
+          tables += `
           <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>
@@ -323,25 +329,15 @@
             </tr>
             <tr height="26" style="height:26pt;">
               <td colspan="6" align="left" valign="middle" style="${labelLeft}"></td>
-              <td colspan="3" align="left" valign="middle" style="${labelLeft}">门店：${
-                this.formData.salesDeptName || ''
-              }</td>
+              <td colspan="3" align="left" valign="middle" style="${labelLeft}">门店：${wrapperItem.salesDeptName || ''}</td>
             </tr>
             <tr height="26" style="height:26pt;">
-              <td colspan="6" align="left" valign="middle" style="${labelLeft}">客户：${
-                this.formData.partaName || ''
-              }</td>
-              <td colspan="3" align="left" valign="middle" style="${labelLeft}">单据日期：${
-                this.formData.createTime ? this.formData.createTime.split(' ')[0] : ''
-              }</td>
+              <td colspan="6" align="left" valign="middle" style="${labelLeft}">客户：${wrapperItem.partaName || ''}</td>
+              <td colspan="3" align="left" valign="middle" style="${labelLeft}">单据日期：${wrapperItem.createTime ? wrapperItem.createTime.split(' ')[0] : ''}</td>
             </tr>
             <tr height="26" style="height:26pt;">
-              <td colspan="6" align="left" valign="middle" style="${labelLeft}">项目名称：${
-                this.formData.projectName || ''
-              }</td>
-              <td colspan="3" align="left" valign="middle" style="${labelLeft}">单据编号：${
-                this.formData.orderNo || ''
-              }</td>
+              <td colspan="6" align="left" valign="middle" style="${labelLeft}">项目名称：${wrapperItem.projectName || ''}</td>
+              <td colspan="3" align="left" valign="middle" style="${labelLeft}">单据编号：${wrapperItem.orderNo || ''}</td>
             </tr>
             
             <tr height="28" style="height:28pt;">
@@ -362,36 +358,26 @@
               <td align="center" valign="middle" style="${td};font-weight:bold;">${totalCount}</td>
               <td align="center" valign="middle" style="${td}"></td>
               <td align="center" valign="middle" style="${td}"></td>
-              <td align="center" valign="middle" style="${td};font-weight:bold;">
-                ${totalPrice}
-              </td>
+              <td align="center" valign="middle" style="${td};font-weight:bold;">${totalPrice}</td>
               <td align="center" valign="middle" style="${td}"></td>
               <td align="center" valign="middle" style="${td}"></td>
             </tr>
             <tr height="28" style="height:28pt;">
-              <td colspan="3" align="left" valign="middle" style="${labelLeft}">业务员：${
-                this.formData.salesmanName || ''
-              }</td>
-              <td colspan="2" align="left" valign="middle" style="${labelLeft}">制单人：${
-                this.formData.createUserName || ''
-              }</td>
-              <td colspan="2" align="left" valign="middle" style="${labelLeft}">核对人：${
-                this.formData.reviewerName || ''
-              }</td>
+              <td colspan="3" align="left" valign="middle" style="${labelLeft}">业务员：${wrapperItem.salesmanName || ''}</td>
+              <td colspan="2" align="left" valign="middle" style="${labelLeft}">制单人：${wrapperItem.createUserName || ''}</td>
+              <td colspan="2" align="left" valign="middle" style="${labelLeft}">核对人：${wrapperItem.reviewerName || ''}</td>
               <td colspan="2" align="left" valign="middle" style="${labelLeft}">发货人：</td>
             </tr>
             <tr height="28" style="height:28pt;">
-              <td colspan="5" align="left" valign="middle" style="${labelLeft}">地址：${
-                this.formData.partbAddress || ''
-              }</td>  
+              <td colspan="5" align="left" valign="middle" style="${labelLeft}">地址：${wrapperItem.partbAddress || ''}</td>  
               <td colspan="4" align="left" valign="middle" style="${labelLeft}">客户签字：</td>
             </tr>
             <tr height="28" style="height:28pt;">
-              <td colspan="9" align="left" valign="middle" style="${labelLeft}">备注：${
-          this.formData.remark || ''
-        }</td>
+              <td colspan="9" align="left" valign="middle" style="${labelLeft}">备注：${wrapperItem.remark || ''}</td>
             </tr>
-          </table>`;
+          </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>
@@ -413,12 +399,14 @@
         </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.orderNo || ''}.xls`);
+        const firstOrderNo = this.formData[0]?.orderNo || '';
+        const suffix = this.formData.length > 1 ? `等${this.formData.length}条` : firstOrderNo;
+        saveAs(blob, `${title}_${suffix}.xls`);
       }
     }
   };

src/views/saleManage/saleOrder/index.vue

@@ -1261,8 +1261,8 @@ export default {
     },
     handlePrint() {
       console.log(this.selection[0]);
-      if (this.selection.length > 1) return this.$message.warning('请选择一条');
-      this.$refs.printTemplateHtRef.open(this.selection[0].id);
+      // if (this.selection.length > 1) return this.$message.warning('请选择一条');
+      this.$refs.printTemplateHtRef.open(this.selection.map((v) => v.id));
     }
   }
 };