修改二维码生成

This commit is contained in:
liuhanqing
2025-08-21 16:01:14 +08:00
parent 26764255f6
commit 05ce4b6080
3 changed files with 146 additions and 86 deletions

View File

@@ -44,10 +44,12 @@
"vue": "2.6.12",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-easy-print": "^0.0.8",
"vue-i18n": "7.3.2",
"vue-qr": "^4.0.9",
"vue-router": "3.4.9",
"vuedraggable": "2.24.3",
"vuex": "3.6.0",
"vue-i18n": "7.3.2"
"vuex": "3.6.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.6",

View File

@@ -132,6 +132,7 @@
@pagination="getList"
/>
<!-- 添加或修改条码信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
@@ -164,17 +165,33 @@
<el-button @click="cancel">{{ $t('traycode.cancel') }}</el-button>
</div>
</el-dialog>
<!-- 打印模板 -->
<vue-easy-print v-show="true" ref="easyPrint2">
<div v-for="item in printData" :key="item.id" style="page-break-after:always" class="vue-easy-print">
<vue-qr :text='item.trayCode' :size="150" :margin="10" :align-item="center" :correctLevel="2"></vue-qr>
<div>
<span class="num">{{ item.trayCode }}</span>
</div>
</div>
</vue-easy-print>
</div>
</template>
<script>
import { listTraycode, getTraycode, delTraycode, addTraycode, updateTraycode } from "@/api/bas/traycode"
import { getLodop } from "@/plugins/LodopFuncs"
import { listTraycodeFormat} from "@/api/bas/traycodeFormat"
import { listTraycodeFormat } from "@/api/bas/traycodeFormat"
import vueEasyPrint from 'vue-easy-print'
import VueQr from 'vue-qr'
export default {
name: "Traycode",
components: {
vueEasyPrint,
VueQr
},
data() {
return {
// 设置标题
@@ -194,6 +211,7 @@ export default {
// 条码信息表格数据
traycodeList: [],
traycodeFormatList: [],
printData:[],
// 是否显示弹出层
open: false,
// 查询参数
@@ -335,45 +353,12 @@ export default {
},
/** 打印条码 */
printBarcode: function (row) {
try {
// 获取Lodop打印对象
let LODOP = getLodop()
if (!LODOP) {
this.$modal.msgError(this.$t('traycode.printControlError'))
return
}
LODOP.SET_SHOW_MODE("LANGUAGE", 0);
LODOP.PRINT_INITA(0, 0, 400, 300, this.$t('traycode.barcodePrint'));
LODOP.SET_PRINT_PAGESIZE(1, 400, 300, "");
LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW", 1);
if (Array.isArray(row)) {
// 批量打印
row.forEach(item => {
LODOP.NewPage();
// 居中打印二维码
LODOP.ADD_PRINT_BARCODE(50, 140, 120, 120, "QRCode", item.trayCode);
// 在二维码下方显示条码文本
LODOP.ADD_PRINT_TEXT(180, 100, 200, 30, item.trayCode);
LODOP.SET_PRINT_STYLEA(0, "Alignment", 2); // 文字居中
});
} else {
// 单个打印
LODOP.NewPage();
// 居中打印二维码
LODOP.ADD_PRINT_BARCODE(50, 140, 120, 120, "QRCode", row.trayCode);
// 在二维码下方显示条码文本
LODOP.ADD_PRINT_TEXT(180, 100, 200, 30, row.trayCode);
LODOP.SET_PRINT_STYLEA(0, "Alignment", 2); // 文字居中
}
LODOP.PREVIEW();
} catch (error) {
console.error(this.$t('traycode.printFailed'), error)
this.$modal.msgError(this.$t('traycode.printError', { error: error.message }))
}
this.printData = [row]
this.$nextTick(() => {
setTimeout(() => {
this.$refs.easyPrint2.print()
}, 100)
})
},
/** 批量打印按钮操作 */
handleBatchPrint() {
@@ -382,8 +367,12 @@ export default {
this.$modal.msgError(this.$t('traycode.selectPrintItems'));
return;
}
console.log(selection)
this.printBarcode(selection);
this.printData = selection;
this.$nextTick(() => {
setTimeout(() => {
this.$refs.easyPrint2.print()
}, 100)
});
},
}
}
@@ -394,4 +383,47 @@ export default {
.el-input {
width: 100%;
}
/* 打印样式 */
.vue-easy-print {
text-align: center;
}
.num {
display: block;
text-align: center;
font-size: 16px;
margin-top: 15px;
font-family: Arial, sans-serif;
}
.vue-qr {
display: block;
margin: 20px auto;
max-width: 100%;
}
@media print {
@page {
size: A4;
margin: 0;
}
body {
margin: 0;
}
.vue-easy-print {
padding: 20px;
}
.num {
font-size: 14px;
margin-top: 10px;
}
.vue-qr {
margin: 10px auto;
}
}
</style>

View File

@@ -171,6 +171,16 @@
:limit.sync="queryDetailParams.pageSize"
@pagination="getDetailList"
/>
<!-- 打印模板 -->
<vue-easy-print v-show="true" ref="easyPrint2">
<div v-for="item in printData" :key="item.stockinDetailId" style="page-break-after:always" class="vue-easy-print">
<vue-qr :text='item.stockinDetailId' :size="150" :margin="10" :align-item="center" :correctLevel="2"></vue-qr>
<div>
<span class="num">{{ item.stockinDetailId }}</span>
</div>
</div>
</vue-easy-print>
</div>
</template>
@@ -188,11 +198,18 @@ import {
import {listStockInDetail, barcodePrinting} from "@/api/in/stockInDetail"
import {getLodop} from "@/plugins/LodopFuncs.js"
import {listWarehouse} from "@/api/bas/warehouse";
import vueEasyPrint from 'vue-easy-print'
import VueQr from 'vue-qr'
export default {
name: "StockIn",
dicts: ['bill_resource', 'in_bill_status', 'in_bill_type'],
components: {
vueEasyPrint,
VueQr
},
data() {
return {
// 遮罩层
@@ -205,6 +222,7 @@ export default {
// 主表选中的数据
stockInListSelected: [],
stockInDetailListSelected: [],
printData:[],
// 非单个禁用
single: true,
detailSingle: true,
@@ -401,50 +419,16 @@ export default {
},
/** 打印条码按钮操作 */
handleBarcodePrinting(row){
let printData = this.stockInDetailListSelected
if (printData.length === 0) {
this.printData = this.stockInDetailListSelected
if (this.printData.length === 0) {
this.$modal.msgWarning(this.$t('inStockin.selectPrintData'))
return
}
console.log(printData)
this.printBarcode(printData)
},
/** 打印条码 */
printBarcode(printData) {
try {
// 获取Lodop打印对象
let LODOP = getLodop()
if (!LODOP) {
this.$modal.msgError(this.$t('inStockin.printFail'))
return
}
LODOP.SET_SHOW_MODE("LANGUAGE", 0);
LODOP.PRINT_INITA(10, 10, 1000, 800, "物资条码");
LODOP.SET_PRINT_PAGESIZE(1, 1000, 500, 0);
LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW", 1);
for (let i = 0; i < printData.length; i++) {
LODOP.NewPage();
LODOP.ADD_PRINT_BARCODE(17,35,120,120,"QRCode",printData[i].stockinDetailId);
LODOP.ADD_PRINT_TEXT(22,147,72,20,this.$t('inReceiveStockin.productId')+":");
LODOP.ADD_PRINT_TEXT(22,205,180,20,printData[i].productId);
LODOP.ADD_PRINT_TEXT(44,147,66,20,this.$t('inReceiveStockin.materialDesc')+":");
LODOP.ADD_PRINT_TEXT(44,206,180,35,printData[i].extraField.materialDesc);
LODOP.ADD_PRINT_TEXT(66,148,64,20,this.$t('inReceiveStockin.englishDesc')+":");
LODOP.ADD_PRINT_TEXT(66,205,180,20,printData[i].extraField.englishDesc);
LODOP.ADD_PRINT_TEXT(88,148,64,20,this.$t('inReceiveStockin.packingMethod')+":");
LODOP.ADD_PRINT_TEXT(88,205,180,20,printData[i].extraField.packingMethod);
LODOP.ADD_PRINT_TEXT(110,147,61,20,this.$t('inReceiveStockin.cartonNo')+":");
LODOP.ADD_PRINT_TEXT(110,196,180,20,printData[i].extraField.cartonNo);
}
LODOP.PREVIEW();
} catch (error) {
this.$modal.msgError(this.$t('inStockin.printFail1') + error.message)
}
this.$nextTick(() => {
setTimeout(() => {
this.$refs.easyPrint2.print()
}, 100)
})
},
getDetailList(stockinId) {
this.detailLoading = true;
@@ -475,4 +459,46 @@ export default {
width: auto;
min-width: fit-content;
}
/* 打印样式 */
.vue-easy-print {
text-align: center;
}
.num {
display: block;
text-align: center;
font-size: 16px;
margin-top: 15px;
font-family: Arial, sans-serif;
}
.vue-qr {
display: block;
margin: 20px auto;
max-width: 100%;
}
@media print {
@page {
size: A4;
margin: 0;
}
body {
margin: 0;
}
.vue-easy-print {
padding: 20px;
}
.num {
font-size: 14px;
margin-top: 10px;
}
.vue-qr {
margin: 10px auto;
}
}
</style>