输液贴打印跨页

src/views/hospitalization/nurse-module/PrintInfusionCard.vue

@@ -72,18 +72,15 @@
         </div>
         <div v-else id="print-test">
           <div class="crad-area" v-for="(item, index) in patientInfusionInfos" :id="item.patInfo.patNo + '-' + index"
-            style="width: 230px;float: left;margin-right: 20px">
+            style="width: 230px;display: inline-block;margin-right: 20px">
             <bottle-card :drugs="item.bottleCardDrugs" :pat-info="item.patInfo" :yz-date="queryParams.executeDate"
               :bottle-group="item.bottleGroup" style="margin-bottom: 10px;">
             </bottle-card>
           </div>
         </div>
-        <div class="print-hiden-area" style="margin: 0px 12px">
-          <div class="print-bottle-card-area" style="margin: 0px;">
-            <!-- printPatientBottleInfos -->
-            <div v-for="(item, index) in printPatientBottleInfos" :id="item.patInfo.patNo + '-' + index" style="width: 240px;
-                    float: left;
-                    margin-right: 10px;">
+        <!-- <div class="print-hiden-area" style="margin: 0px 12px">
+          <div class="print-bottle-card-area" style="display: flex;margin: 0px;">
+            <div v-for="(item, index) in printPatientBottleInfos" :id="item.patInfo.patNo + '-' + index" style="width: 240px;margin-right: 10px;">
               <bottle-card :drugs="item.bottleCardDrugs" :pat-info="item.patInfo" :yz-date="queryParams.executeDate"
                 :bottle-group="item.bottleGroup" style="margin-bottom: 10px;">
               </bottle-card>
@@ -92,7 +89,7 @@
               style="width: 230px;">
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
     </template>
   </page-layer>
