<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>