style(print): 优化批量打印界面布局和样式

- 将打印控制组件包装在独立的 div 容器中
- 使用 inline-block 布局替代 grid 布局实现标签排列
- 添加新的 labelCellStyle 计算属性控制标签单元格样式
- 移除 scoped 样式限制以便打印时生效
- 添加打印控制面板的内边距样式
- 调整表格行高设置
- 更新打印媒体查询中的选择器和样式规则
- 优化打印时的页面布局和间距调整

src/views/sb/info/modules/PrintInSbInfoBatch.vue

@@ -1,71 +1,73 @@
 <template>
   <div class="print-content" v-show="visible">
-    <a-row :gutter="48" slot="extra">
-      <a-col :md="48" :sm="48">
-        <span class="table-page-search-submitButtons" style="float: right">
-          <a-button type="dashed" @click="handleEdit()">保存参数</a-button>
-          <a-button type="primary" style="margin-left: 8px" v-print="'#print-container-batch'" :disabled="disabled">打印</a-button>
-          <a-button style="margin-left: 8px" @click="handleCancel()">返回列表</a-button>
-        </span>
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col :span="4">
-        每行列数
-      </a-col>
-      <a-col :span="12">
-        <a-slider v-model="columnsPerRow" :min="1" :max="6" :marks="{1:'1',2:'2',3:'3',4:'4',5:'5',6:'6'}" />
-      </a-col>
-      <a-col :span="2">
-        <a-input-number v-model="columnsPerRow" :min="1" :max="6" style="marginLeft: 8px" />
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col :span="4">
-        页面总宽度
-      </a-col>
-      <a-col :span="12">
-        <a-slider v-model="labelWidth" :min="200" :max="1000" />
-      </a-col>
-      <a-col :span="2">
-        <a-input-number v-model="labelWidth" style="marginLeft: 8px" />
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col :span="4">
-        标签表格宽度
-      </a-col>
-      <a-col :span="12">
-        <a-slider v-model="labelContentWidth" :min="80" :max="500" />
-      </a-col>
-      <a-col :span="2">
-        <a-input-number v-model="labelContentWidth" suffix="px" style="marginLeft: 8px" />
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col :span="4">
-        标签表格高度
-      </a-col>
-      <a-col :span="12">
-        <a-slider v-model="labelContentHeight" :min="40" :max="300" />
-      </a-col>
-      <a-col :span="2">
-        <a-input-number v-model="labelContentHeight" suffix="px" style="marginLeft: 8px" />
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col :span="4">
-        二维码宽度
-      </a-col>
-      <a-col :span="12">
-        <a-slider v-model="imgWidth" :min="20" :max="200" />
-      </a-col>
-      <a-col :span="2">
-        <a-input-number v-model="imgWidth" suffix="px" style="marginLeft: 8px" />
-      </a-col>
-    </a-row>
+    <div class="print-controls">
+      <a-row :gutter="48">
+        <a-col :md="48" :sm="48">
+          <span class="table-page-search-submitButtons" style="float: right">
+            <a-button type="dashed" @click="handleEdit()">保存参数</a-button>
+            <a-button type="primary" style="margin-left: 8px" v-print="'#print-container-batch'" :disabled="disabled">打印</a-button>
+            <a-button style="margin-left: 8px" @click="handleCancel()">返回列表</a-button>
+          </span>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="4">
+          每行列数
+        </a-col>
+        <a-col :span="12">
+          <a-slider v-model="columnsPerRow" :min="1" :max="6" :marks="{1:'1',2:'2',3:'3',4:'4',5:'5',6:'6'}" />
+        </a-col>
+        <a-col :span="2">
+          <a-input-number v-model="columnsPerRow" :min="1" :max="6" style="marginLeft: 8px" />
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="4">
+          页面总宽度
+        </a-col>
+        <a-col :span="12">
+          <a-slider v-model="labelWidth" :min="200" :max="1000" />
+        </a-col>
+        <a-col :span="2">
+          <a-input-number v-model="labelWidth" style="marginLeft: 8px" />
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="4">
+          标签表格宽度
+        </a-col>
+        <a-col :span="12">
+          <a-slider v-model="labelContentWidth" :min="80" :max="500" />
+        </a-col>
+        <a-col :span="2">
+          <a-input-number v-model="labelContentWidth" suffix="px" style="marginLeft: 8px" />
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="4">
+          标签表格高度
+        </a-col>
+        <a-col :span="12">
+          <a-slider v-model="labelContentHeight" :min="40" :max="300" />
+        </a-col>
+        <a-col :span="2">
+          <a-input-number v-model="labelContentHeight" suffix="px" style="marginLeft: 8px" />
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="4">
+          二维码宽度
+        </a-col>
+        <a-col :span="12">
+          <a-slider v-model="imgWidth" :min="20" :max="200" />
+        </a-col>
+        <a-col :span="2">
+          <a-input-number v-model="imgWidth" suffix="px" style="marginLeft: 8px" />
+        </a-col>
+      </a-row>
+    </div>
     <div :style="labelWidthProgress" id="print-container-batch">
