fengyuan_yang
/
boying-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2025-11-13 

库位信息标签打印
master
fengyuan_yang 2 months ago
parent
3e363b946e
commit
aea6c77f81
2 changed files with 325 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 149
      src/views/modules/warehouse/LocationLabelPrint.vue
  2. 199
      src/views/modules/warehouse/location.vue

149
src/views/modules/warehouse/LocationLabelPrint.vue
View File

@ -0,0 +1,149 @@
<template>
<div class="label-container">
<!-- 标题栏 -->
<div class="label-header">
<div class="label-title">货位信息标签</div>
</div>
<!-- 内容区域 -->
<div class="label-content">
<!-- 左侧二维码 -->
<div class="qrcode-section">
<img :src="qrCodeDataUrl" />
</div>
<!-- 右侧信息 -->
<div class="info-section">
<div class="info-row">
<span class="info-text primary">货位编码：{{ locationData.locationId || '' }}</span>
</div>
<div class="info-row">
<span class="info-text">货位名称：{{ locationData.locationName || '' }}</span>
</div>
<div class="info-row">
<span class="info-text">所属仓库：{{ locationData.warehouseName || locationData.warehouseId || '' }}</span>
</div>
</div>
</div>
<!-- 底部提示 -->
<div class="label-footer">
请扫描二维码查看详情
</div>
</div>
</template>
<script>
export default {
name: 'LocationLabelPrint',
props: {
locationData: {
type: Object,
required: true,
default: () => ({
locationId: '',
locationName: '',
warehouseId: '',
warehouseName: ''
})
},
qrCodeDataUrl: {
type: String,
required: true,
default: ''
}
}
}
</script>
<style scoped>
.label-container {
width: 80mm;
height: 80mm;
display: flex;
flex-direction: column;
padding: 3mm;
box-sizing: border-box;
border: 1px solid #333;
background: #fff;
font-family: "Microsoft YaHei", Arial, sans-serif;
}
/* 标题栏 */
.label-header {
background: #F5F5F5;
padding: 2mm 0;
text-align: center;
margin-bottom: 3mm;
border-radius: 1mm;
}
.label-title {
font-size: 11pt;
font-weight: bold;
font-family: "Microsoft YaHei", sans-serif;
color: #333;
}
/* 内容区域 */
.label-content {
flex: 1;
display: flex;
align-items: center;
gap: 2mm;
}
/* 二维码区域 */
.qrcode-section {
display: flex;
align-items: center;
justify-content: center;
width: 25mm;
height: 25mm;
}
.qrcode-section img {
width: 25mm;
height: 25mm;
display: block;
}
/* 信息区域 */
.info-section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3mm;
}
.info-row {
display: flex;
align-items: center;
line-height: 1.5;
}
.info-text {
font-size: 10pt;
font-family: "Microsoft YaHei", sans-serif;
color: #000;
word-break: break-word;
line-height: 1.4;
}
.info-text.primary {
font-weight: bold;
}
/* 底部提示 */
.label-footer {
text-align: center;
font-size: 7pt;
font-family: "Microsoft YaHei", sans-serif;
color: #999;
padding-top: 2mm;
border-top: 1px solid #eee;
margin-top: 2mm;
}
</style>

199
src/views/modules/warehouse/location.vue
View File

