feat(sale-invoice-print): 货物销售单增加导出功能

src/views/saleManage/saleOrder/invoice/components/print-template-ht.vue

@@ -96,13 +96,13 @@
           </tr>
           <tr align="center">
             <td style="padding: 2px"> 合计 </td>
-            <td style="padding: 2px" colspan="2">  </td>
+            <td style="padding: 2px" colspan="2"> {{ isPrintPrice ? convertToChinese(getTotalValue('totalPrice', 2)) : '' }} </td>
             <td style="padding: 2px">{{ getTotalValue('totalCount', 2) }} </td>
             <td style="padding: 2px" v-if="isPrintPrice"> </td>
             <td style="padding: 2px" v-if="isPrintPrice"> </td>
             <td style="padding: 2px" v-if="isPrintPrice"> {{ getTotalValue('totalPrice', 2) }} </td>
-            <td style="padding: 2px" colspan="2"> {{ isPrintPrice ? convertToChinese(getTotalValue('totalPrice', 2)) : '' }} </td>
-            <!-- <td style="padding: 2px"> </td> -->
+            <td style="padding: 2px"> </td>
+            <td style="padding: 2px"> </td>
           </tr>
         </tbody>
       </table>
@@ -144,6 +144,7 @@
     </div>
 
     <div slot="footer">
+      <el-button type="primary" @click="isPrintPrice ? exportExcel() : exportExcelWithoutPrice()">导出</el-button>
       <el-button @click="print">打印预览</el-button>
       <el-button @click="close">关闭</el-button>
     </div>
@@ -211,6 +212,251 @@
         printWindow.onload = function () {
           printWindow.print();
         };
