Browse Source

打印样式修改

hella_online_20240829
zhang_li 3 months ago
parent
commit
6f0c491740
  1. 63
      src/hybrid/html/pointPutawayJob.html
  2. 127
      src/pages/pointPutawayJob/index.vue

63
src/hybrid/html/pointPutawayJob.html

@ -15,8 +15,8 @@
<style>
.box {
font-size: 13px;
/* padding: 10px;
border: 1px solid #dedede; */
/* padding: 10px; */
border: 1px solid #dedede;
}
.left {
@ -70,38 +70,57 @@
.mb-kw {
border-bottom: 1px solid #dedede;
padding-bottom: 10px;
padding: 10px;
font-size: 15px;
}
.mb-kw span {
.mb-kw div {
font-weight: bold;
font-size: 16px;
font-size: 23px;
text-align: center;
}
.mb-text {
margin-top: 5px;
.mb-bo {
display: flex;
}
table, th, td {
border: 1px solid rgb(228, 231, 237);
border-collapse: collapse; /* 移除表格内边框间的间隙 */
.mb-bo .mb-left {
flex: 1
}
table{
width: 100%;
margin-top: 10px;
.mb-bo .mb-left .mb-text {
padding: 10px;
}
th{
padding: 4px ;
font-size: 12px;
.mb-bo .mb-left .mb-text:nth-child(1) {
border-bottom: 1px solid #dedede;
}
.mb-bo .mb-left .mb-text div {
font-weight: bold;
font-size: 16px;
text-align: center;
background:rgb(245, 246, 248);
color:rgb(96, 98, 102)
}
td{
padding: 4px ;
font-size: 12px;
.mb-bo .mb-right {
padding: 10px;
width: 230px;
border-left: 1px solid #dedede;
display: flex;
align-items: center;
}
.mb-bo .mb-right .mb-text {
width: 100%;
}
.mb-bo .mb-right .mb-text div {
font-weight: bold;
font-size: 20px;
text-align: center;
color:rgb(96, 98, 102)
width: 100%;
}
</style>
</head>

127
src/pages/pointPutawayJob/index.vue

@ -2,22 +2,28 @@
<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="box" style="margin-bottom: 20rpx;" v-for='(item,index) in data.sublist' :key='index'>
<view class="top">
<view class="mb-kw">
目标库位<text>{{data.toLocationCode}}</text>
目标库位<view>{{item.toLocationCode}}</view>
</view>
<view class="mb-bo">
<view class="mb-left">
<view class="mb-text">
任务编号<text>{{data.number}}</text>
物料号<view>{{item.itemCode}}</view>
</view>
<view class="mb-text">
创建人<text>{{data.creator||''}}</text>
托包装号<view>{{item.packingNumber}}</view>
</view>
</view>
<view class="mb-right">
<view class="mb-text">
创建时间<text>{{formatDate(data.createTime)}}</text>
数量<view>{{item.packQty}}</view>
</view>
</view>
</view>
</view>
<u-table style="margin-top: 20rpx;">
<!-- <u-table style="margin-top: 20rpx;">
<u-tr>
<u-th>物品代码</u-th>
<u-th>物品描述</u-th>
@ -27,7 +33,7 @@
<u-th>数量</u-th>
<u-th>计量单位</u-th>
</u-tr>
<u-tr v-for="(cur,key) in data.sublist" :key='key'>
<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>
@ -36,7 +42,7 @@
<u-td>{{cur.qty}}</u-td>
<u-td>{{cur.uom}}</u-td>
</u-tr>
</u-table>
</u-table> -->
</view>
<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;">
<button @click="printImage"
@ -132,23 +138,13 @@
// 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: ''
// }]
// uom: '',
// }, {
// toLocationCode: 'C13-12-11',
// jobNumber: '555555',
@ -182,53 +178,30 @@
let str = ''
this.readFile(htmlFileUrl, (htmlContent) => {
this.newHtmlContent = htmlContent
// this.data.forEach(item => {
str += `<div class="box" style="page-break-before:always;"><br />
this.data.sublist.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>${item.toLocationCode}</div>
</div>
<div class="mb-bo">
<div class="mb-left">
<div class="mb-text">
任务编号<span>${this.data.number}</span>
物料号<div>${item.itemCode}</div>
</div>
<div class="mb-text">
创建人<span>${this.data.creator}</span>
托包装号<div>${item.packingNumber}</div>
</div>
</div>
<div class="mb-right">
<div class="mb-text">
创建时间<span>${this.formatDate(this.data.createTime)}</span>
数量<div>${item.packQty}</div>
</div>
</div>
</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); //
});
@ -243,7 +216,7 @@
.box {
font-size: 26rpx;
/* display: flex; */
padding: 20rpx;
/* padding: 20rpx; */
border: 1px solid #dedede;
}
@ -301,16 +274,52 @@
.mb-kw {
border-bottom: 1px solid #dedede;
padding-bottom: 20rpx;
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-kw text {
}
.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{
.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;
}
@ -323,5 +332,5 @@
font-size: 24rpx !important;
word-break: break-all;
}
} */
</style>
Loading…
Cancel
Save