You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
307 lines
8.4 KiB
307 lines
8.4 KiB
<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 bold-font" 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.packName}}</view>
|
|
</view>
|
|
<view class="left-item">
|
|
<view class="label">包装号</view>
|
|
<view class="value">{{item.packageCode}}</view>
|
|
</view>
|
|
<view class="left-item" v-if="item.productionLineCode&&item.productionLineCode.length>0">
|
|
<view class="label">生产线</view>
|
|
<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>
|
|
<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>
|
|
|
|
</view>
|
|
<view class="right">
|
|
<view class="image">
|
|
<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>
|
|
<view class="value">{{item.batch}}</view>
|
|
</view>
|
|
<view class="left-item">
|
|
<view class="label">物料类型</view>
|
|
<view class="value">{{item.itemType}}</view>
|
|
</view>
|
|
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)">
|
|
<view class="label">供应商</view>
|
|
<view class="value">{{item.supplierCode}}</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;" v-show="isLoadFinish">
|
|
<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: 'point',
|
|
data() {
|
|
return {
|
|
timer: null,
|
|
originData: [],
|
|
data: [],
|
|
newHtmlContent: '', //打印传入的html
|
|
isLoadFinish: false,
|
|
picIndex: 0,
|
|
picUrl: []
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
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 => {
|
|
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>
|
|
<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.packName}</div>
|
|
</div>
|
|
<div class="left-item">
|
|
<div class="label">包装号</div>
|
|
<div class="value">${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>
|
|
`
|
|
} else {
|
|
str += `
|
|
<div class="left-item">
|
|
<div class="label">父包装号</div>
|
|
<div class="value">${item.parentNumber}</div>
|
|
</div>
|
|
<div class="left-item">
|
|
<div class="label">ASN</div>
|
|
<div class="value">${item.asnNumber}</div>
|
|
</div>
|
|
`
|
|
}
|
|
str += `
|
|
<div class="left-item">
|
|
<div class="label">数量</div>
|
|
<div class="value bold-font">${item.qty}</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.batch}</div>
|
|
</div>
|
|
<div class="left-item">
|
|
<div class="label">物料类型</div>
|
|
<div class="value">${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>
|
|
`
|
|
}
|
|
str += `
|
|
|
|
<div class="left-item">
|
|
<div class="label">打印时间</div>
|
|
<div class="value">${item.printTimes}</div>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
})
|
|
this.newHtmlContent = this.newHtmlContent.replace(
|
|
"mainBody", str); //替换物品代码
|
|
});
|
|
},
|
|
printImage() {
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true
|
|
})
|
|
this.setHtmlData()
|
|
let clearInt = setInterval(() => {
|
|
if (!this.newHtmlContent.mainBody) {
|
|
// #ifdef APP
|
|
testModule.doHTMLPrint(this.newHtmlContent)
|
|
// #endif
|
|
clearInterval(clearInt)
|
|
uni.hideLoading()
|
|
}
|
|
}, 1000)
|
|
},
|
|
|
|
// #ifdef APP
|
|
// 读取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
|
|
},
|
|
|
|
onLoad(option) {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
});
|
|
if (option.points) {
|
|
this.originData = JSON.parse(option.points);
|
|
}
|
|
this.data = this.originData
|
|
},
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.bold-font {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.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-break: break-all;
|
|
}
|
|
|
|
.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>
|