输液贴打印兼容性

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

@@ -79,7 +79,7 @@
           </div>
         </div>
         <div v-else id="print-test">
-          <div class="crad-area" v-for="(item, index) in patientInfusionInfos" :id="item.patInfo.patNo + '-' + index"
+          <div v-for="(item, index) in patientInfusionInfos" :id="item.patInfo.patNo + '-' + index"
             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;">
@@ -332,17 +332,112 @@ const execPrint = () => {
     // console.log("patientInfusionInfos",patientInfusionInfos.value)
     // console.log("printPatientBottleInfos",printPatientBottleInfos.value)
     nextTick(() => {
+      //       LODOP.PRINT_INIT('infusionCard');
+      //       LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '');
+      //       /* 一行3个，预留间距 */
+
+      //       const printStyle = `<style>
+      //   .card-container { display: inline;  } 
+      //   td { border: 1px solid black; font-size: 12px; padding: 2px; }
+      // </style>`;
+      //       const PAGE_MAX_HEIGHT = 1100; // 页面最大高度阈值（px）
+      //       let currentPageHTML = printStyle; // 当前页内容
+      //       let currentPageTotalHeight = 0; // 当前页累计高度（px）
+      //       let currentRowElements = []; // 当前行的元素
+      //       let currentRowMaxHeight = 0; // 当前行最高元素高度（px）
+
+      //       printPatientBottleInfos.value.forEach((item, index) => {
+      //         const printTarget = document.getElementById(`${item.patInfo.patNo}-${index}_print`);
+      //         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 = printStyle;
+      //             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 = printStyle;
+      //           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', '');
+      /* 一行3个，使用float布局确保兼容性 */
 
       const printStyle = `<style>
-  .card-container { display: inline-block;  } /* 一行3个，预留间距 */
+  .card-row { overflow: hidden; margin-bottom: 10px; } /* 清除浮动并添加行间距 */
+  .card-container { 
+    float: left; 
+    width: 31.5%; 
+    box-sizing: border-box; 
+    padding: 0 5px; /* 预留间距 */
+  } 
   td { border: 1px solid black; font-size: 12px; padding: 2px; }
+  /* 最后一个元素清除右侧内边距 */
+  .card-container:nth-child(3n) { padding-right: 0; }
+  /* 第一个元素清除左侧内边距 */
+  .card-container:nth-child(3n+1) { padding-left: 0; }
 </style>`;
 
-      const PAGE_MAX_HEIGHT = 1100; // 页面最大高度阈值（px）
+      const PAGE_MAX_HEIGHT = 1080; // 页面最大高度阈值（px）
       let currentPageHTML = printStyle; // 当前页内容
       let currentPageTotalHeight = 0; // 当前页累计高度（px）
+      let currentRowHTML = ''; // 当前行的HTML内容
       let currentRowElements = []; // 当前行的元素
       let currentRowMaxHeight = 0; // 当前行最高元素高度（px）
 
@@ -356,9 +451,13 @@ const execPrint = () => {
         // 1. 处理当前行：添加元素并更新行最高高度
         currentRowElements.push(printTarget);
         currentRowMaxHeight = Math.max(currentRowMaxHeight, itemHeight);
+        currentRowHTML += `<div class="card-container">${printTarget.outerHTML}</div>`;
 
         // 2. 当行内元素满3个时，计算行高并判断是否分页
         if (currentRowElements.length === 3) {
+          // 包装当前行为一个带清除浮动的容器
+          const rowWithClearfix = `<div class="card-row">${currentRowHTML}</div>`;
+
           // 计算当前行加入后，页面的总高度
           const totalHeightAfterAdd = currentPageTotalHeight + currentRowMaxHeight;
 
@@ -369,26 +468,26 @@ const execPrint = () => {
             LODOP.NewPage(); // 开启新页
 
             // 新页初始化：当前行作为新页的第一行
-            currentPageHTML = printStyle;
+            currentPageHTML = printStyle + rowWithClearfix;
             currentPageTotalHeight = currentRowMaxHeight;
           } else {
-            // 不需要分页，累加当前行高度
+            // 不需要分页，累加当前行高度并添加到页面
+            currentPageHTML += rowWithClearfix;
             currentPageTotalHeight = totalHeightAfterAdd;
           }
 
-          // 4. 将当前行的3个元素添加到页面HTML
-          currentRowElements.forEach(el => {
-            currentPageHTML += `<div class="card-container">${el.outerHTML}</div>`;
-          });
-
           // 5. 重置行状态，准备下一行
           currentRowElements = [];
           currentRowMaxHeight = 0;
+          currentRowHTML = '';
         }
       });
 
       // 6. 处理最后一行未填满3个元素的情况
       if (currentRowElements.length > 0) {
+        // 包装当前行为一个带清除浮动的容器
+        const rowWithClearfix = `<div class="card-row">${currentRowHTML}</div>`;
+
         // 计算剩余行加入后的总高度
         const totalHeightAfterAdd = currentPageTotalHeight + currentRowMaxHeight;
 
@@ -396,16 +495,12 @@ const execPrint = () => {
         if (totalHeightAfterAdd > PAGE_MAX_HEIGHT) {
           LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', currentPageHTML);
           LODOP.NewPage();
-          currentPageHTML = printStyle;
+          currentPageHTML = printStyle + rowWithClearfix;
           currentPageTotalHeight = currentRowMaxHeight;
         } else {
+          currentPageHTML += rowWithClearfix;
           currentPageTotalHeight = totalHeightAfterAdd;
         }
-
-        // 添加剩余元素到页面
-        currentRowElements.forEach(el => {
-          currentPageHTML += `<div class="card-container">${el.outerHTML}</div>`;
-        });
       }
 
       // 7. 添加最后一页内容
@@ -414,6 +509,7 @@ const execPrint = () => {
       }
 
       LODOP.PREVIEW();
+
       printPatientBottleInfos.value = []
       // LODOP.PRINT_INIT('infusionCard')
       // LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')