打印预览

klp-ui/src/views/wms/stockIo/index.vue

@@ -209,7 +209,7 @@
     <el-drawer
       title="条码打印"
       :visible.sync="drawerBarcodeVisible"
-      size="90%"
+      size="100%"
       direction="btt"
       :with-header="true"
     >

klp-ui/src/views/wms/stockIo/panels/barcode.vue

@@ -2,12 +2,7 @@
   <div class="barcode-3col-layout">
     <!-- 预览区 -->
     <div class="barcode-preview-col">
-      <div class="preview-toolbar">
+      <div class="iframe-wrapper">
-        <span>缩放：</span>
-        <el-slider v-model="previewScale" :min="0.3" :max="2" :step="0.01" style="width:180px;display:inline-block;" />
-        <span style="margin-left:8px;">{{ Math.round(previewScale*100) }}%</span>
-      </div>
-      <div class="iframe-wrapper" :style="iframeWrapperStyle">
         <iframe ref="previewIframe" class="barcode-iframe" frameborder="0" :style="iframeStyle"></iframe>
       </div>
     </div>
@@ -32,29 +27,44 @@
           <el-form-item label="条码高度">
             <el-input-number v-model="barcodeHeight" :min="20" :max="200" />
           </el-form-item>
+          <el-form-item label="纸张尺寸">
+            <el-select v-model="paperSize" placeholder="请选择纸张尺寸" style="width: 160px">
+              <el-option label="A4 (210mm x 297mm)" value="A4" />
+              <el-option label="A5 (148mm x 210mm)" value="A5" />
+              <el-option label="A6 (105mm x 148mm)" value="A6" />
+              <el-option label="自定义" value="custom" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="paperSize==='custom'" label="自定义宽度(mm)">
+            <el-input-number v-model="customPaperWidth" :min="50" :max="500" />
+          </el-form-item>
+          <el-form-item v-if="paperSize==='custom'" label="自定义高度(mm)">
+            <el-input-number v-model="customPaperHeight" :min="50" :max="500" />
+          </el-form-item>
+          <el-form-item label="方向">
+            <el-radio-group v-model="paperOrientation">
+              <el-radio label="portrait">纵向</el-radio>
+              <el-radio label="landscape">横向</el-radio>
+            </el-radio-group>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="handlePrint">打印</el-button>
           </el-form-item>
         </el-form>
         <el-form v-else label-width="80px" size="small" label-position="top">
           <el-form-item label="条码明细">
-            <el-table :data="barcodeConfigs" size="mini" border style="width:100%;">
+            <div v-for="(cfg, idx) in barcodeConfigs" :key="idx" style="margin-bottom: 16px; border: 1px solid #eee; border-radius: 4px; padding: 12px 16px; background: #fafbfc;">
-              <el-table-column label="条码内容" prop="code" width="90" align="center" show-overflow-tooltip>
+              <div style="margin-bottom: 8px; font-weight: bold; color: #666;">条码 {{ idx + 1 }}</div>
-                <template slot-scope="scope">
+              <el-form-item label="条码内容" label-width="70px" style="margin-bottom: 8px;">
-                  <el-input type="textarea" v-model="scope.row.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
+                <el-input type="textarea" v-model="cfg.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
-                </template>
+              </el-form-item>
-              </el-table-column>
+              <el-form-item label="数量" label-width="70px" style="margin-bottom: 8px;">
-              <el-table-column label="数量" width="180" align="center">
+                <el-input-number v-model.number="cfg.count" :min="1" :max="100" size="mini" />
-                <template slot-scope="scope">
+              </el-form-item>
-                  <el-input-number v-model.number="scope.row.count" :min="1" :max="100" size="mini" />
+              <el-form-item label="下方文字" label-width="70px" style="margin-bottom: 0;">
-                </template>
+                <el-input type="textarea" v-model="cfg.textTpl" size="mini" placeholder="如 箱号" />
-              </el-table-column>
+              </el-form-item>
-              <el-table-column label="下方文字模板" align="center">
+            </div>
-                <template slot-scope="scope">
-                  <el-input v-model="scope.row.textTpl" size="mini" placeholder="如 箱号" />
-                </template>
-              </el-table-column>
-            </el-table>
           </el-form-item>
         </el-form>
       </div>