@@ -257,19 +254,154 @@ const execPrint = () => {
     // console.log("patientInfusionInfos",patientInfusionInfos.value)
     // console.log("printPatientBottleInfos",printPatientBottleInfos.value)
     nextTick(() => {
-      let prntContent1 = document.getElementById("print-test").innerHTML
-      let flexStyles = getStyleText('.print-bottle-card-area');
-      // const prntStyle = `<style>${flexStyles}td{border: 1px solid black;
-      // font-size: 12px;padding: 2px;}</style>`
-      const prntStyle = `<style>td{border: 1px solid black;
-        font-size: 12px;padding: 2px;}</style>`
-      let printFinal = prntStyle + prntContent1
-      console.log("prntContent1", prntContent1)
-      LODOP.PRINT_INIT('infusionCard')
-      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
-      LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printFinal)
-      LODOP.SET_PRINT_STYLE('ItemType', 3)
+      LODOP.PRINT_INIT('infusionCard');
+      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '');
+
+      const prntStyle = `<style>
+  .card-container { display: inline-block;  } /* 一行3个，预留间距 */
+  td { border: 1px solid black; font-size: 12px; padding: 2px; }
+</style>`;
+
+      const PAGE_MAX_HEIGHT = 1100; // 页面最大高度阈值（px）
+      let currentPageHTML = prntStyle; // 当前页内容
+      let currentPageTotalHeight = 0; // 当前页累计高度（px）
+      let currentRowElements = []; // 当前行的元素
+      let currentRowMaxHeight = 0; // 当前行最高元素高度（px）
+
+      patientInfusionInfos.value.forEach((item, index) => {
+        const printTarget = document.getElementById(`${item.patInfo.patNo}-${index}`);
+        if (!printTarget) return;
+
+        // 获取当前元素高度（px）
+        const itemHeight = printTarget.offsetHeight;
+
+        // 1. 处理当前行：添加元素并更新行最高高度
+        currentRowElements.push(printTarget);
+        currentRowMaxHeight = Math.max(currentRowMaxHeight, itemHeight);
+
+        // 2. 当行内元素满3个时，计算行高并判断是否分页
+        if (currentRowElements.length === 3) {
+          // 计算当前行加入后，页面的总高度
+          const totalHeightAfterAdd = currentPageTotalHeight + currentRowMaxHeight;
+
+          // 3. 判断是否需要分页
+          if (totalHeightAfterAdd > PAGE_MAX_HEIGHT) {
+            // 先打印当前页已有的内容
+            LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', currentPageHTML);
+            LODOP.NewPage(); // 开启新页
+
+            // 新页初始化：当前行作为新页的第一行
+            currentPageHTML = prntStyle;
+            currentPageTotalHeight = currentRowMaxHeight;
+          } else {
+            // 不需要分页，累加当前行高度
+            currentPageTotalHeight = totalHeightAfterAdd;
+          }
+
+          // 4. 将当前行的3个元素添加到页面HTML
+          currentRowElements.forEach(el => {
+            currentPageHTML += `<div class="card-container">${el.outerHTML}</div>`;
+          });
+
+          // 5. 重置行状态，准备下一行
+          currentRowElements = [];
+          currentRowMaxHeight = 0;
+        }
+      });
+
+      // 6. 处理最后一行未填满3个元素的情况
+      if (currentRowElements.length > 0) {
+        // 计算剩余行加入后的总高度
+        const totalHeightAfterAdd = currentPageTotalHeight + currentRowMaxHeight;
+
+        // 如果超出页面高度，单独分页
+        if (totalHeightAfterAdd > PAGE_MAX_HEIGHT) {
+          LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', currentPageHTML);
+          LODOP.NewPage();
+          currentPageHTML = prntStyle;
+          currentPageTotalHeight = currentRowMaxHeight;
+        } else {
+          currentPageTotalHeight = totalHeightAfterAdd;
+        }
+
+        // 添加剩余元素到页面
+        currentRowElements.forEach(el => {
+          currentPageHTML += `<div class="card-container">${el.outerHTML}</div>`;
+        });
+      }
+
+      // 7. 添加最后一页内容
+      if (currentPageHTML) {
+        LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', currentPageHTML);
+      }
+
       LODOP.PREVIEW();
+
+      // LODOP.PRINT_INIT('infusionCard')
+      // LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
+      // let printHTML = "";
+      // let pageHeightNow = 0;
+      // let pageHeighInRow = 0;
+      // let rowCount = 0;
+      // let isWarp = false;
+      // let isRowHeightNew = true
+      // const prntStyle = `<style>td{border: 1px solid black;
+      //   font-size: 12px;padding: 2px;}</style>`
+      // patientInfusionInfos.value.forEach((item, index) => {
+      //   let printTarget = document.getElementById(item.patInfo.patNo + '-' + index);
+      //   console.log("printTarget", printTarget.offsetHeight)
+      //   if (printTarget.offsetHeight > pageHeighInRow) {
+      //     pageHeighInRow = printTarget.offsetHeight;
+      //     isRowHeightNew = true;
+      //   }
+      //   // console.log("pageHeighInRow", pageHeighInRow)
+      //   // console.log("pageHeightNow", pageHeightNow)
+      //   // console.log("HeightAll", pageHeighInRow + pageHeightNow)
+      //   if (isWarp) {
+      //     isWarp = false
+      //     // if(isRowHeightNew)
+      //     if (isRowHeightNew && pageHeighInRow + pageHeightNow > 900) {
+      //       // console.log("11")
+      //       // 此时超出一页
+      //       // LODOP.PRINT()
+      //       rowCount = 0
+      //       LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', prntStyle + printHTML)
+      //       LODOP.NewPage(); // 关键：开启新页
+      //       printHTML = printTarget.outerHTML;
+      //       pageHeightNow = pageHeighInRow;
+      //       // isWarp = true
+      //       rowCount = 1; // 重置行计数
+      //     } else {
+      //       // console.log("2")
+      //       // pageHeightNow = pageHeighInRow + pageHeightNow;
+      //       printHTML += printTarget.outerHTML;
+      //     }
+      //   } else {
+      //     rowCount++;
+      //     isRowHeightNew = false
+      //     if (rowCount == 3) {
+      //       // 换行
+      //       isWarp = true;
+      //       rowCount = 0;
+      //       isRowHeightNew = true;
+      //       pageHeightNow = pageHeighInRow + pageHeightNow;
+      //       console.log('pageHeightNow',pageHeightNow)
+      //     }
+      //     printHTML += printTarget.outerHTML;
+      //   }
+      // });
+      // if (printHTML) {
+      //   LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', prntStyle + printHTML);
+      // }
+      // let prntContent1 = document.getElementById("print-test").innerHTML
+      // let flexStyles = getStyleText('.print-bottle-card-area');
+      // // const prntStyle = `<style>${flexStyles}td{border: 1px solid black;
+      // // font-size: 12px;padding: 2px;}</style>`
+      // // let printFinal = prntStyle + prntContent1
+      // // console.log("prntContent1", prntContent1)
+      // // LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printFinal)
+      // // LODOP.SET_PRINT_STYLE('ItemType', 3)
+      // LODOP.PREVIEW();
       printPatientBottleInfos.value = []
       updatePrintState()
     });
@@ -365,10 +497,10 @@ onMounted(() => {
 
 .print-bottle-card-area {
   width: 730px;
-  /* display: flex;
+  display: flex;
   justify-content: space-between;
   align-items: center;
-  flex-wrap: wrap; */
+  flex-wrap: wrap;
   /* float: left; */
   padding: 15px 5px;
 }