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;" 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.qty}}个</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.qty}个</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>