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-08-16 10:48:25 +08:00
parent 9369d54752
commit 1cf7ba0287
2 changed files with 270 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
klp-ui/src/views/wms/print/index.vue
View File

@@ -1,8 +1,32 @@
<template>
<div style="position: relative;">
<el-select v-model="stockIoId" placeholder="请选择盘点单" style="position: absolute; top: 10px; left: 10px;">
<el-option v-for="item in stockIoList" :key="item.stockIoId" :label="item.stockIoCode" :value="item.stockIoId" />
</el-select>
<div style="position: relative; padding-top: 60px;">
<div style="position: absolute; top: 10px; left: 10px;">
<!-- 策略切换单选框 -->
<el-radio-group
v-model="currentStrategy"
size="small"
>
<el-radio label="stockIo">盘点单</el-radio>
<el-radio label="order">订单</el-radio>
<el-radio label="purchase">采购计划</el-radio>
</el-radio-group>
<!-- 动态下拉选择框，根据策略切换数据源 -->
<el-select
v-model="currentId"
:placeholder="`请选择${strategyLabels[currentStrategy]}`"
style="width: 200px;"
>
<el-option
v-for="item in currentList"
:key="item[keyField]"
:label="item[labelField]"
:value="item[keyField]"
/>
</el-select>
</div>
<div class="print-container" v-loading="loading">
<BarCode :barcodes="drawerBarcodeData" />
</div>
@@ -13,60 +37,190 @@
import BarCode from '../stockIo/panels/barcode.vue';
import { listStockIo } from '@/api/wms/stockIo';
import { listStockIoDetail } from '@/api/wms/stockIoDetail';
import { listOrder } from '@/api/wms/order';
import { listOrderDetail } from '@/api/wms/orderDetail';
import { listPurchasePlan } from '@/api/wms/purchasePlan';
import { listPurchasePlanDetail } from '@/api/wms/purchasePlanDetail';
import { mapState } from 'vuex';
import { ITEM_TYPE } from '../../../utils/enums';
// 策略配置 - 集中管理各策略的元数据
const strategyMetadata = {
stockIo: {
label: '盘点单',
listKey: 'stockIoList',
keyField: 'stockIoId',
labelField: 'stockIoCode'
},
order: {
label: '订单',
listKey: 'orderList',
keyField: 'orderId',
labelField: 'orderCode'
},
purchase: {
label: '采购计划',
listKey: 'purchaseList',
keyField: 'planId',
labelField: 'planCode'
}
};
// 策略实现 - 封装各策略的具体业务逻辑
const strategies = {
stockIo: {
// 加载列表数据
list: (vm) => {
if (vm.stockIoList.length) return;
vm.loading = true;
listStockIo({ pageNum: 1, pageSize: 9999 }).then(res => {
vm.stockIoList = res.rows || [];
}).finally(() => {
vm.loading = false;
});
},
// 获取条码数据
getBarcodeData: (vm) => {
if (!vm.currentId) return;
vm.loading = true;
listStockIoDetail({ stockIoId: vm.currentId }).then(res => {
const details = res.rows || [];
vm.drawerBarcodeData = details
.filter(el => el.recordType === 0)
.map(item => ({
code: encodeURIComponent(`${item.itemType}__${item.itemId || ''}`),
count: Math.min(item.quantity, 10),
textTpl: item.itemType === ITEM_TYPE.PRODUCT
? `${vm.productMap[item.itemId]?.productName}[${vm.productMap[item.itemId]?.productCode}](${item.quantity})`
: `${vm.rawMaterialMap[item.itemId]?.rawMaterialName}[${vm.rawMaterialMap[item.itemId]?.rawMaterialCode}](${item.quantity})`
}));
}).finally(() => {
vm.loading = false;
});
}
},
order: {
list: (vm) => {
if (vm.orderList.length) return;
vm.loading = true;
listOrder({ pageNum: 1, pageSize: 9999 }).then(res => {
vm.orderList = res.rows || [];
}).finally(() => {
vm.loading = false;
});
},
getBarcodeData: (vm) => {
if (!vm.currentId) return;
vm.loading = true;
listOrderDetail({ orderId: vm.currentId }).then(res => {
const details = res.rows || [];
vm.drawerBarcodeData = details.map(item => ({
code: encodeURIComponent(`product__${item.productId || ''}`),
count: Math.min(item.quantity, 10),
textTpl: `${vm.productMap[item.productId]?.productName}[${vm.productMap[item.productId]?.productCode}](${item.quantity})`
}));
}).finally(() => {
vm.loading = false;
});
}
},
purchase: {
list: (vm) => {
if (vm.purchaseList.length) return;
vm.loading = true;
listPurchasePlan({ pageNum: 1, pageSize: 9999 }).then(res => {
vm.purchaseList = res.rows || [];
}).finally(() => {
vm.loading = false;
});
},
getBarcodeData: (vm) => {
if (!vm.currentId) return;
vm.loading = true;
listPurchasePlanDetail({ planId: vm.currentId }).then(res => {
const details = res.rows || [];
vm.drawerBarcodeData = details.map(item => ({
code: encodeURIComponent(`raw_material__${item.rawMaterialId || ''}`),
count: Math.min(item.quantity, 10),
textTpl: `${vm.rawMaterialMap[item.rawMaterialId]?.rawMaterialName}[${vm.rawMaterialMap[item.rawMaterialId]?.rawMaterialCode}](${item.quantity})`
}));
}).finally(() => {
vm.loading = false;
});
}
}
};
export default {
name: 'Print',
components: {
BarCode
},
components: { BarCode },
data() {
return {
activeTab: 'layout',
stockIoList: [],
stockIoId: '',
drawerBarcodeData: {},
loading: false
}
currentStrategy: 'stockIo', // 默认策略
currentId: '', // 当前选中的ID
stockIoList: [], // 盘点单列表
orderList: [], // 订单列表
purchaseList: [], // 采购计划列表
drawerBarcodeData: [], // 条码数据
loading: false // 加载状态
};
},
computed: {
...mapState({
rawMaterialMap: state => state.category.rawMaterialMap,
productMap: state => state.category.productMap
})
},
watch: {
stockIoId: {
handler(newVal) {
console.log(newVal, '数据侦听');
this.loading = true;
listStockIoDetail({ stockIoId: newVal }).then(res => {
const details = res.rows || [];
// 拼接条码内容 stockIoId_warehouseId_materialId_quantity
const barcodes = details.filter(el => el.recordType == 0).map(item => {
return {
code: encodeURIComponent(`${item.itemType}__${item.itemId || ''}`),
count: Math.min(item.quantity, 10),
textTpl: item.itemType == ITEM_TYPE.PRODUCT ?
`${this.productMap[item.itemId]?.productName}[${this.productMap[item.itemId]?.productCode}](${item.quantity})`
: `${this.rawMaterialMap[item.itemId]?.rawMaterialName}[${this.rawMaterialMap[item.itemId]?.rawMaterialCode}](${item.quantity})`
}
});
this.drawerBarcodeData = barcodes;
}).finally(() => {
this.loading = false;
});
}
}),
// 策略标签映射
strategyLabels() {
return Object.keys(strategyMetadata).reduce((obj, key) => {
obj[key] = strategyMetadata[key].label;
return obj;
}, {});
},
// 当前策略对应的列表数据
currentList() {
return this[strategyMetadata[this.currentStrategy].listKey] || [];
},
// 当前策略的主键字段
keyField() {
return strategyMetadata[this.currentStrategy].keyField;
},
// 当前策略的显示字段
labelField() {
return strategyMetadata[this.currentStrategy].labelField;
}
},
created() {
listStockIo({ pageNum: 1, pageSize: 9999 }).then(res => {
this.stockIoList = res.rows;
});
watch: {
// 策略切换时的处理
currentStrategy: {
handler(newVal) {
this.currentId = ''; // 清空选择
this.drawerBarcodeData = []; // 清空条码数据
// 加载对应策略的列表数据
if (strategies[newVal]?.list) {
strategies[newVal].list(this);
}
},
immediate: true // 初始化时执行
},
// 选中项变化时的处理
currentId(newVal) {
if (!newVal) {
this.drawerBarcodeData = [];
return;
}
// 获取对应策略的条码数据
if (strategies[this.currentStrategy]?.getBarcodeData) {
strategies[this.currentStrategy].getBarcodeData(this);
}
}
}
}
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss">
.print-container {
margin-top: 20px;
padding: 20px;
}
</style>

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

