niexiting
5 months ago
8 changed files with 503 additions and 12 deletions
@ -0,0 +1,112 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
||||
|
<title></title> |
||||
|
<script src="../../api/img-to-base64.js"></script> |
||||
|
<script type="text/javascript"> |
||||
|
document.addEventListener('plusready', function() { |
||||
|
//console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。") |
||||
|
|
||||
|
|
||||
|
}); |
||||
|
</script> |
||||
|
<style> |
||||
|
.box { |
||||
|
font-size: 13px; |
||||
|
/* padding: 10px; |
||||
|
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: 60px; |
||||
|
padding: 0px 5px; |
||||
|
height: 30px; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
border-bottom: 1px solid #b1b1b1; |
||||
|
border-right: 1px solid #b1b1b1; |
||||
|
padding: 0px 5px; |
||||
|
height: 30px; |
||||
|
flex: 1; |
||||
|
width: 0px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
word-wrap: break-word; |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
.image { |
||||
|
width: 100%; |
||||
|
height: 202px; |
||||
|
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: 2px; |
||||
|
} |
||||
|
|
||||
|
.mb-kw { |
||||
|
border-bottom: 1px solid #dedede; |
||||
|
padding-bottom: 10px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.mb-kw span { |
||||
|
font-weight: bold; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.mb-text { |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
table, th, td { |
||||
|
border: 1px solid rgb(228, 231, 237); |
||||
|
border-collapse: collapse; /* 移除表格内边框间的间隙 */ |
||||
|
} |
||||
|
table{ |
||||
|
width: 100%; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
th{ |
||||
|
padding: 4px ; |
||||
|
font-size: 12px; |
||||
|
text-align: center; |
||||
|
background:rgb(245, 246, 248); |
||||
|
color:rgb(96, 98, 102) |
||||
|
} |
||||
|
td{ |
||||
|
padding: 4px ; |
||||
|
font-size: 12px; |
||||
|
text-align: center; |
||||
|
color:rgb(96, 98, 102) |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
mainBody |
||||
|
|
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,319 @@ |
|||||
|
<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>{{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.packQty}}</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'; |
||||
|
// 打印页面的模板 |
||||
|
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 |
||||
|
}, |
||||
|
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(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.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.packQty}</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> |
Loading…
Reference in new issue