新增销售订单可以多条打印

src/views/saleOrder/components/order-search.vue

@@ -466,7 +466,6 @@
     <group-order ref="groupDialog"> </group-order>
 
     <printTemplateSaleOrder
-      :groupName="groupName"
       ref="printTemplateSaleOrderRef"
     ></printTemplateSaleOrder>
   </el-form>
@@ -845,10 +844,9 @@
         this.$emit('check', val);
       },
       handlePrint() {
-        console.log(this.selection[0]);
-        if (this.selection.length > 1)
-          return this.$message.warning('请选择一条');
-        this.$refs.printTemplateSaleOrderRef.open(this.selection[0]);
+        if (!this.selection.length)
+          return this.$message.warning('请先勾选一个或多个订单！');
+        this.$refs.printTemplateSaleOrderRef.open(this.selection);
       }
     }
   };

src/views/saleOrder/components/printTemplateSaleOrder.vue

@@ -5,102 +5,121 @@
     v-if="QRvisible"
     width="90%"
   >
-    <div
-      id="printSection"
-      style="
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-      "
-    >
-      <div>
+    <div id="printSection">
+      <div
+        v-for="(item, idx) in printList"
+        :key="idx"
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          pageBreakInside: 'avoid',
+          marginBottom: idx < printList.length - 1 ? '40px' : '0'
+        }"
+      >
+        <div>
+          <div
+            style="
+              font-size: 20px;
+              font-weight: 800;
+              padding-right: 20px;
+              width: 400px;
+              margin: 0 auto;
+              margin-bottom: 20px;
+            "
+            >{{ groupName }}销售订单</div
+          >
+        </div>
         <div
           style="
-            font-size: 20px;
-            font-weight: 800;
-            padding-right: 20px;
-            width: 400px;
-            margin: 0 auto;
-            margin-bottom: 20px;
+            width: 100%;
+            font-size: 12px;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
           "
-          >{{ groupName }}销售订单</div
         >
-      </div>
-      <div
-        style="
-          width: 100%;
-          font-size: 12px;
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 10px;
-        "
-      >
-        <span style="width: 25%">单据日期：{{ row.createTime }}</span>
-        <span style="width: 40%">客户简称：{{ formData.customerName }}</span>
-        <span style="width: 35%">客户经理：{{ formData.salesman }}</span>
-      </div>
-      <div
-        style="
-          width: 100%;
-          font-size: 12px;
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 10px;
-        "
-      >
-        <span style="width: 65%">交货日期：{{ formData.deliveryTime }}</span>
-        <span style="width: 35%">单据编码：{{ formData.code }}</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: 5px; width: 25%;"> 名称 </td>
-            <td style="padding: 5px; width: 15%;"> 型号规格 </td>
-            <td style="padding: 5px; width: 10%;"> 颜色 </td>
-            <td style="padding: 5px; width: 10%"> 数量</td>
-            <td style="padding: 5px; width: 10%"> 单位</td>
-            <!-- <td style="padding: 5px; width: 110px"> 盘具</td>
-            <td style="padding: 5px; width: 110px"> 分段</td> -->
-            <td style="padding: 5px; width: 20%"> 生产要求</td>
-          </tr>
-
-          <tr align="center" v-for="(item, index) in formData.productInfoList">
-            <td style="padding: 5px"> {{ item.productName }} </td>
-            <td style="padding: 5px"> {{ item.model }}/{{ item.specification }}</td>
-            <td style="padding: 5px"> {{ item.colorKey }}</td>
-            <td style="padding: 5px"> {{ item.contractNum }}</td>
-            <td style="padding: 5px"> {{ item.measuringUnit }}</td>
-            <!-- <td style="padding: 5px"> {{ item.totalCount }}</td>
-            <td style="padding: 5px"> {{ item.totalCount }}</td> -->
-            <td style="padding: 5px"> {{ item.productionRequirements }}</td>
-          </tr>
-        </tbody>
-      </table>
-      <div
-        style="
-          width: 100%;
-          font-size: 12px;
-          display: flex;
-          justify-content: space-between;
-          margin-top: 10px;
-        "
-      >
-        <div style="flex: 1">
-          <div>制单人：{{ detail.salesOrderBasicInfo.createUserName }}</div>
+          <span style="width: 25%">单据日期：{{ item.row.createTime }}</span>
+          <span style="width: 40%"
+            >客户简称：{{ item.formData.customerName }}</span
+          >
+          <span style="width: 35%"
+            >客户经理：{{ item.formData.salesman }}</span
+          >
+        </div>
+        <div
+          style="
+            width: 100%;
+            font-size: 12px;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+          "
+        >
+          <span style="width: 65%"
+            >交货日期：{{ item.formData.deliveryTime }}</span
+          >
+          <span style="width: 35%">单据编码：{{ item.formData.code }}</span>
         </div>
