feat: 添加备货单打印功能，支持打印和导出Excel（华泰打印）

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

@@ -0,0 +1,306 @@
+<template>
+  <ele-modal
+    title="销售订单备货单"
+    :visible.sync="QRvisible"
+    v-if="QRvisible"
+    width="90%"
+  >
+    <div id="printSectionStock">
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+        "
+        v-for="wrapperItem in formData"
+        :key="wrapperItem.id"
+      >
+        <div style="width: 100%;">
+          <div
+            style="
+              font-size: 20px;
+              font-weight: 800;
+              text-align: center;
+              white-space: nowrap;
+            "
+          >
+            {{ groupName }}销售订单备货单
+          </div>
+        </div>
+
+        <!-- 顶部信息：客户 / 单据编码 / 单据日期 -->
+        <div
+          style="
+            width: 100%;
+            font-size: 13px;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            margin-top: 20px;
+          "
+        >
+          <span style="width: 33%">客户：{{ wrapperItem.partaName }}</span>
+          <span style="width: 33%">单据编码：{{ wrapperItem.orderNo }}</span>
+          <span style="width: 33%">单据日期：{{ wrapperItem.createTime ? wrapperItem.createTime.split(' ')[0] : '' }}</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: 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: 14%"> 生产批号</td>
+              <td style="padding: 2px; width: 12%"> 截线米段</td>
+              <td style="padding: 2px; width: 12%"> 仓库</td>
+              <td style="padding: 2px; width: 15%"> 备注</td>
+            </tr>
+
+            <tr align="center" v-for="(item, index) in wrapperItem.productList">
+              <td style="padding: 2px"> {{ index + 1 }} </td>
+              <td style="padding: 2px"> {{ item.modelType }} </td>
+              <td style="padding: 2px"> {{ item.saleUnit }}</td>
+              <td style="padding: 2px"> {{ item.saleCount }}</td>
+              <td style="padding: 2px"> {{ item.colorKey }}</td>
+              <td style="padding: 2px"> {{ item.batchNo }}</td>
+              <td style="padding: 2px"> {{ item.cuttingLength }}</td>
+              <td style="padding: 2px"> {{ item.warehouseName || '' }}</td>
+              <td style="padding: 2px"> {{ item.remark }}</td>
+            </tr>
+            <tr align="center">
+              <td style="padding: 2px"> 合计 </td>
+              <td style="padding: 2px" colspan="2"> </td>
+              <td style="padding: 2px">{{ getTotalValue(wrapperItem, 'saleCount', 2) }} </td>
+              <td style="padding: 2px"> </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">制单人：{{ wrapperItem.createUserName }}</div>
+          <div style="flex: 1">核对人：{{ wrapperItem.reviewerName }}</div>
+          <div style="flex: 1">仓库：</div>
+          <div style="flex: 1">审核：</div>
+        </div>
+
+        <!-- 备注行 -->
+        <div
+          style="
+            width: 100%;
+            font-size: 13px;
+            display: flex;
+            margin-top: 10px;
+          "
+        >
+          <div style="flex: 1">备注：{{ wrapperItem.remark }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div slot="footer">
+      <el-button type="primary" @click="exportExcel">导出</el-button>
+      <el-button @click="print">打印预览</el-button>
+      <el-button @click="close">关闭</el-button>
+    </div>
+  </ele-modal>
+</template>
+
+<script>
+  import { getSaleOrderDetails } from '@/api/saleManage/saleorder';
+  import { saveAs } from 'file-saver';
+  export default {
+    name: 'printTemplateHtStock',
+    props: {
+      groupName: ''
+    },
+    data() {
+      return {
+        QRvisible: false,
+        formData: []
+      };
+    },
+
+    methods: {
+      async open(id) {
+        const list = await getSaleOrderDetails(id);
+        this.formData = list.map((wrapperItem) => {
+          const productList = (wrapperItem.productList || []).map((item) => ({
+            ...item,
+            warehouseName: item.warehouseName || ''
+          }));
+          return { ...wrapperItem, productList };
+        });
+        this.QRvisible = true;
+      },
+      close() {
+        this.QRvisible = false;
+      },
+      getTotalValue(itemI, key, num) {
+        const val = itemI?.productList?.reduce((total, item) => {
+          return (total += Number(item[key]));
+        }, 0);
+        return (
+          (val &&
+            parseFloat(val)
+              .toFixed(num)
+              .replace(/\.?0+$/, '')) ||
+          0
+        );
+      },
+      print() {
+        const printSection = document.getElementById('printSectionStock');
+        const printWindow = window.open('', '_blank');
+        printWindow.document.open();
+        printWindow.document.write('<html><head><title>打印预览</title>');
+        printWindow.document.write('</head><body>');
+        printWindow.document.write(printSection.innerHTML);
+        printWindow.document.write('</body></html>');
+        printWindow.document.close();
+        printWindow.onload = function () {
+          printWindow.print();
+        };
+      },
+      exportExcel() {
+        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 = [45, 135, 45, 55, 80, 95, 85, 85, 95];
+        const colGroup = colWidths
+          .map((w) => `<col width="${w}" style="width:${w}pt;" />`)
+          .join('');
+
+        const title = `${this.groupName || ''}销售订单备货单`;
+
+        let tables = '';
+        this.formData.forEach((wrapperItem) => {
+          const list = wrapperItem.productList || [];
+          const totalCount = this.getTotalValue(wrapperItem, 'saleCount', 2);
+
+          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.batchNo || ''}</td>
+                <td align="center" valign="middle" style="${td}">${item.cuttingLength ?? ''}</td>
+                <td align="center" valign="middle" style="${td}">${item.warehouseName || ''}</td>
+                <td align="center" valign="middle" style="${td}">${item.remark || ''}</td>
+              </tr>`
+            )
+            .join('');
+
+          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>
+            <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="3" align="left" valign="middle" style="${labelLeft}">客户：${wrapperItem.partaName || ''}</td>
+              <td colspan="3" align="left" valign="middle" style="${labelLeft}">单据编码：${wrapperItem.orderNo || ''}</td>
+              <td colspan="3" align="left" valign="middle" style="${labelLeft}">单据日期：${wrapperItem.createTime ? wrapperItem.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;"></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}"></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}">制单人：${wrapperItem.createUserName || ''}</td>
+              <td colspan="2" align="left" valign="middle" style="${labelLeft}">核对人：${wrapperItem.reviewerName || ''}</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="9" align="left" valign="middle" style="${labelLeft}">备注：${wrapperItem.remark || ''}</td>
+            </tr>
+          </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" />
+        <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:ExcelWorkbook></xml><![endif]-->
+        </head>
+        <body>${tables}</body></html>`;
+
+        const blob = new Blob(['' + html], {
+          type: 'application/vnd.ms-excel;charset=utf-8'
+        });
+        const firstOrderNo = this.formData[0]?.orderNo || '';
+        const suffix = this.formData.length > 1 ? `等${this.formData.length}条` : firstOrderNo;
+        saveAs(blob, `${title}_${suffix}.xls`);
+      }
+    }
+  };
+</script>
+
+<style lang="scss"></style>

src/views/saleManage/saleOrder/index.vue

@@ -138,6 +138,11 @@
                         @click.native="handleBatchPrint"
                         >打印（批次）</el-dropdown-item
                       >
+                      <el-dropdown-item
+                        v-if="$hasPermission('eom:saleorder:print')"
+                        @click.native="handleStockPrint"
+                        >打印（备货单）</el-dropdown-item
+                      >
                     </el-dropdown-menu>
                   </el-dropdown>
 
@@ -412,6 +417,10 @@
       ref="printTemplateHtBatchRef"
       :groupName="groupName"
     ></printTemplateHtBatch>
+    <printTemplateHtStock
+      ref="printTemplateHtStockRef"
+      :groupName="groupName"
+    ></printTemplateHtStock>
     <add-adjust-dialog
       v-if="addAdjustDialogFlag"
       :addAdjustDialogFlag.sync="addAdjustDialogFlag"
@@ -475,6 +484,7 @@ import { listOrganizations } from '@/api/system/organization';
 import printTemplateHt from './components/printTemplateHt.vue';
 import printTemplateRt from './components/printTemplateRt.vue';
 import printTemplateHtBatch from './components/printTemplateHtBatch.vue';
+import printTemplateHtStock from './components/printTemplateHtStock.vue';
 import stockUnlock from './components/stockUnlock.vue';
 
 
@@ -514,6 +524,7 @@ export default {
     printTemplateHt,
     printTemplateRt,
     printTemplateHtBatch,
+    printTemplateHtStock,
     stockUnlock
   },
   //客户管理数据
@@ -1361,6 +1372,9 @@ export default {
     },
     handleBatchPrint() {
       this.$refs.printTemplateHtBatchRef.open(this.selection.map((v) => v.id));
+    },
+    handleStockPrint() {
+      this.$refs.printTemplateHtStockRef.open(this.selection.map((v) => v.id));
     }
   }
 };