+      },
+      exportExcel() {
+        const list = this.formData.productList || [];
+        const totalCount = this.getTotalValue('saleCount', 2);
+        const totalPrice = this.getTotalValue('totalPrice', 2);
+        const totalChinese = convertToChinese(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];
+        const colGroup = colWidths
+          .map((w) => `<col width="${w}" style="width:${w}pt;" />`)
+          .join('');
+
+        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>
+                <td align="center" valign="middle" style="${td}">${item.saleUnit || ''}</td>
+                <td align="center" valign="middle" style="${td}">${item.saleCount ?? ''}</td>
+                <td align="center" valign="middle" style="${td}">${item.singlePrice ?? ''}</td>
+                <td align="center" valign="middle" style="${td}">${
+              item.taxRate ? item.taxRate + '%' : '0%'
+            }</td>
+                <td align="center" valign="middle" style="${td}">${item.totalPrice ?? ''}</td>
+                <td align="center" valign="middle" style="${td}">${item.colorKey || ''}</td>
+                <td align="center" valign="middle" style="${td}">${item.remark || ''}</td>
+              </tr>`
+          )
+          .join('');
+
+        const title = `${this.groupName || ''}${ this.isPrintPrice ? '货物销售单' : '货物签收单' }`;
+        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>
+            <tr height="40" style="height:40pt;">
+              <td colspan="9" 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="6" align="left" valign="middle" style="${labelLeft}">客户：${
+                this.formData.contactName || ''
+              }</td>
+              <td colspan="3" align="left" valign="middle" style="${labelLeft}">单据编码：${
+                this.formData.docNo || ''
+              }</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.createTime ? this.formData.createTime.split(' ')[0] : ''
+              }</td>
+            </tr>
+            
+            <tr height="28" style="height:28pt;">
+              <td align="center" valign="middle" style="${th}">序号</td>
+              <td align="center" valign="middle" style="${th}">规格型号</td>
+              <td align="center" valign="middle" style="${th}">单位</td>
+              <td align="center" valign="middle" style="${th}">数量</td>
+              <td align="center" valign="middle" style="${th}">单价</td>
+              <td align="center" valign="middle" style="${th}">税率</td>
+              <td align="center" valign="middle" style="${th}">金额</td>
+              <td align="center" valign="middle" style="${th}">颜色</td>
+              <td align="center" valign="middle" style="${th}">备注</td>
+            </tr>
+            ${rows}
+            <tr height="26" style="height:26pt;">
+              <td align="center" valign="middle" style="${td};font-weight:bold;">合计</td>
+              <td colspan="2" align="center" valign="middle" style="${td};font-weight:bold;">${totalChinese}</td>
+              <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}"></td>
+              <td align="center" valign="middle" style="${td}"></td>
+            </tr>
+            <tr height="28" style="height:28pt;">
+              <td colspan="2" align="left" valign="middle" style="${labelLeft}">业务员：${
+                this.formData.salesmanName || ''
+              }</td>
+              <td colspan="2" align="left" valign="middle" style="${labelLeft}">制单人：${
+                this.formData.makerName || ''
+              }</td>
+              <td colspan="3" align="left" valign="middle" style="${labelLeft}">核对人：</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}">地址：湖南湘江新区宁乡夏铎铺机械工业园</td>
+              <td colspan="4" align="left" valign="middle" style="${labelLeft}">客户签字：</td>
+            </tr>
+          </table>`;
+
+        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" />
+        <style>
+          br { mso-data-placement: same-cell; }
+          table { mso-displayed-decimal-separator:"."; mso-displayed-thousand-separator:","; }
+          td { mso-ignore:padding; }
+        </style>
+        <!--[if gte mso 9]><xml>
+        <x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
+        <x:Name>${title}</x:Name>
+        <x:WorksheetOptions>
+          <x:DefaultRowHeight>260</x:DefaultRowHeight>
+          <x:Print><x:ValidPrinterInfo/><x:HorizontalResolution>600</x:HorizontalResolution><x:VerticalResolution>600</x:VerticalResolution></x:Print>
+          <x:Selected/>
+          <x:DoNotDisplayGridlines/>
+        </x:WorksheetOptions>
+        </x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook>
+        </xml><![endif]-->
+        </head>
+        <body>${table}</body></html>`;
+
+        const blob = new Blob(['' + html], {
+          type: 'application/vnd.ms-excel;charset=utf-8'
+        });
+        saveAs(blob, `${title}_${this.formData.orderNo || ''}.xls`);
+      },
+      // 不打印价格的导出Excel方法
+      exportExcelWithoutPrice() {
+        const list = this.formData.productList || [];
+        const totalCount = this.getTotalValue('saleCount', 2);
+
+        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 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, 70, 110];
+        const colGroup = colWidths
+          .map((w) => `<col width="${w}" style="width:${w}pt;" />`)
+          .join('');
+
+        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>
+                <td align="center" valign="middle" style="${td}">${item.saleUnit || ''}</td>
+                <td align="center" valign="middle" style="${td}">${item.saleCount ?? ''}</td>
+                <td align="center" valign="middle" style="${td}">${item.colorKey || ''}</td>
+                <td align="center" valign="middle" style="${td}">${item.remark || ''}</td>
+              </tr>`
+          )
+          .join('');
+
+        const title = `${this.groupName || ''}货物签收单`;
+        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>
+            <tr height="40" style="height:40pt;">
+              <td colspan="6" 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.contactName || ''
+              }</td>
+              <td colspan="2" align="left" valign="middle" style="${labelLeft}">单据编码：${
+                this.formData.docNo || ''
+              }</td>
+            </tr>
+            <tr height="26" style="height:26pt;">
+              <td colspan="4" align="left" valign="middle" style="${labelLeft}">项目：${
+                this.formData.projectName || ''
+              }</td>
+              <td colspan="2" align="left" valign="middle" style="${labelLeft}">单据日期：${
+                this.formData.createTime ? this.formData.createTime.split(' ')[0] : ''
+              }</td>
+            </tr>
+            
+            <tr height="28" style="height:28pt;">
+              <td align="center" valign="middle" style="${th}">序号</td>
+              <td align="center" valign="middle" style="${th}">规格型号</td>
+              <td align="center" valign="middle" style="${th}">单位</td>
+              <td align="center" valign="middle" style="${th}">数量</td>
+              <td align="center" valign="middle" style="${th}">颜色</td>
+              <td align="center" valign="middle" style="${th}">备注</td>
+            </tr>
+            ${rows}
+            <tr height="26" style="height:26pt;">
+              <td align="center" valign="middle" style="${td};font-weight:bold;">合计</td>
+              <td colspan="2" align="center" valign="middle" style="${td};font-weight:bold;"></td>
+              <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>
+            </tr>
+            <tr height="28" style="height:28pt;">
+              <td colspan="2" align="left" valign="middle" style="${labelLeft}">业务员：${
+                this.formData.salesmanName || ''
+              }</td>
+              <td colspan="2" align="left" valign="middle" style="${labelLeft}">制单人：${
+                this.formData.makerName || ''
+              }</td>
+              <td colspan="2" align="left" valign="middle" style="${labelLeft}">发货人：</td>
+            </tr>
+            <tr height="28" style="height:28pt;">
+              <td colspan="3" align="left" valign="middle" style="${labelLeft}">地址：湖南湘江新区宁乡夏铎铺机械工业园</td>
+              <td colspan="3" align="left" valign="middle" style="${labelLeft}">客户签字：</td>
+            </tr>
+          </table>`;
+
+        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" />
+        <style>
+          br { mso-data-placement: same-cell; }
+          table { mso-displayed-decimal-separator:"."; mso-displayed-thousand-separator:","; }
+          td { mso-ignore:padding; }
+        </style>
+        <!--[if gte mso 9]><xml>
+        <x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
+        <x:Name>${title}</x:Name>
+        <x:WorksheetOptions>
+          <x:DefaultRowHeight>260</x:DefaultRowHeight>
+          <x:Print><x:ValidPrinterInfo/><x:HorizontalResolution>600</x:HorizontalResolution><x:VerticalResolution>600</x:VerticalResolution></x:Print>
+          <x:Selected/>
+          <x:DoNotDisplayGridlines/>
+        </x:WorksheetOptions>
+        </x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook>
+        </xml><![endif]-->
+        </head>
+        <body>${table}</body></html>`;
+
+        const blob = new Blob(['' + html], {
+          type: 'application/vnd.ms-excel;charset=utf-8'
+        });
+        saveAs(blob, `${title}_${this.formData.orderNo || ''}.xls`);
       }
     }
   };