-        <div style="flex: 1">
-          <div>审核人：{{ detail.salesOrderBasicInfo.reviewerName }}</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: 5px; width: 25%"> 名称 </td>
+              <td style="padding: 5px; width: 15%"> 型号规格 </td>
+              <td style="padding: 5px; width: 10%"> 颜色 </td>
+              <td style="padding: 5px; width: 10%"> 数量</td>
+              <td style="padding: 5px; width: 10%"> 单位</td>
+              <td style="padding: 5px; width: 20%"> 生产要求</td>
+            </tr>
+
+            <tr
+              align="center"
+              v-for="(p, pIndex) in item.formData.productInfoList"
+              :key="pIndex"
+            >
+              <td style="padding: 5px"> {{ p.productName }} </td>
+              <td style="padding: 5px">
+                {{ p.model }}/{{ p.specification }}</td
+              >
+              <td style="padding: 5px"> {{ p.colorKey }}</td>
+              <td style="padding: 5px"> {{ p.contractNum }}</td>
+              <td style="padding: 5px"> {{ p.measuringUnit }}</td>
+              <td style="padding: 5px"> {{ p.productionRequirements }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div
+          style="
+            width: 100%;
+            font-size: 12px;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+          "
+        >
+          <div style="flex: 1">
+            <div
+              >制单人：{{
+                item.detail.salesOrderBasicInfo.createUserName
+              }}</div
+            >
+          </div>
+          <div style="flex: 1">
+            <div
+              >审核人：{{ item.detail.salesOrderBasicInfo.reviewerName }}</div
+            >
+          </div>
         </div>
       </div>
     </div>
@@ -130,15 +149,14 @@
         checked: '',
         QRvisible: false,
         isPrintPrice: false,
-        formData: {},
-        row: {},
-        detail: {},
+        printList: [],
         groupName: ''
       };
     },
     methods: {
-      async open(row) {
-        this.row = row;
+      async open(rows) {
+        const list = Array.isArray(rows) ? rows : [rows];
+        if (!list.length) return;
         enterprisePage({
           pageNum: 1,
           size: 200
@@ -147,32 +165,21 @@
             this.groupName = res.list[0].name;
           }
         });
-        this.formData = await getOrderDetail(row.code);
-        this.detail = await getSalesDetail(row.id);
-        console.log('formData~~~', this.formData, this.detail);
+        const results = await Promise.all(
+          list.map(async (row) => {
+            const formData = await getOrderDetail(row.code);
+            const detail = await getSalesDetail(row.id);
+            return { row, formData, detail };
+          })
+        );
+        this.printList = results;
         this.QRvisible = true;
-
-        //包装维度
       },
       close() {
         this.QRvisible = false;
       },
-      getTotalValue(key, num) {
-        let val = this.formData?.productList?.reduce((total, item) => {
-          return (total += Number(item[key]));
-        }, 0);
-
-        return (
-          (val &&
-            parseFloat(val)
-              .toFixed(num)
-              .replace(/\.?0+$/, '')) ||
-          0
-        );
-      },
       print() {
         const printSection = document.getElementById('printSection');
-        // 创建打印任务
         const printWindow = window.open('', '_blank');
         printWindow.document.open();
         printWindow.document.write('<html><head><title>打印预览</title>');