领料单打印分页

src/views/mes/prepare/index.vue

@@ -248,10 +248,16 @@
             <el-col :span="8">页次:  1/  1</el-col>
           </el-row>
           <!-- 主数据 -->
-          <el-table
+		  <div v-for="(item,index) in printData.workTable" :key="index">
-            v-if="refreshNewWorkerTable" v-loading="newWorkerLoading" class="my-print-table" :data="printData.workTable"
+			<el-table
+            v-if="refreshNewWorkerTable" v-loading="newWorkerLoading" class="my-print-table" :data="item"
             border style="width: 100%">
-            <el-table-column type="index" label="序号" width="40"></el-table-column>
+            <el-table-column  label="序号" width="40">
+				<template slot-scope="scope">
+        <!-- scope.$index 是当前行的索引（从 0 开始），加 1 后乘以 2 -->
+                 {{ (scope.$index + 1) + fenyeNumber* index}}
+               </template>
+			</el-table-column>
             <el-table-column prop="materialCode" label="料号" width="120" :formatter="productCodeFormate"></el-table-column>
             <el-table-column prop="materialName" label="物料描述" width="250"></el-table-column>
             <el-table-column prop="unit" width="50" label="单位"></el-table-column>
@@ -262,7 +268,10 @@
             <el-table-column prop="routeCode" width="60" label="实发数量2"></el-table-column>
 		      
           </el-table>
-          <br/>
+		  <div class="fy" v-if="index!=printData.workTable.length-1"></div>
+		  </div>
+          
+          
           <!-- 底部 -->
           <el-row class="my-print-foot">
             <el-col :offset="1" :span="3">发料人:</el-col>
@@ -295,6 +304,7 @@ export default {
 	// components: {Detail},
 	data() {
 		return {
+		fenyeNumber:14,
 	  shengchan:true,
       newWorkerLoading: false,
       refreshNewWorkerTable:true,
@@ -413,23 +423,7 @@ export default {
         style: `
       
       body {margin: 5mm;padding: 0;}
-      .my-print-table {
+      .fy{page-break-after: always;}
-        width: 100%;
-      }
-      .my-print-table tr {
-        page-break-inside: avoid;
-        page-break-after: auto;
-      }
-      .my-print-table thead {
-        display: table-header-group; /* 确保表头在每一页显示 */
-      }
-      .my-print-table tbody {
-        display: table-row-group;
-      }
-      .my-print-table th, .my-print-table td {
-        word-wrap: break-word;
-        white-space: normal;
-      }
     `,
         ignoreElements: params.ignore || [], // ['no-print']
         properties: params.properties || null
@@ -455,7 +449,17 @@ export default {
         this.printData.factory = response.data.mesPrepareDetailList[0].factoryCode
         this.printData.productDate = response.data.mesPrepareDetailList[0].productDate
         this.printData.printDate = moment(new Date()).format('YYYY-MM-DD')
-        this.printData.workTable = response.data.mesPrepareDetailList
+        this.printData.workTable = response.data.mesPrepareDetailList;
+		let chunkedArray = [];
+
+// 遍历this.printData.workTable
+     for (let i = 0; i < this.printData.workTable.length; i += this.fenyeNumber) {
+    // 使用slice方法从当前索引i开始切割，切割长度为10（如果剩余元素少于10，则切割剩余所有元素）
+    let chunk = this.printData.workTable.slice(i, i + this.fenyeNumber);
+    // 将切割后的数组添加到chunkedArray中
+    chunkedArray.push(chunk);
+    }
+	this.printData.workTable = chunkedArray;
 		this.printData.prodLineCode = response.data.mesPrepare.prodLineCode
         this.refreshNewWorkerTable = true // 立即将refreshProTable设置为true，显示表格
         this.newWorkerLoading = false // 设置加载状态为false，表示加载完成
@@ -487,6 +491,16 @@ export default {
         this.printData.productDate = moment(this.queryParams.productDate).format('YYYY-MM-DD')
         this.printData.printDate = moment(new Date()).format('YYYY-MM-DD')
         this.printData.workTable = response.data.mesPrepareDetailList
+		let chunkedArray = [];
+
+// 遍历this.printData.workTable
+     for (let i = 0; i < this.printData.workTable.length; i += this.fenyeNumber) {
+    // 使用slice方法从当前索引i开始切割，切割长度为10（如果剩余元素少于10，则切割剩余所有元素）
+    let chunk = this.printData.workTable.slice(i, i + this.fenyeNumber);
+    // 将切割后的数组添加到chunkedArray中
+    chunkedArray.push(chunk);
+    }
+	this.printData.workTable = chunkedArray;
         this.refreshNewWorkerTable = true // 立即将refreshProTable设置为true，显示表格
         this.newWorkerLoading = false // 设置加载状态为false，表示加载完成
       })
@@ -631,6 +645,7 @@ export default {
   body {
     font-family: 'Arial', sans-serif; /* 设置字体为'Arial'或其他清晰的无衬线字体 */
     font-size: 14px; /* 设置字体大小 */
+	-webkit-print-color-adjust: exact;
   }
   table, th, td {
     border: 1px solid black;
@@ -638,31 +653,7 @@ export default {
     font-size: 14px; /* 确保表格内字体大小一致 */
   }
 }
-/* @media print {
+.fy{
-	#printFrom{
+	page-break-after: always;
-    font-family: "SimSun", "宋体" !important;
+}
-    color: #000 !important;
-    font-size: 14pt !important; 
-	-webkit-print-color-adjust: exact;
-	}
-	
-       .my-print-table {
-           width: 100%;
-           page-break-inside: auto;
-       }
-       .my-print-table tr {
-           page-break-inside: avoid;
-       }
-       .my-print-table thead {
-           display: table-header-group;
-       }
-       .my-print-table th, .my-print-table td {
-           word-wrap: break-word;
-           white-space: normal;
-       }
-       @page {
-           size: A5 portrait;
-           margin: 5mm;
-       }
-} */
 </style>