DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

打印预览

Browse Source
This commit is contained in:
砂糖
2025-07-24 10:49:23 +08:00
parent 1cd943473f
commit 57ee51bf0b
2 changed files with 85 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
klp-ui/src/views/wms/stockIo/index.vue
View File

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

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

@@ -2,12 +2,7 @@
<div class="barcode-3col-layout">
<!-- 预览区 -->
<div class="barcode-preview-col">
<div class="preview-toolbar">
<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">
<div class="iframe-wrapper">
<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%;">
<el-table-column label="条码内容" prop="code" width="90" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<el-input type="textarea" v-model="scope.row.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
</template>
</el-table-column>
<el-table-column label="数量" width="180" align="center">
<template slot-scope="scope">
<el-input-number v-model.number="scope.row.count" :min="1" :max="100" size="mini" />
</template>
</el-table-column>
<el-table-column label="下方文字模板" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.textTpl" size="mini" placeholder="如 箱号" />
</template>
</el-table-column>
</el-table>
<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;">
<div style="margin-bottom: 8px; font-weight: bold; color: #666;">条码 {{ idx + 1 }}</div>
<el-form-item label="条码内容" label-width="70px" style="margin-bottom: 8px;">
<el-input type="textarea" v-model="cfg.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
</el-form-item>
<el-form-item label="数量" label-width="70px" style="margin-bottom: 8px;">
<el-input-number v-model.number="cfg.count" :min="1" :max="100" size="mini" />
</el-form-item>
<el-form-item label="下方文字" label-width="70px" style="margin-bottom: 0;">
<el-input type="textarea" v-model="cfg.textTpl" size="mini" placeholder="如 箱号" />
</el-form-item>
</div>
</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})`,
'transform-origin': 'top left',
width: '794px',
height: 'auto',
overflow: 'hidden',
width: width + 'px',
minHeight: height + 'px',
height: height + 'px',
background: '#fff',
border: 'none',
display: 'block'
};
},
iframeWrapperStyle() {
return {
width: `${794 * this.previewScale}px`,
minHeight: `${1123 * this.previewScale}px`,
overflow: 'auto',
background: '#f8f8f8',
padding: '16px 0',
display: 'flex',
justifyContent: 'center'
display: 'block',
margin: 0,
padding: 0
};
}
},
@@ -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;
min-height: 1123px;
/* width、height 由:style绑定动态控制 */
min-width: 0;
min-height: 0;
border: none;
background: #fff;
border-radius: 4px;