|
@ -1,48 +1,48 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="content" style="padding:30rpx 20rpx;min-height: calc(100vh - 40rpx);"> |
|
|
<view class="content" style="padding:30rpx 20rpx 100rpx;min-height: calc(100vh - 120rpx);"> |
|
|
<!-- 只用于展示页面 --> |
|
|
<!-- 只用于展示页面 --> |
|
|
<view class="box"> |
|
|
<view class="box" v-for="(item,index) in data" :key='index' style="margin-bottom: 20rpx;"> |
|
|
<view class="left"> |
|
|
<view class="left"> |
|
|
<view class="left-item"> |
|
|
<view class="left-item"> |
|
|
<view class="label">物品代码</view> |
|
|
<view class="label">物品代码</view> |
|
|
<view class="value" id="name1">{{data.itemNumber}}</view> |
|
|
<view class="value" id="name1">{{item.itemNumber}}</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="left-item"> |
|
|
<view class="left-item"> |
|
|
<view class="label">物品名称</view> |
|
|
<view class="label">物品名称</view> |
|
|
<view class="value" id="name2">{{data.itemName}}</view> |
|
|
<view class="value" id="name2">{{item.itemName}}</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="left-item"> |
|
|
<view class="left-item"> |
|
|
<view class="label">供应商</view> |
|
|
<view class="label">供应商</view> |
|
|
<view class="value">{{data.supplierCode}}</view> |
|
|
<view class="value">{{item.supplierCode}}</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="left-item"> |
|
|
<view class="left-item"> |
|
|
<view class="label">包装号</view> |
|
|
<view class="label">包装号</view> |
|
|
<view class="value">{{data.packageCode}}</view> |
|
|
<view class="value">{{item.packageCode}}</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="left-item"> |
|
|
<view class="left-item"> |
|
|
<view class="label">订单行</view> |
|
|
<view class="label">订单行</view> |
|
|
<view class="value">{{data.referenceOrderRow}}</view> |
|
|
<view class="value">{{item.referenceOrderRow}}</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="right"> |
|
|
<view class="right"> |
|
|
<view class="image"> |
|
|
<view class="image"> |
|
|
<l-qrcode ref="qrcodeRef" :value="data.barcodeString" size="300rpx"></l-qrcode> |
|
|
<l-qrcode ref="qrcodeRef" :value="item.barcodeString" size="300rpx"></l-qrcode> |
|
|
</view> |
|
|
</view> |
|
|
<view class="left-item"> |
|
|
<view class="left-item"> |
|
|
<view class="label">订单号</view> |
|
|
<view class="label">订单号</view> |
|
|
<view class="value">{{data.referenceOrderCode}}</view> |
|
|
<view class="value">{{item.referenceOrderCode}}</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="left-item"> |
|
|
<view class="left-item"> |
|
|
<view class="label">数量</view> |
|
|
<view class="label">数量</view> |
|
|
<view class="value">{{data.amount}}</view> |
|
|
<view class="value">{{item.amount}}</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;"> |
|
|
<view class=""> |
|
|
|
|
|
<button @click="printImage" |
|
|
<button @click="printImage" |
|
|
style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印</button> |
|
|
style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印</button> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
@ -60,8 +60,8 @@ |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
data: {}, |
|
|
data: {}, |
|
|
newHtmlContent: '' //打印传入的html |
|
|
newHtmlContent: '', //打印传入的html |
|
|
|
|
|
isLoadFinish: false, |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
@ -89,51 +89,107 @@ |
|
|
} |
|
|
} |
|
|
// #endif |
|
|
// #endif |
|
|
}, |
|
|
}, |
|
|
|
|
|
watch: { |
|
|
|
|
|
isLoadFinish(newVal, oldVal) { |
|
|
|
|
|
if (newVal == true) { |
|
|
|
|
|
// 读取html文件将文件中的内容图换成当前页面的数据 |
|
|
|
|
|
let str = '' |
|
|
|
|
|
this.readFile(htmlFileUrl, (htmlContent) => { |
|
|
|
|
|
this.newHtmlContent = htmlContent |
|
|
|
|
|
this.data.forEach(item => { |
|
|
|
|
|
str += `<div class="box" style="page-break-before:always;"><br /> |
|
|
|
|
|
<div class="left"> |
|
|
|
|
|
<div class="left-item"> |
|
|
|
|
|
<div class="label">物品代码</div> |
|
|
|
|
|
<div class="value" id="name1">${item.itemNumber}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="left-item"> |
|
|
|
|
|
<div class="label">物品名称</div> |
|
|
|
|
|
<div class="value" id="name2">${item.itemName}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="left-item"> |
|
|
|
|
|
<div class="label">供应商</div> |
|
|
|
|
|
<div class="value">${item.supplierCode}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="left-item"> |
|
|
|
|
|
<div class="label">包装号</div> |
|
|
|
|
|
<div class="value">${item.packageCode}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="left-item"> |
|
|
|
|
|
<div class="label">订单行</div> |
|
|
|
|
|
<div class="value">${item.referenceOrderRow}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="right"> |
|
|
|
|
|
<div class="image"> |
|
|
|
|
|
<img id='image1' src="${item.barcodeBase64}" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="left-item"> |
|
|
|
|
|
<div class="label">订单号</div> |
|
|
|
|
|
<div class="value">${item.referenceOrderRow}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="left-item"> |
|
|
|
|
|
<div class="label">数量</div> |
|
|
|
|
|
<div class="value">${item.amount}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div>` |
|
|
|
|
|
}) |
|
|
|
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
|
|
|
"mainBody", str); //替换物品代码 |
|
|
|
|
|
console.log(this.newHtmlContent) |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
async onShow() { |
|
|
async onShow() { |
|
|
// 获取数据 |
|
|
// 获取数据 |
|
|
this.data = { |
|
|
this.data = [{ |
|
|
itemNumber: '555555', |
|
|
itemNumber: '555555', |
|
|
itemName: 'hahah', |
|
|
itemName: 'hahah', |
|
|
referenceOrderRow: '60', |
|
|
referenceOrderRow: '55', |
|
|
referenceOrderCode: '6000', |
|
|
referenceOrderCode: '55', |
|
|
supplierCode: '888', |
|
|
supplierCode: '555', |
|
|
packageCode: '9999-8888', |
|
|
packageCode: '9999-8888', |
|
|
amount: '6000', |
|
|
amount: '55', |
|
|
barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;' |
|
|
barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;', |
|
|
} |
|
|
barcodeBase64: '' |
|
|
this.$nextTick(() => { |
|
|
}, { |
|
|
|
|
|
itemNumber: '66', |
|
|
|
|
|
itemName: 'hahah', |
|
|
|
|
|
referenceOrderRow: '66', |
|
|
|
|
|
referenceOrderCode: '666', |
|
|
|
|
|
supplierCode: '66', |
|
|
|
|
|
packageCode: '66666', |
|
|
|
|
|
amount: '666666', |
|
|
|
|
|
barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;', |
|
|
|
|
|
barcodeBase64: '' |
|
|
|
|
|
}, { |
|
|
|
|
|
itemNumber: '66', |
|
|
|
|
|
itemName: 'hahah', |
|
|
|
|
|
referenceOrderRow: '66', |
|
|
|
|
|
referenceOrderCode: '666', |
|
|
|
|
|
supplierCode: '66', |
|
|
|
|
|
packageCode: '66666', |
|
|
|
|
|
amount: '666666', |
|
|
|
|
|
barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;', |
|
|
|
|
|
barcodeBase64: '' |
|
|
|
|
|
}] |
|
|
|
|
|
this.$nextTick(async () => { |
|
|
// 获取二维码图片临时路径 |
|
|
// 获取二维码图片临时路径 |
|
|
const el = this.$refs['qrcodeRef'] |
|
|
const el = this.$refs['qrcodeRef'] |
|
|
el.canvasToTempFilePath({ |
|
|
let str = '' |
|
|
|
|
|
el.forEach(async (item, index) => { |
|
|
|
|
|
await item.canvasToTempFilePath({ |
|
|
success: async (res) => { |
|
|
success: async (res) => { |
|
|
// 将临时路径转换成base64 |
|
|
// 将临时路径转换成base64 |
|
|
await pathToBase64(res.tempFilePath).then(base64 => { |
|
|
await pathToBase64(res.tempFilePath).then(base64 => { |
|
|
// 读取html文件将文件中的内容图换成当前页面的数据 |
|
|
this.data[index].barcodeBase64 = base64 |
|
|
this.readFile(htmlFileUrl, (htmlContent) => { |
|
|
if (index == el.length - 1) { |
|
|
this.newHtmlContent = htmlContent |
|
|
this.isLoadFinish = true |
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
} |
|
|
"replaceItemNumber", this.data |
|
|
|
|
|
.itemNumber); //替换物品代码 |
|
|
|
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
|
|
|
"replaceItemName", this.data.itemName |
|
|
|
|
|
); //替换物品名称 |
|
|
|
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
|
|
|
"replaceSupplierCode", this.data |
|
|
|
|
|
.supplierCode); //替换供应商 |
|
|
|
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
|
|
|
"replacePackageCode", this.data |
|
|
|
|
|
.packageCode); //替换包装号 |
|
|
|
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
|
|
|
"replaceReferenceOrderRow", this.data |
|
|
|
|
|
.referenceOrderRow); //替换订单行 |
|
|
|
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
|
|
|
"replaceReferenceOrderCode", this.data |
|
|
|
|
|
.referenceOrderCode); //替换订单号 |
|
|
|
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
|
|
|
"amount", this.data.amount); //替换数量 |
|
|
|
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
|
|
|
"replaceBase", base64); //替换二维码 |
|
|
|
|
|
}); |
|
|
|
|
|
}).catch(err => { |
|
|
}).catch(err => { |
|
|
console.log(err); |
|
|
console.log(err); |
|
|
}) |
|
|
}) |
|
@ -142,6 +198,9 @@ |
|
|
console.log('err:::', err) |
|
|
console.log('err:::', err) |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|