@@ -80,7 +90,11 @@ export default {
       barcodeHeight: 180, // 二维码建议宽高一致
       barcodeConfigs: [], // [{code, count, textTpl}]
       previewScale: 1, // 预览缩放比例
-      activeTab: 'layout'
+      activeTab: 'layout',
+      paperSize: 'A4',
+      paperOrientation: 'portrait',
+      customPaperWidth: 210,
+      customPaperHeight: 297
     };
   },
   computed: {
@@ -125,26 +139,16 @@ export default {
       return rows;
     },
     iframeStyle() {
+      const { width, height } = this.getPaperPx();
       return {
-        transform: `scale(${this.previewScale})`,
+        width: width + 'px',
-        'transform-origin': 'top left',
+        minHeight: height + 'px',
-        width: '794px',
+        height: height + 'px',
-        height: 'auto',
-        overflow: 'hidden',
         background: '#fff',
         border: 'none',
-        display: 'block'
+        display: 'block',
-      };
+        margin: 0,
-    },
+        padding: 0
-    iframeWrapperStyle() {
-      return {
-        width: `${794 * this.previewScale}px`,
-        minHeight: `${1123 * this.previewScale}px`,
-        overflow: 'auto',
-        background: '#f8f8f8',
-        padding: '16px 0',
-        display: 'flex',
-        justifyContent: 'center'
       };
     }
   },
@@ -171,7 +175,11 @@ export default {
     perRow() { this.$nextTick(this.renderPreviewIframe); },
     barcodeWidth() { this.$nextTick(this.renderPreviewIframe); },
     barcodeHeight() { this.$nextTick(this.renderPreviewIframe); },
-    previewScale() {}
+    previewScale() { this.$nextTick(this.renderPreviewIframe); },
+    paperSize() { this.$nextTick(this.renderPreviewIframe); },
+    paperOrientation() { this.$nextTick(this.renderPreviewIframe); },
+    customPaperWidth() { this.$nextTick(this.renderPreviewIframe); },
+    customPaperHeight() { this.$nextTick(this.renderPreviewIframe); }
   },
   methods: {
     getBarcodeId(row, col) {
@@ -188,14 +196,36 @@ export default {
       }
       return code;
     },
+    getPaperPx() {
+      // mm to px, 1mm ≈ 3.78px
+      let width, height;
+      if (this.paperSize === 'A4') {
+        width = 210 * 3.78;
+        height = 297 * 3.78;
+      } else if (this.paperSize === 'A5') {
+        width = 148 * 3.78;
+        height = 210 * 3.78;
+      } else if (this.paperSize === 'A6') {
+        width = 105 * 3.78;
+        height = 148 * 3.78;
+      } else {
+        width = this.customPaperWidth * 3.78;
+        height = this.customPaperHeight * 3.78;
+      }
+      if (this.paperOrientation === 'landscape') {
+        return { width: height, height: width };
+      }
+      return { width, height };
+    },
     getPrintHtml() {
+      const { width, height } = this.getPaperPx();
       let html = `
         <html>
           <head>
             <title>打印二维码</title>
             <style>
               body { margin: 0; padding: 0; background: #fff; }
-              .barcode-list { width: 794px; margin: 0 auto; background: #fff; }
+              .barcode-list { width: ${width}px; min-height: ${height}px; margin: 0 auto; background: #fff; }
               .barcode-row { display: flex; margin-bottom: 24px; }
               .barcode-item { flex: 1; text-align: center; }
               .barcode-text { margin-top: 8px; font-size: 14px; }
@@ -275,13 +305,17 @@ export default {
   padding: 24px 0 24px 24px;
   display: flex;
   flex-direction: column;
+  height: 90vh;
+  overflow: auto;
 }
 .barcode-right-col {
   width: 420px;
   min-width: 320px;
+  padding: 16px;
   display: flex;
   flex-direction: column;
   background: #fafbfc;
+  height: 90vh;
 }
 .barcode-control-bar {
   border-bottom: 1px solid #eee;
@@ -290,8 +324,9 @@ export default {
 }
 .barcode-settings-panel {
   flex: 1;
-  padding: 16px;
   overflow: auto;
+  min-height: 0;
+  max-height: calc(90vh - 48px); /* 48px 约为tabs高度，可根据实际调整 */
 }
 .preview-toolbar {
   margin-bottom: 12px;
@@ -300,15 +335,17 @@ export default {
 }
 .iframe-wrapper {
   width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   background: #f8f8f8;
-  overflow-x: auto;
+  overflow: auto;
 }
 .barcode-iframe {
-  width: 794px;
+  /* width、height 由:style绑定动态控制 */
-  min-height: 1123px;
+  min-width: 0;
+  min-height: 0;
   border: none;
   background: #fff;
   border-radius: 4px;