sfms3.0-uniapp/src/pages/pointPutawayJob/index.vue

<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;">
			<view class="top">
				<view class="mb-kw">
					目标库位：<text>{{data.toLocationCode}}</text>
				</view>
				<view class="mb-text">
					任务编号：<text>{{data.number}}</text>
				</view>
				<view class="mb-text">
					创建人：<text>{{data.creator||''}}</text>
				</view>
				<view class="mb-text">
					创建时间：<text>{{formatDate(data.createTime)}}</text>
				</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 data.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',
			// 	sublist: [{
			// 		itemNumber: '66',
			// 		itemDes: 'hahah',
			// 		batch: '201450513',
			// 		packingNumber: '201450513',
			// 		packUnit: '201450513',
			// 		packQty: '40',
			// 		uom: '张'
			// 	},{
			// 		itemNumber: '77',
			// 		itemDes: '8888',
			// 		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.forEach(item => {
						str += `<div class="box" style="page-break-before:always;"><br />
							<div class="top">
								<div class="mb-kw">
									目标库位：<span>${this.data.toLocationCode}</span>
								</div>
								<div class="mb-text">
									任务编号：<span>${this.data.number}</span>
								</div>
								<div class="mb-text">
									创建人：<span>${this.data.creator}</span>
								</div>
								<div class="mb-text">
									创建时间：<span>${this.formatDate(this.data.createTime)}</span>
								</div>
							</div>
							<table style="margin-top: 20rpx;" style='border-collapse: collapse;'>
								<tr>
									<th>物品代码</th>
									<th>物品描述</th>
									<th>批次</th>
									<th>包装号</th>
									<th>包装规格</th>
									<th>数量</th>
									<th>计量单位</th>
								<tr>
								tableTrTd
							</table>
							<div>
							`
						let str1 = ''
						this.data.sublist.forEach((cur, key) => {
							str1 += `
								<tr>
									<td>${cur.itemCode}</td>
									<td>${cur.itemDesc1}</td>
									<td>${cur.batch}</td>
									<td>${cur.packingNumber}</td>
									<td>${cur.packUnit}</td>
									<td>${cur.qty}</td>
									<td>${cur.uom}</td>
								</tr>
							`
						})
						str = str.replace(
							"tableTrTd", str1)
					// })
					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-bottom: 20rpx;

	}

	.mb-kw text {
		font-weight: bold;
		font-size: 32rpx;
	}

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