|
|
@ -1,11 +1,11 @@ |
|
|
|
<template> |
|
|
|
<view class="content" style="padding: 30rpx 20rpx 100rpx; min-height: calc(100vh - 120rpx)"> |
|
|
|
<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="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 bold-font" id="name1">{{ item.itemCode }}</view> |
|
|
|
<view class="label bold-label">物品代码</view> |
|
|
|
<view class="value bold-font font-20" id="name1">{{ item.itemCode }}</view> |
|
|
|
</view> |
|
|
|
<view class="left-item"> |
|
|
|
<view class="label">物品名称</view> |
|
|
@ -24,21 +24,27 @@ |
|
|
|
<view class="value">{{ item.productionLineCode }}</view> |
|
|
|
</view> |
|
|
|
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> |
|
|
|
<view class="label">父包装号</view> |
|
|
|
<view class="value">{{ item.parentNumber }}</view> |
|
|
|
<view class="label bold-label">父包装号</view> |
|
|
|
<view class="value bold-font font-20">{{ item.parentNumber }}</view> |
|
|
|
</view> |
|
|
|
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> |
|
|
|
<view class="label">ASN</view> |
|
|
|
<view class="value">{{ item.asnNumber }}</view> |
|
|
|
</view> |
|
|
|
<view class="left-item"> |
|
|
|
<view class="label">数量</view> |
|
|
|
<view class="value bold-font">{{ item.qty }}</view> |
|
|
|
<view class="label bold-label">数量</view> |
|
|
|
<view class="value bold-font font-20">{{ item.qty }}</view> |
|
|
|
</view> |
|
|
|
<view class="left-item" v-if="item.fromLocationCode"> |
|
|
|
<view class="label ">来源库位</view> |
|
|
|
<view class="value ">{{ item.fromLocationCode }}</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view class="image"> |
|
|
|
<l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success" :value="item.barcodeString" size="300rpx"></l-qrcode> |
|
|
|
<l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success($event,item)" :value="item.barcodeString" |
|
|
|
size="300rpx"></l-qrcode> |
|
|
|
</view> |
|
|
|
<view class="left-item"> |
|
|
|
<view class="label">批次</view> |
|
|
@ -56,21 +62,29 @@ |
|
|
|
<view class="label">打印时间</view> |
|
|
|
<view class="value">{{ item.printTimes }}</view> |
|
|
|
</view> |
|
|
|
<view class="left-item" v-if="item.fromLocationCode"> |
|
|
|
<view class="label bold-label"></view> |
|
|
|
<view class="value bold-font font-20"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="" style="position: fixed; width: 100%; bottom: 0rpx; left: 0px" v-show="isLoadFinish"> |
|
|
|
<button @click="printImage" style="background: rgb(60, 156, 255) !important ; color: white; margin-top: 80rpx">打印</button> |
|
|
|
</view> |
|
|
|
<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;" v-show="isLoadFinish"> |
|
|
|
<button @click="printImage" |
|
|
|
style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印 |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
// 打印页面的模板 |
|
|
|
import { pathToBase64 } from '../../api/img-to-base64.js' |
|
|
|
|
|
|
|
const htmlFileUrl = '/hybrid/html/point.html' // 引入解压后的js文件,这里我重新命名了文件名 |
|
|
|
const htmlFileUrl = '/hybrid/html/point.html'; |
|
|
|
import { |
|
|
|
pathToBase64 |
|
|
|
} from "../../api/img-to-base64.js" //引入解压后的js文件,这里我重新命名了文件名 |
|
|
|
// #ifdef APP |
|
|
|
const testModule = uni.requireNativePlugin('TestModule') |
|
|
|
var testModule = uni.requireNativePlugin("TestModule") |
|
|
|
// #endif |
|
|
|
|
|
|
|
export default { |
|
|
@ -88,79 +102,99 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
success(img) { |
|
|
|
this.picUrl.push(img) |
|
|
|
this.picIndex++ |
|
|
|
if (this.picIndex == this.data.length) { |
|
|
|
this.isLoadFinish = true |
|
|
|
success(img, item) { |
|
|
|
item.barcodeBase641 = img |
|
|
|
uni.hideLoading() |
|
|
|
this.isLoadFinish = true |
|
|
|
// #ifdef APP |
|
|
|
plus.io.resolveLocalFileSystemURL(item.barcodeBase641, (entry) => { |
|
|
|
// 可通过entry对象操作test.html文件 |
|
|
|
entry.file((file) => { |
|
|
|
let fileReader = new plus.io.FileReader(); |
|
|
|
fileReader.onloadend = (evt) => { |
|
|
|
console.log("文件路径" + evt.target.result) |
|
|
|
item.barcodeBase64 = evt.target.result |
|
|
|
} |
|
|
|
fileReader.readAsDataURL(file); |
|
|
|
}); |
|
|
|
}, (e) => { |
|
|
|
console.log("失败" + e) |
|
|
|
}); |
|
|
|
// #endif |
|
|
|
}, |
|
|
|
setHtmlData() { |
|
|
|
let str = '' |
|
|
|
this.readFile(htmlFileUrl, (htmlContent) => { |
|
|
|
this.newHtmlContent = htmlContent |
|
|
|
this.data.forEach((item) => { |
|
|
|
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 bold-font" id="name1">${item.itemCode}</div> |
|
|
|
<div class="label bold-label">物品代码</div> |
|
|
|
<div class="value bold-font font-30" id="name1">${item.itemCode}</div> |
|
|
|
</div> |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">物品名称</div> |
|
|
|
<div class="value" id="name2">${item.itemName}</div> |
|
|
|
<div class="value font-30" id="name2">${item.itemName}</div> |
|
|
|
</div> |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">包装名称</div> |
|
|
|
<div class="value">${item.packName}</div> |
|
|
|
<div class="value font-20">${item.packName}</div> |
|
|
|
</div> |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">包装号</div> |
|
|
|
<div class="value">${item.packageCode}</div> |
|
|
|
<div class="value font-20">${item.packageCode}</div> |
|
|
|
</div>` |
|
|
|
if (item.productionLineCode && item.productionLineCode.length > 0) { |
|
|
|
str += ` |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">生产线</div> |
|
|
|
<div class="value">${item.productionLineCode}</div> |
|
|
|
<div class="value font-20">${item.productionLineCode}</div> |
|
|
|
</div> |
|
|
|
` |
|
|
|
} else { |
|
|
|
str += ` |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">父包装号</div> |
|
|
|
<div class="value">${item.parentNumber}</div> |
|
|
|
<div class="label bold-label">父包装号</div> |
|
|
|
<div class="value bold-font font-20">${item.parentNumber}</div> |
|
|
|
</div> |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">ASN</div> |
|
|
|
<div class="value">${item.asnNumber}</div> |
|
|
|
<div class="value font-20">${item.asnNumber}</div> |
|
|
|
</div> |
|
|
|
` |
|
|
|
} |
|
|
|
str += ` |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">数量</div> |
|
|
|
<div class="value bold-font">${item.qty}</div> |
|
|
|
</div> |
|
|
|
<div class="value bold-font font-30">${item.qty}</div> |
|
|
|
</div>` |
|
|
|
if (item.fromLocationCode && item.fromLocationCode.length > 0) { |
|
|
|
str += ` |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">来源库位</div> |
|
|
|
<div class="value font-20">${item.fromLocationCode}</div> |
|
|
|
</div> |
|
|
|
</div>` |
|
|
|
} |
|
|
|
str += ` |
|
|
|
<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.batch}</div> |
|
|
|
<div class="value font-20">${item.batch}</div> |
|
|
|
</div> |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">物料类型</div> |
|
|
|
<div class="value">${item.itemType}</div> |
|
|
|
<div class="value font-20">${item.itemType}</div> |
|
|
|
</div>` |
|
|
|
if (!(item.productionLineCode && item.productionLineCode.length > 0)) { |
|
|
|
str += ` |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">供应商</div> |
|
|
|
<div class="value">${item.supplierCode}</div> |
|
|
|
<div class="value font-20">${item.supplierCode}</div> |
|
|
|
</div> |
|
|
|
` |
|
|
|
} |
|
|
@ -168,20 +202,33 @@ export default { |
|
|
|
|
|
|
|
<div class="left-item"> |
|
|
|
<div class="label">打印时间</div> |
|
|
|
<div class="value">${item.printTimes}</div> |
|
|
|
<div class="value font-20">${item.printTimes}</div> |
|
|
|
</div> |
|
|
|
` |
|
|
|
if (item.fromLocationCode && item.fromLocationCode.length > 0) { |
|
|
|
str += ` |
|
|
|
<div class="left-item"> |
|
|
|
<div class="label"></div> |
|
|
|
<div class="value"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div>` |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
this.newHtmlContent = this.newHtmlContent.replace('mainBody', str) // 替换物品代码 |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
generateBase64(index) { |
|
|
|
// 完成,调用打印 |
|
|
|
if (index == this.picUrl.length) { |
|
|
|
console.log('str', str) |
|
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
|
"mainBody", str); //替换物品代码 |
|
|
|
}); |
|
|
|
}, |
|
|
|
printImage() { |
|
|
|
uni.showLoading({ |
|
|
|
title: "加载中", |
|
|
|
mask: true |
|
|
|
}) |
|
|
|
this.setHtmlData() |
|
|
|
const clearInt = setInterval(() => { |
|
|
|
let clearInt = setInterval(() => { |
|
|
|
if (!this.newHtmlContent.mainBody) { |
|
|
|
// #ifdef APP |
|
|
|
testModule.doHTMLPrint(this.newHtmlContent) |
|
|
@ -190,63 +237,24 @@ export default { |
|
|
|
uni.hideLoading() |
|
|
|
} |
|
|
|
}, 1000) |
|
|
|
} else { |
|
|
|
let i = this.picUrl.length - 1 - index |
|
|
|
var url = this.picUrl[i] |
|
|
|
// #ifdef APP |
|
|
|
plus.io.resolveLocalFileSystemURL( |
|
|
|
url, |
|
|
|
(entry) => { |
|
|
|
// 可通过entry对象操作test.html文件 |
|
|
|
entry.file((file) => { |
|
|
|
const fileReader = new plus.io.FileReader() |
|
|
|
fileReader.onloadend = (evt) => { |
|
|
|
console.log(`文件路径${evt.target.result}`) |
|
|
|
let i = this.data.length - 1 - index |
|
|
|
this.data[i].barcodeBase64 = evt.target.result |
|
|
|
this.generateBase64(index + 1) |
|
|
|
} |
|
|
|
fileReader.readAsDataURL(file) |
|
|
|
}) |
|
|
|
}, |
|
|
|
(e) => { |
|
|
|
console.log(`失败${e}`) |
|
|
|
} |
|
|
|
) |
|
|
|
// #endif |
|
|
|
} |
|
|
|
}, |
|
|
|
printImage() { |
|
|
|
uni.showLoading({ |
|
|
|
title: '加载中', |
|
|
|
mask: true |
|
|
|
}) |
|
|
|
this.generateBase64(0) |
|
|
|
}, |
|
|
|
|
|
|
|
// #ifdef APP |
|
|
|
// 读取html文件 |
|
|
|
readFile(path, callback) { |
|
|
|
plus.io.resolveLocalFileSystemURL( |
|
|
|
path, |
|
|
|
function (entry) { |
|
|
|
entry.file( |
|
|
|
function (file) { |
|
|
|
const reader = new plus.io.FileReader() |
|
|
|
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}`) |
|
|
|
} |
|
|
|
) |
|
|
|
callback(e.target.result); |
|
|
|
}; |
|
|
|
reader.readAsText(file); |
|
|
|
}, function (e) { |
|
|
|
console.log("读取文件失败:" + e.message); |
|
|
|
}); |
|
|
|
}, function (e) { |
|
|
|
console.log("获取图片资源失败:" + e.message); |
|
|
|
}); |
|
|
|
} |
|
|
|
// #endif |
|
|
|
}, |
|
|
@ -255,35 +263,32 @@ export default { |
|
|
|
uni.showLoading({ |
|
|
|
title: '加载中...', |
|
|
|
mask: true |
|
|
|
}) |
|
|
|
}); |
|
|
|
if (option.points) { |
|
|
|
this.originData = JSON.parse(option.points) |
|
|
|
this.originData = JSON.parse(option.points); |
|
|
|
} |
|
|
|
this.data = this.originData |
|
|
|
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); |
|
|
|
}) |
|
|
|
|
|
|
|
// this.data = [ |
|
|
|
// { |
|
|
|
// "itemCode": "250.832-02", |
|
|
|
// "itemName": "线束1右件ZH", |
|
|
|
// "packName": "内部周转箱", |
|
|
|
// "packageCode": "PN20240906-0000000001", |
|
|
|
// "batch": "20240719", |
|
|
|
// "parentNumber": null, |
|
|
|
// "itemType": "外购件", |
|
|
|
// "asnNumber": "ASNS20240731-0002", |
|
|
|
// "supplierCode": "49000599", |
|
|
|
// "qty": 90, |
|
|
|
// "printTimes": "2024-09-06+09:29:37", |
|
|
|
// "productionLineCode": null, |
|
|
|
// "fromLocationCode": "C01-190-10", |
|
|
|
// "barcodeString": "HPQ;V1.0;B20240719;AASNS20240731-0002;Q90.000000;I250.832-02;L;PPN20240906-0000000001;S49000599;O49000599;L12;E;UPC;", |
|
|
|
// "barcodeBase64": "" |
|
|
|
// } |
|
|
|
// ] |
|
|
|
}, |
|
|
|
fail(err) { |
|
|
|
console.log('err:::', err) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
@ -291,6 +296,7 @@ export default { |
|
|
|
.box { |
|
|
|
font-size: 24rpx; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.left { |
|
|
@ -314,7 +320,19 @@ export default { |
|
|
|
|
|
|
|
.bold-font { |
|
|
|
font-weight: bold; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.font-30 { |
|
|
|
font-size: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.font-20 { |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.bold-label { |
|
|
|
font-weight: bold; |
|
|
|
/* font-size: 15px; */ |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|