@ -27,6 +27,7 @@
class="el-button el-button--primary el-button--medium">
{{buttons.download}}
</download-excel>
<el-button @click="printLocationLabels()" type="primary" :disabled="dataListSelections.length <= 0">打印</el-button>
<el-button v-if="isAuth(':prd:delete')" type="danger" @click="deleteHandle()"
:disabled="dataListSelections.length <= 0">{{ buttons.deleteList}}
@ -77,6 +78,12 @@
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column
v-for="(item,index) in columnList" :key="index"
:sortable="item.columnSortable"
@ -164,6 +171,8 @@
<script>
import column from "../common/column";
import LocationLabelPrint from './LocationLabelPrint.vue'
import Vue from 'vue'
import {
searchSysLanguagePackList,
searchSysLanguageParam,
@ -174,6 +183,7 @@
saveSysLanguageOne
} from "@/api/sysLanguage.js"
import getLodop from '@/utils/LodopFuncs.js'
import QRCode from 'qrcode'
import {
saveTableDefaultList,
saveTableUser,
@ -647,29 +657,172 @@
}
},
// 打印方式
printReport() {
alert(this.$store.state.user.site)
//
// const LODOP = getLodop()
// if (LODOP) {
// var strBodyStyle = '<style>'
// strBodyStyle += 'table { border-top: 1 solid #000000; border-left: 1 solid #000000; border-collapse:collapse; border-spacing:0;}'
// strBodyStyle += 'caption { line-height:2em; }'
// strBodyStyle += 'td { border-right: 1 solid #000000; border-bottom: 1 solid #000000; text-align:center; padding:2px 3px; font-size:11px;}'
// strBodyStyle += '</style>' //设置打印样式
// var strFormHtml = strBodyStyle + '<body>' + document.getElementById('commmon').innerHTML + '</body>' //获取打印内容
//
// LODOP.PRINT_INIT('') //初始化
// LODOP.PRINT_DESIGN();
// //LODOP.PREVIEW();
// //LODOP.PRINT();
//
// LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4') //设置横向
// LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //设置打印内容
// LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '') //设置预览窗口模式和大小
// LODOP.PREVIEW()
// }
// 生成标签HTML
generateLabelHtml(locationData, qrCodeDataUrl) {
// 创建临时容器
const tempDiv = document.createElement('div')
// 创建组件实例
const LabelComponent = Vue.extend(LocationLabelPrint)
const instance = new LabelComponent({
propsData: {
locationData: locationData,
qrCodeDataUrl: qrCodeDataUrl
}
})
// 挂载到临时容器
instance.$mount(tempDiv)
// 获取样式
const styles = Array.from(document.styleSheets)
.map(sheet => {
try {
return Array.from(sheet.cssRules)
.map(rule => rule.cssText)
.join('\n')
} catch (e) {
return ''
}
})
.join('\n')
// 组合HTML和样式
const fullHtml = `
<style>
.label-container {
width: 80mm;
height: 80mm;
display: flex;
align-items: center;
padding: 5mm;
box-sizing: border-box;
border: 2px solid #333;
}
.qrcode-section {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8mm;
}
.qrcode-section img {
width: 40mm;
height: 40mm;
}
.info-section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.info-row {
margin-bottom: 6mm;
}
.info-row:last-child {
margin-bottom: 0;
}
.info-label {
font-size: 13pt;
font-weight: bold;
color: #333;
margin-bottom: 2mm;
}
.info-value {
font-size: 11pt;
color: #000;
word-break: break-all;
}
</style>
${instance.$el.outerHTML}
`
// 销毁实例
instance.$destroy()
return fullHtml
},
// 打印货位标签
async printLocationLabels() {
if (this.dataListSelections.length === 0) {
this.$message.warning('请选择要打印的货位!')
return
}
const LODOP = getLodop()
if (!LODOP) {
this.$message.error('未检测到打印控件，请安装CLodop打印控件!')
return
}
try {
// 初始化打印
LODOP.PRINT_INIT('货位标签打印')
// 设置纸张尺寸：80mm x 80mm
LODOP.SET_PRINT_PAGESIZE(0, 800, 800, '')
// 循环打印每个选中的货位
for (let i = 0; i < this.dataListSelections.length; i++) {
const location = this.dataListSelections[i]
if (i > 0) {
LODOP.NEWPAGE() // 新页
}
// 绘制外边框（圆角效果）
LODOP.ADD_PRINT_RECT('3mm', '3mm', '74mm', '74mm', 0, 1)
// 添加标题背景条
LODOP.ADD_PRINT_RECT('8mm', '8mm', '64mm', '8mm', 0, 1)
const titleBg = LODOP.ADD_PRINT_RECT('8mm', '8mm', '64mm', '8mm', 0, 1)
LODOP.SET_PRINT_STYLEA(titleBg, "ItemType", 1)
LODOP.SET_PRINT_STYLEA(titleBg, "FillStyle", 1)
LODOP.SET_PRINT_STYLEA(titleBg, "FillColor", "#F5F5F5")
// 添加标题文字
const titleIndex = LODOP.ADD_PRINT_TEXT('9.5mm', '10mm', '60mm', '6mm', '货位信息标签')
LODOP.SET_PRINT_STYLEA(titleIndex, "FontName", "Microsoft YaHei")
LODOP.SET_PRINT_STYLEA(titleIndex, "FontSize", 11)
LODOP.SET_PRINT_STYLEA(titleIndex, "Bold", 1)
LODOP.SET_PRINT_STYLEA(titleIndex, "Alignment", 2)
// 使用 LODOP 原生二维码打印功能（缩小尺寸）
const qrIndex = LODOP.ADD_PRINT_BARCODE('20mm', '10mm', '25mm', '25mm', 'QRCode', location.locationId)
LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeVersion", 4)
LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeErrorLevel", "M")
// 添加右侧信息（左右分布格式）
// 货位编码
const text1 = LODOP.ADD_PRINT_TEXT('22mm', '38mm', '36mm', '6mm', '货位编码：' + (location.locationId || ''))
LODOP.SET_PRINT_STYLEA(text1, "FontName", "Microsoft YaHei")
LODOP.SET_PRINT_STYLEA(text1, "FontSize", 10)
LODOP.SET_PRINT_STYLEA(text1, "Bold", 1)
// 货位名称
const text2 = LODOP.ADD_PRINT_TEXT('32mm', '38mm', '36mm', '6mm', '货位名称：' + (location.locationName || ''))
LODOP.SET_PRINT_STYLEA(text2, "FontName", "Microsoft YaHei")
LODOP.SET_PRINT_STYLEA(text2, "FontSize", 10)
// 所属仓库
const text3 = LODOP.ADD_PRINT_TEXT('42mm', '38mm', '36mm', '6mm', '所属仓库：' + (location.warehouseName || location.warehouseId || ''))
LODOP.SET_PRINT_STYLEA(text3, "FontName", "Microsoft YaHei")
LODOP.SET_PRINT_STYLEA(text3, "FontSize", 10)
// 添加底部文字（可选）
const footer = LODOP.ADD_PRINT_TEXT('68mm', '10mm', '60mm', '4mm', '请扫描二维码查看详情')
LODOP.SET_PRINT_STYLEA(footer, "FontName", "Microsoft YaHei")
LODOP.SET_PRINT_STYLEA(footer, "FontSize", 7)
LODOP.SET_PRINT_STYLEA(footer, "FontColor", "#999999")
LODOP.SET_PRINT_STYLEA(footer, "Alignment", 2)
}
// 预览打印
LODOP.PREVIEW()
} catch (error) {
console.error('打印失败:', error)
this.$message.error('打印失败: ' + error.message)
}
},
// 校验用户是否收藏
favoriteIsOk() {

Write Preview
Loading…
Cancel
Save