Browse Source

Merge branch 'master_hella' of http://dev.ccwin-in.com:3000/sfms3.0/sfms3.0-uniapp into master_hella

hella_online_20240829
niexiting 7 months ago
parent
commit
e91a0f5909
  1. 99
      src/hybrid/html/point.html
  2. 157
      src/pages/point/index.vue

99
src/hybrid/html/point.html

@ -1,59 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script src="../../api/img-to-base64.js"></script>
<script type="text/javascript">
document.addEventListener('plusready', function(){
document.addEventListener('plusready', function() {
//console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。")
});
// 解析URL参数
function getQueryParam(param) {
var searchParams = new URLSearchParams(window.location.search);
return searchParams.get(param);
}
// 使用函数获取参数
document.addEventListener('DOMContentLoaded', function() {
// var itemNumber = getQueryParam('itemNumber');
// var itemName = getQueryParam('itemName');
// var tempFilePath = getQueryParam('tempFilePath')
// document.getElementById('name1').innerText = itemNumber;
// document.getElementById('name2').innerText = itemName;
// // document.getElementById('image1').src = barcodeImage;
// console.log(99,tempFilePath)
// pathToBase64(tempFilePath){
// }
// pathToBase64(tempFilePath).then(base64 => {
// document.getElementById('image1').src = base64;
// }).catch(err => {
// console.log(err);
// })
// console.log(document.getElementById('name1'))
});
</script>
<style>
.box{
.box {
font-size: 14px;
display: flex;
}
.left{
.left {
border-top: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1;
flex: 1;
}
.left-item{
.left-item {
display: flex;
}
.label{
.label {
border-bottom: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
width: 60px;
@ -61,7 +38,8 @@
height: 67px;
line-height: 67px;
}
.value{
.value {
border-bottom: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
padding: 0px 5px;
@ -72,62 +50,27 @@
align-items: center;
word-wrap: break-word;
}
.right{
.right {
width: 200px;
}
.image{
.image {
width: 100%;
height: 202px;
border-bottom: 1px solid #b1b1b1;
border-top: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
}
.image img{
.image img {
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 2px;
}
</style>
</head>
<body>
<div>
<div class="box">
<div class="left">
<div class="left-item">
<div class="label">物品代码</div>
<div class="value" id="name1">replaceItemNumber</div>
</div>
<div class="left-item">
<div class="label">物品名称</div>
<div class="value" id="name2">replaceItemName</div>
</div>
<div class="left-item">
<div class="label">供应商</div>
<div class="value">replaceSupplierCode</div>
</div>
<div class="left-item">
<div class="label">包装号</div>
<div class="value">replacePackageCode</div>
</div>
<div class="left-item">
<div class="label">订单行</div>
<div class="value">replaceReferenceOrderRow</div>
</div>
</div>
<div class="right">
<div class="image">
<img id='image1' src="replaceBase" alt="" />
</div>
<div class="left-item">
<div class="label">订单号</div>
<div class="value">replaceReferenceOrderCode</div>
</div>
<div class="left-item">
<div class="label">数量</div>
<div class="value">replaceAmount</div>
</div>
</div>
</div>
</div>
</body>
</head>
<body>
mainBody
</body>
</html>

157
src/pages/point/index.vue

@ -1,48 +1,48 @@
<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-item">
<view class="label">物品代码</view>
<view class="value" id="name1">{{data.itemNumber}}</view>
<view class="value" id="name1">{{item.itemNumber}}</view>
</view>
<view class="left-item">
<view class="label">物品名称</view>
<view class="value" id="name2">{{data.itemName}}</view>
<view class="value" id="name2">{{item.itemName}}</view>
</view>
<view class="left-item">
<view class="label">供应商</view>
<view class="value">{{data.supplierCode}}</view>
<view class="value">{{item.supplierCode}}</view>
</view>
<view class="left-item">
<view class="label">包装号</view>
<view class="value">{{data.packageCode}}</view>
<view class="value">{{item.packageCode}}</view>
</view>
<view class="left-item">
<view class="label">订单行</view>
<view class="value">{{data.referenceOrderRow}}</view>
<view class="value">{{item.referenceOrderRow}}</view>
</view>
</view>
<view class="right">
<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 class="left-item">
<view class="label">订单号</view>
<view class="value">{{data.referenceOrderCode}}</view>
<view class="value">{{item.referenceOrderCode}}</view>
</view>
<view class="left-item">
<view class="label">数量</view>
<view class="value">{{data.amount}}</view>
<view class="value">{{item.amount}}</view>
</view>
</view>
</view>
<view class="">
<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>
@ -60,8 +60,8 @@
data() {
return {
data: {},
newHtmlContent: '' //html
newHtmlContent: '', //html
isLoadFinish: false,
}
},
@ -89,51 +89,107 @@
}
// #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() {
//
this.data = {
this.data = [{
itemNumber: '555555',
itemName: 'hahah',
referenceOrderRow: '60',
referenceOrderCode: '6000',
supplierCode: '888',
referenceOrderRow: '55',
referenceOrderCode: '55',
supplierCode: '555',
packageCode: '9999-8888',
amount: '6000',
barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;'
}
this.$nextTick(() => {
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']
el.canvasToTempFilePath({
let str = ''
el.forEach(async (item, index) => {
await item.canvasToTempFilePath({
success: async (res) => {
// base64
await pathToBase64(res.tempFilePath).then(base64 => {
// html
this.readFile(htmlFileUrl, (htmlContent) => {
this.newHtmlContent = htmlContent
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); //
});
this.data[index].barcodeBase64 = base64
if (index == el.length - 1) {
this.isLoadFinish = true
}
}).catch(err => {
console.log(err);
})
@ -142,6 +198,9 @@
console.log('err:::', err)
}
})
})
})
},

Loading…
Cancel
Save