<template>
<view class="content" style="padding:30rpx 20rpx 100rpx;min-height: calc(100vh - 120rpx);">
<com-empty-view v-if="data.length==0"></com-empty-view>
<!-- 只用于展示页面 -->
<view class="box" style="margin-bottom: 20rpx;" v-for='(item,index) in data.sublist' :key='index'>
<view class="top">
<view class="mb-kw">
目标库位：<view>{{item.toLocationCode}}</view>
</view>
<view class="mb-bo">
<view class="mb-left">
<view class="mb-text">
物料号：<view>{{item.itemCode}}</view>
</view>
<view class="mb-text">
托包装号：<view>{{item.packingNumber}}</view>
</view>
</view>
<view class="mb-right">
<view class="mb-text">
数量：<view>{{item.packQty}}个</view>
</view>
</view>
</view>
</view>
<!-- <u-table style="margin-top: 20rpx;">
<u-tr>
<u-th>物品代码</u-th>
<u-th>物品描述</u-th>
<u-th>批次</u-th>
<u-th>包装号</u-th>
<u-th>包装规格</u-th>
<u-th>数量</u-th>
<u-th>计量单位</u-th>
</u-tr>
<u-tr v-for="(cur,key) in item.sublist" :key='key'>
<u-td>{{cur.itemCode}}</u-td>
<u-td>{{cur.itemDesc1}}</u-td>
<u-td>{{cur.batch}}</u-td>
<u-td>{{cur.packingNumber}}</u-td>
<u-td>{{cur.packUnit}}</u-td>
<u-td>{{cur.qty}}</u-td>
<u-td>{{cur.uom}}</u-td>
</u-tr>
</u-table> -->
</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>
import {
getJimuPutawayJobDetail
} from '@/api/request2.js';
import {
dateFormat
} from '@/common/basic.js';
// 打印页面的模板
const htmlFileUrl = '/hybrid/html/pointPutawayJob.html';
import {
pathToBase64
} from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名
// #ifdef APP
var testModule = uni.requireNativePlugin("TestModule")
// #endif
export default {
name: 'pointPutawayJob',
data() {
return {
data: {
sublist:[]
},
newHtmlContent: '', //打印传入的html
isLoadFinish: false,
ids:''
}
},
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
formatDate(val) {
return dateFormat(val)
}
},
watch: {
isLoadFinish: {
handler(newVal, oldVal) {
if (newVal == true) {
// 读取html文件将文件中的内容图换成当前页面的数据
}
},
immediate: true
}
},
onLoad(option) {
if (option.data) {
this.data = JSON.parse(decodeURIComponent(option.data));
}
},
async onShow() {
await getJimuPutawayJobDetail({
masterIds:this.data.ids
}).then(res=>{
this.data.sublist = res.data
})
// 获取数据
// this.data = [{
// toLocationCode: 'C13-12-11',
// jobNumber: '555555',
// creator: '就是我',
// createTime: '2019-12-12 05:00:00',
// itemNumber: '66',
// itemDes: 'hahah',
// batch: '201450513',
// packingNumber: '201450513',
// packUnit: '201450513',
// packQty: '40',
// uom: '张',
// }, {
// toLocationCode: 'C13-12-11',
// jobNumber: '555555',
// creator: '就是我',
// createTime: '2019-12-12 05:00:00',
// sublist: [{
// itemNumber: '66',
// itemDes: 'hahah',
// batch: '201450513',
// packingNumber: '',
// packUnit: '',
// packQty: '',
// uom: ''
// }]
// }, {
// toLocationCode: 'C13-12-11',
// jobNumber: '555555',
// creator: '就是我',
// createTime: '2019-12-12 05:00:00',
// sublist: [{
// itemNumber: '66',
// itemDes: 'hahah',
// batch: '201450513',
// packingNumber: '',
// packUnit: '',
// packQty: '',
// uom: ''
// }]
// }]
this.$nextTick(async () => {
let str = ''
this.readFile(htmlFileUrl, (htmlContent) => {
this.newHtmlContent = htmlContent
this.data.sublist.forEach(item => {
str += `<div class="box" style="page-break-before:always;" ><br />
<div class="top">
<div class="mb-kw">
目标库位：<div>${item.toLocationCode}</div>
</div>
<div class="mb-bo">
<div class="mb-left">
<div class="mb-text">
物料号：<div>${item.itemCode}</div>
</div>
<div class="mb-text">
托包装号：<div>${item.packingNumber}</div>
</div>
</div>
<div class="mb-right">
<div class="mb-text">
数量：<div>${item.packQty}个</div>
</div>
</div>
</div>
</div>
`
})
this.newHtmlContent = this.newHtmlContent.replace(
"mainBody", str); //替换物品代码
});
})
},
}
</script>
<style>
.box {
font-size: 26rpx;
/* display: flex; */
/* padding: 20rpx; */
border: 1px solid #dedede;
}
.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: 60rpx;
line-height: 60rpx;
}
.value {
border-bottom: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
padding: 0px 5px;
height: 60rpx;
flex: 1;
width: 0px;
display: flex;
align-items: center;
word-wrap: break-word;
}
.right {
width: 50%;
border-top: 1px solid #b1b1b1;
}
.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;
}
.mb-kw {
border-bottom: 1px solid #dedede;
padding: 20rpx;
font-size: 30rpx;
}
.mb-kw view {
font-weight: bold;
font-size: 46rpx;
text-align: center;
}
.mb-bo{
display:flex;
}
.mb-bo .mb-left{
flex:1
}
.mb-bo .mb-left .mb-text{
padding: 20rpx;
}
.mb-bo .mb-left .mb-text:nth-child(1){
border-bottom: 1px solid #dedede;
}
.mb-bo .mb-left .mb-text view{
font-weight: bold;
font-size: 32rpx;
text-align: center;
}
.mb-bo .mb-right{
padding: 20rpx;
width: 260rpx;
border-left: 1px solid #dedede;
display: flex;
align-items: center;
}
.mb-bo .mb-right .mb-text{
width: 100%;
}
.mb-bo .mb-right .mb-text view{
font-weight: bold;
font-size: 40rpx;
text-align: center;
width: 100%;
}
/* .mb-text {
margin-top: 10rpx;
}
::v-deep .u-th {
font-size: 24rpx !important;
}
::v-deep .u-td {
height: auto !important;
font-size: 24rpx !important;
word-break: break-all;
} */
</style>