@@ -18,6 +18,7 @@
<!-- 设置区 -->
<div class="barcode-settings-panel">
<el-form v-if="activeTab==='layout'" label-width="80px" size="small" label-position="top">
<!-- 排版设置内容保持不变 -->
<el-form-item label="每行数量">
<el-input-number v-model="perRow" :min="1" :max="10" />
</el-form-item>
@@ -51,7 +52,17 @@
<el-form v-else label-width="80px" size="small" label-position="top">
<el-form-item label="二维码明细">
<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>
<div style="margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;">
<span style="font-weight: bold; color: #666;">条码 {{ idx + 1 }}</span>
<el-button
type="text"
size="mini"
@click="saveAsImage(cfg.code, cfg.textTpl || cfg.code, idx)"
icon="el-icon-download"
>
另存为图片
</el-button>
</div>
<el-form-item label="二维码内容" label-width="70px" style="margin-bottom: 8px;">
<el-input disabled type="textarea" v-model="cfg.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
</el-form-item>
@@ -70,7 +81,6 @@
</template>
<script>
// import JsBarcode from 'jsbarcode';
import QRCode from 'qrcode';
export default {
name: 'BarcodeGenerator',
@@ -271,16 +281,74 @@ export default {
if (!iframe) return;
iframe.contentWindow.focus();
iframe.contentWindow.print();
},
/**
* 保存二维码为图片
* @param {string} code 二维码内容
* @param {string} text 下方文字
* @param {number} index 索引，用于生成文件名
*/
async saveAsImage(code, text, index) {
try {
// 创建临时canvas用于绘制二维码和文字
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 计算总高度（二维码高度 + 文字区域高度）
const textHeight = 30; // 文字区域高度
canvas.width = this.barcodeWidth;
canvas.height = this.barcodeHeight + textHeight;
// 绘制二维码
const qrCanvas = document.createElement('canvas');
qrCanvas.width = this.barcodeWidth;
qrCanvas.height = this.barcodeHeight;
await QRCode.toCanvas(qrCanvas, code, {
width: this.barcodeWidth,
height: this.barcodeHeight,
margin: 0
});
// 将二维码绘制到主canvas
ctx.drawImage(qrCanvas, 0, 0);
// 绘制文字
ctx.fillStyle = '#000';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText(text, this.barcodeWidth / 2, this.barcodeHeight + 5);
// 创建图片链接并下载
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
// 生成文件名（使用索引和内容摘要）
const fileName = `二维码_${index + 1}_${code.substring(0, 10)}.png`;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
this.$message.success('图片保存成功');
} catch (error) {
console.error('保存图片失败:', error);
this.$message.error('保存图片失败，请重试');
}
}
},
mounted() {
this.barcodeConfigs = this.barcodes.map(b => ({ code: b, count: 1, textTpl: b }));
this.barcodeConfigs = this.barcodes?.map(b => ({ code: b, count: 1, textTpl: b })) || [];
this.renderPreviewIframe();
}
};
</script>
<style scoped>
/* 样式保持不变 */
.barcode-3col-layout {
display: flex;
flex-direction: row;
@@ -341,4 +409,4 @@ export default {
border-radius: 4px;
display: block;
}
</style>
</style>