yufei0306
6 months ago
5 changed files with 394 additions and 1 deletions
@ -0,0 +1,287 @@ |
|||
<template> |
|||
<view class="content" style="padding:30rpx 20rpx 100rpx;min-height: calc(100vh - 120rpx);"> |
|||
<!-- 只用于展示页面 --> |
|||
<view class="box" v-for="(item,index) in data" :key='index' style="margin-bottom: 20rpx;"> |
|||
<view class="left"> |
|||
<view class="left-item"> |
|||
<view class="label">物品代码</view> |
|||
<view class="value" id="name1">{{item.itemCode}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">物品名称</view> |
|||
<view class="value" id="name2">{{item.itemName}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">物料描述</view> |
|||
<view class="value">{{item.itemDesc1}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">包装号</view> |
|||
<view class="value">{{item.relateNumber}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">生产线</view> |
|||
<view class="value">{{item.productionLineCode}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">数量</view> |
|||
<view class="value">{{item.qty}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="image"> |
|||
<l-qrcode ref="qrcodeRef" :value="item.barcodeString" size="300rpx"></l-qrcode> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">批次</view> |
|||
<view class="value">{{item.batch}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">班次</view> |
|||
<view class="value">{{item.shiftCode}}</view> |
|||
</view> |
|||
<view class="left-item" > |
|||
<view class="label">打印时间</view> |
|||
<view class="value">{{item.printTimes}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;"> |
|||
<button @click="printImage" |
|||
style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印</button> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// 打印页面的模板 |
|||
const htmlFileUrl = '/hybrid/html/point.html'; |
|||
import { |
|||
pathToBase64 |
|||
} from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名 |
|||
// #ifdef APP |
|||
var testModule = uni.requireNativePlugin("TestModule") |
|||
// #endif |
|||
|
|||
export default { |
|||
name: 'pointProductReceipt', |
|||
data() { |
|||
return { |
|||
data: {}, |
|||
newHtmlContent: '', //打印传入的html |
|||
isLoadFinish: false, |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
// #ifdef APP |
|||
// 打印 |
|||
printImage() { |
|||
testModule.doHTMLPrint(this.newHtmlContent) |
|||
}, |
|||
// 读取html文件 |
|||
readFile(path, callback) { |
|||
plus.io.resolveLocalFileSystemURL(path, function(entry) { |
|||
entry.file(function(file) { |
|||
var reader = new plus.io.FileReader(); |
|||
reader.onloadend = function(e) { |
|||
callback(e.target.result); |
|||
}; |
|||
reader.readAsText(file); |
|||
}, function(e) { |
|||
console.log("读取文件失败：" + e.message); |
|||
}); |
|||
}, function(e) { |
|||
console.log("获取图片资源失败：" + e.message); |
|||
}); |
|||
} |
|||
// #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.itemCode}</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="label">物品名称</div> |
|||
<div class="value" id="name2">${item.itemName}</div> |
|||
</div> |
|||
<view class="left-item"> |
|||
<view class="label">物料描述</view> |
|||
<view class="value">{{item.itemDesc1}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">包装号</view> |
|||
<view class="value">{{item.relateNumber}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">生产线</view> |
|||
<view class="value">{{item.productionLineCode}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">数量</view> |
|||
<view class="value">{{item.qty}}</view> |
|||
</view> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="image"> |
|||
<img id='image1' src="${item.barcodeBase64}" alt="" /> |
|||
</div> |
|||
<view class="left-item"> |
|||
<view class="label">批次</view> |
|||
<view class="value">{{item.batch}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">班次</view> |
|||
<view class="value">{{item.shiftCode}}</view> |
|||
</view> |
|||
<view class="left-item"> |
|||
<view class="label">打印时间</view> |
|||
<view class="value">{{item.printTimes}}</view> |
|||
</view> |
|||
</div> |
|||
</div>` |
|||
}) |
|||
this.newHtmlContent = this.newHtmlContent.replace( |
|||
"mainBody", str); //替换物品代码 |
|||
console.log(this.newHtmlContent) |
|||
}); |
|||
|
|||
} |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
if (option.points) { |
|||
this.data = JSON.parse(option.points); |
|||
} |
|||
}, |
|||
async onShow() { |
|||
// 获取数据 |
|||
// this.data = [{ |
|||
// itemNumber: '555555', |
|||
// itemName: 'hahah', |
|||
// referenceOrderRow: '55', |
|||
// referenceOrderCode: '55', |
|||
// supplierCode: '555', |
|||
// packageCode: '9999-8888', |
|||
// amount: '55', |
|||
// 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;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'] |
|||
let str = '' |
|||
el.forEach(async (item, index) => { |
|||
await item.canvasToTempFilePath({ |
|||
success: async (res) => { |
|||
// 将临时路径转换成base64 |
|||
await pathToBase64(res.tempFilePath).then(base64 => { |
|||
this.data[index].barcodeBase64 = base64 |
|||
if (index == el.length - 1) { |
|||
this.isLoadFinish = true |
|||
} |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}) |
|||
}, |
|||
fail(err) { |
|||
console.log('err:::', err) |
|||
} |
|||
}) |
|||
|
|||
}) |
|||
|
|||
}) |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.box { |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
|
|||
} |
|||
|
|||
.left { |
|||
border-top: 1px solid #b1b1b1; |
|||
border-left: 1px solid #b1b1b1; |
|||
flex: 1; |
|||
} |
|||
|
|||
.left-item { |
|||
display: flex; |
|||
|
|||
} |
|||
|
|||
.label { |
|||
border-bottom: 1px solid #b1b1b1; |
|||
border-right: 1px solid #b1b1b1; |
|||
width: 140rpx; |
|||
padding: 0px 10rpx; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
} |
|||
|
|||
.value { |
|||
border-bottom: 1px solid #b1b1b1; |
|||
border-right: 1px solid #b1b1b1; |
|||
padding: 0px 5px; |
|||
height: 100rpx; |
|||
flex: 1; |
|||
width: 0px; |
|||
display: flex; |
|||
align-items: center; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
.right { |
|||
width: 300rpx; |
|||
} |
|||
|
|||
.image { |
|||
width: 100%; |
|||
height: 301rpx; |
|||
border-bottom: 1px solid #b1b1b1; |
|||
border-top: 1px solid #b1b1b1; |
|||
border-right: 1px solid #b1b1b1; |
|||
} |
|||
|
|||
.image img { |
|||
width: calc(100% - 4px); |
|||
height: calc(100% - 4px); |
|||
margin: 4rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,29 @@ |
|||
<template> |
|||
<view v-if="webUrl"> |
|||
<web-view :webview-styles="webviewStyles" :src="`${webUrl}`"></web-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
webUrl: '', |
|||
webviewStyles: { |
|||
progress: { |
|||
color: "#FF3333" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
src: { |
|||
type: [String], |
|||
default: null |
|||
} |
|||
}, |
|||
onLoad(event) { |
|||
this.webUrl = event.url |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue