Browse Source

HL-5789打印指引单样式问题

hella_online_20240904
zhang_li 3 months ago
parent
commit
815e6f2d2f
  1. 105
      src/hybrid/html/pointPutawayJob.html
  2. 324
      src/pages/pointPutawayJob/index.vue

105
src/hybrid/html/pointPutawayJob.html

@ -19,108 +19,47 @@
border: 1px solid #dedede; border: 1px solid #dedede;
} }
.left { .left {
border-top: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1;
flex: 1; flex: 1;
border-bottom: 1px solid #b1b1b1;
} }
.left-item { .left-item {
display: flex; display: flex;
} border-top: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1;
.label {
border-bottom: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1; border-right: 1px solid #b1b1b1;
width: 60px; min-height: 30px;
padding: 0px 5px;
height: 30px;
line-height: 30px; line-height: 30px;
view{
padding: 4px 10px;
} }
.label{
.value { width: 100px;
border-bottom: 1px solid #b1b1b1; padding: 4px 10px;
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; 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: 10px;
font-size: 15px;
}
.mb-kw div {
font-weight: bold;
font-size: 23px;
text-align: center;
}
.mb-bo {
display: flex;
}
.mb-bo .mb-left {
flex: 1
}
.mb-bo .mb-left .mb-text { .relative {
padding: 10px; margin-bottom: 20rpx;
position: relative;
} }
.mb-bo .mb-left .mb-text:nth-child(1) { .q {
border-bottom: 1px solid #dedede; position: absolute;
} font-size: 12.5rem;
color: rgba(0, 0, 0, 0.1);
.mb-bo .mb-left .mb-text div { width: calc(100% - 100px);
font-weight: bold; right: 0px;
font-size: 16px; top: 0px;
text-align: center; text-align: center;
} height: 100%;
.mb-bo .mb-right {
padding: 10px;
width: 230px;
border-left: 1px solid #dedede;
display: flex; display: flex;
align-items: center; align-items: center;
} justify-content: 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;
width: 100%;
} }
</style> </style>
</head> </head>

324
src/pages/pointPutawayJob/index.vue

@ -10,43 +10,45 @@
<view class="box" style="page-break-before:always;" v-if="tabIndex == 1"> <view class="box" style="page-break-before:always;" v-if="tabIndex == 1">
<view class="relative" v-for="(item,index) in showTableInspectDTOList" :key='index'> <view class="relative" v-for="(item,index) in showTableInspectDTOList" :key='index'>
<view class="q">Q</view> <view class="q">Q</view>
<table border='1'> <view class="left">
<thead> <view class="left-item">
<tr class='top1'> <view class="label">发货单号</view>
<th>物料代码:</th> <view>{{data1.asnNumber}}</view>
<th colspan='3'>{{item.itemCode}}</th> </view>
</tr> <view class="left-item">
</thead> <view class="label">物料代码</view>
<tbody> <view>{{item.itemCode}}</view>
<tr> </view>
<td>物料名称</td> <view class="left-item">
<td>{{item.itemName}}</td> <view class="label">物料名称</view>
<td>发货单号</td> <view>{{item.itemName}}</view>
<td>{{data1.asnNumber}}</td> </view>
</tr> <view class="left-item">
<tr> <view class="label">供应商</view>
<td>供应商</td> <view>{{item.supplierCode}}</view>
<td>{{item.supplierCode}}</td> </view>
<td>供应商批次</td> <view class="left-item">
<td>{{item.supplierBatch}}</td> <view class="label">供应商批次</view>
</tr> <view>{{item.supplierBatch}}</view>
<tr> </view>
<td>到货数量</td> <view class="left-item">
<td>{{item.quantityQty}}</td> <view class="label">到货数量</view>
<td>抽检数量</td> <view>{{item.supplierBatch}}</view>
<td>{{item.sampleQty}}</td> </view>
</tr> <view class="left-item">
<tr v-if="item.haveInspectionRequest==='0'"> <view class="label">抽检数量</view>
<td colspan='4' style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</td> <view>{{item.quantityQty}}</view>
</tr> </view>
<tr v-else-if="item.haveInspectionRequest==='2'"> <view class="left-item" v-if="item.haveInspectionRequest==='0'">
<td colspan='4' style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</td> <view style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</view>
</tr> </view>
<tr v-else-if="item.haveInspectionRequest==='3'"> <view class="left-item" v-else-if="item.haveInspectionRequest==='2'">
<td colspan='4' style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</td> <view style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</view>
</tr> </view>
</tbody> <view class="left-item" v-else-if="item.haveInspectionRequest==='3'">
</table> <view style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</view>
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -212,44 +214,53 @@
<div class="box" style="page-break-before:always;"><br /> <div class="box" style="page-break-before:always;"><br />
<div class="relative" > <div class="relative" >
<div class="q">Q</div> <div class="q">Q</div>
<table border='1'> <div class="left">
<thead> <div class="left-item">
<tr class='top1'> <div class="label">发货单号</div>
<th>物料代码:</th> <div>${this.data1.asnNumber}</div>
<th colspan='3'>${item.itemCode}</th> </div>
</tr> <div class="left-item">
</thead> <div class="label">物料代码</div>
<tbody> <div>${item.itemCode}</div>
<tr> </div>
<td>物料名称</td> <div class="left-item">
<td>${item.itemName}</td> <div class="label">物料名称</div>
<td>发货单号</td> <div>${item.itemName}</div>
<td>${this.data1.asnNumber}</td> </div>
</tr> <div class="left-item">
<tr> <div class="label">供应商</div>
<td>供应商</td> <div>${item.supplierCode}</div>
<td>${item.supplierCode}</td> </div>
<td>供应商批次</td> <div class="left-item">
<td>${item.supplierBatch}</td> <div class="label">供应商批次</div>
</tr> <div>${item.supplierBatch}</div>
<tr> </div>
<td>到货数量</td> <div class="left-item">
<td>${item.quantityQty}</td> <div class="label">到货数量</div>
<td>抽检数量</td> <div>${item.supplierBatch}</div>
<td>${item.sampleQty}</td> </div>
</tr> <div class="left-item">
<div class="label">抽检数量</div>
<div>${item.quantityQty}</div>
</div>
` `
let str2 = `` let str2 = ``
if(item.haveInspectionRequest==='0'){ if(item.haveInspectionRequest==='0'){
str2 =`<tr><td colspan='4' style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</td></tr>` str2 =`<div class="left-item">
<div style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</div>
</div>`
}else if(item.haveInspectionRequest==='2'){ }else if(item.haveInspectionRequest==='2'){
str2 =`<tr><td colspan='4' style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</td></tr>` str2 =`<div class="left-item">
<div style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</div>
</div>`
}else if(item.haveInspectionRequest==='3'){ }else if(item.haveInspectionRequest==='3'){
str2 =`<tr><td colspan='4' style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</td></tr>` str2 =` <div class="left-item">
<div style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</div>
</div>`
} }
let str3 = ` let str3 = `
</tbody> </div>
</table> </div>
</div> </div>
</div> </div>
` `
@ -373,173 +384,31 @@
<style lang="scss"> <style lang="scss">
.box1 { .box1 {
font-size: 26rpx; font-size: 26rpx;
/* display: flex; */
/* padding: 20rpx; */
border: 1px solid #dedede; border: 1px solid #dedede;
} }
.left { .left {
border-top: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1;
flex: 1; flex: 1;
}
.left-item {
display: flex;
}
.label {
border-bottom: 1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
width: 140rpx;
padding: 0px 10rpx;
height: 60rpx;
line-height: 60rpx;
} }
.left-item {
.value {
border-bottom: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
padding: 0px 5px;
height: 60rpx;
flex: 1;
width: 0px;
display: flex; 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-top: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
min-height: 30px;
line-height: 30px;
view{
padding: 4px 10px;
}
.label{
width: 100px;
padding: 4px 10px;
border-right: 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%;
}
.top1 th {
font-weight: bold;
font-size: 13px;
padding: 10px;
}
table {
border-collapse: collapse;
border: 1px solid #dedede;
/* 设置表格的边框 */
width: 100%
}
th {
text-align: left;
padding: 10px;
} }
td {
padding: 10px;
&:nth-child(2n) {
width: 290rpx;
}
&:nth-child(2n+1) {
width: 160rpx;
}
}
.tabs-box {
display: flex;
align-items: center;
margin-bottom: 20rpx;
border-bottom: 2rpx solid rgb(188, 188, 188);
position: fixed;
background: white;
width: 100%;
left: 0px;
view {
flex: 1;
text-align: center;
line-height: 60rpx;
font-size: 30rpx;
}
.active1 {
color: rgb(60, 156, 255) !important;
font-weight: bold;
border-bottom: 4rpx solid rgb(60, 156, 255);
}
}
.relative { .relative {
margin-bottom: 20rpx; margin-bottom: 20rpx;
@ -548,10 +417,15 @@
.q { .q {
position: absolute; position: absolute;
left: 50%; font-size: 12.5rem;
top: 50%;
font-size: 400rpx;
transform: translate(-50%, -50%);
color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.1);
width: calc(100% - 100px);
right: 0px;
top: 0px;
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
</style> </style>
Loading…
Cancel
Save