-      <div class="label-cell" v-for="record in sbInfoList" :key="record.id">
+      <div :style="labelCellStyle" class="label-cell" v-for="record in sbInfoList" :key="record.id">
         <table class="gridtable list" :style="labelContentWidthProgress" :id="'printDiv' + record.id">
           <tbody>
             <tr>
@@ -120,19 +122,29 @@ export default {
     labelWidthProgress () {
       return {
         width: this.labelWidth + 'px',
-        display: 'grid',
-        gridTemplateColumns: `repeat(${this.columnsPerRow}, 1fr)`,
-        gap: '6px',
-        padding: '6px',
-        backgroundColor: '#f0f0f0'
+        padding: '4px',
+        backgroundColor: '#f0f0f0',
+        fontSize: '0',
+        lineHeight: '0'
+      }
+    },
+    labelCellStyle () {
+      return {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        width: (100 / this.columnsPerRow) + '%',
+        minHeight: this.labelContentHeight + 'px',
+        padding: '3px',
+        boxSizing: 'border-box'
       }
     },
     labelContentWidthProgress () {
       return {
         width: '100%',
-        height: this.labelContentHeight + 'px',
         backgroundColor: 'white',
-        textAlign: 'center'
+        textAlign: 'center',
+        fontSize: '11px',
+        lineHeight: 'normal'
       }
     },
     imageProgress () {
@@ -197,7 +209,7 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style>
 /* 页面正常显示时的样式 */
 .print-content {
   margin: 0 auto;
@@ -205,6 +217,10 @@ export default {
   background-color: #fff;
 }
 
+.print-controls {
+  padding: 12px 0;
+}
+
 .label-cell {
   break-inside: avoid;
   page-break-inside: avoid;
@@ -213,6 +229,7 @@ export default {
 table.gridtable {
   font-family: verdana, arial, sans-serif;
   font-size: 11px;
+  line-height: normal;
   color: #333333;
   border-width: 1px;
   border-color: #666666;
@@ -240,56 +257,56 @@ table.gridtable td {
 .text-center {
   text-align: center;
 }
-</style>
 
-<style media="print">
-/* 打印时隐藏非打印区域 */
-.noPrint {
-  display: none !important;
-}
+/* 打印时样式 */
+@media print {
+  .noPrint {
+    display: none !important;
+  }
 
-@page {
-  size: A4 portrait;
-  margin: 5mm;
-}
+  @page {
+    size: A4 portrait;
+    margin: 5mm;
+  }
 
-.print-content {
-  width: auto !important;
-  margin: 0 !important;
-}
+  .print-content {
+    width: auto !important;
+    margin: 0 !important;
+  }
 
-/* 打印时隐藏滑块配置区域 */
-.print-content .ant-row {
-  display: none !important;
-}
+  /* 打印时隐藏控制面板 */
+  .print-controls {
+    display: none !important;
+  }
 
-#print-container-batch {
-  background: white !important;
-  padding: 0 !important;
-  gap: 4px !important;
-}
+  #print-container-batch {
+    background: white !important;
+    padding: 0 !important;
+    width: 100% !important;
+  }
 
-.label-cell {
-  break-inside: avoid !important;
-  page-break-inside: avoid !important;
-}
+  .label-cell {
+    break-inside: avoid !important;
+    page-break-inside: avoid !important;
+  }
 
-table.gridtable {
-  font-family: verdana, arial, sans-serif;
-  font-size: 11px;
-  color: #333333;
-  border-width: 1px;
-  border-color: #666666;
-  border-collapse: collapse;
-}
+  table.gridtable {
+    font-family: verdana, arial, sans-serif;
+    font-size: 11px;
+    color: #333333;
+    border-width: 1px;
+    border-color: #666666;
+    border-collapse: collapse;
+  }
 
-table.gridtable td {
-  border-width: 1px;
-  padding: 2px 4px;
-  border-style: solid;
-  color: black;
-  font-weight: bold;
-  border-color: #666666;
-  background-color: #ffffff !important;
+  table.gridtable td {
+    border-width: 1px;
+    padding: 2px 4px;
+    border-style: solid;
+    color: black;
+    font-weight: bold;
+    border-color: #666666;
+    background-color: #ffffff !important;
+  }
 }
 </style>