Browse Source

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

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

105
src/hybrid/html/pointPutawayJob.html

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

322
src/pages/pointPutawayJob/index.vue

@ -10,43 +10,45 @@
<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="q">Q</view>
<table border='1'>
<thead>
<tr class='top1'>
<th>物料代码:</th>
<th colspan='3'>{{item.itemCode}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>物料名称</td>
<td>{{item.itemName}}</td>
<td>发货单号</td>
<td>{{data1.asnNumber}}</td>
</tr>
<tr>
<td>供应商</td>
<td>{{item.supplierCode}}</td>
<td>供应商批次</td>
<td>{{item.supplierBatch}}</td>
</tr>
<tr>
<td>到货数量</td>
<td>{{item.quantityQty}}</td>
<td>抽检数量</td>
<td>{{item.sampleQty}}</td>
</tr>
<tr v-if="item.haveInspectionRequest==='0'">
<td colspan='4' style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</td>
</tr>
<tr v-else-if="item.haveInspectionRequest==='2'">
<td colspan='4' style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</td>
</tr>
<tr v-else-if="item.haveInspectionRequest==='3'">
<td colspan='4' style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</td>
</tr>
</tbody>
</table>
<view class="left">
<view class="left-item">
<view class="label">发货单号</view>
<view>{{data1.asnNumber}}</view>
</view>
<view class="left-item">
<view class="label">物料代码</view>
<view>{{item.itemCode}}</view>
</view>
<view class="left-item">
<view class="label">物料名称</view>
<view>{{item.itemName}}</view>
</view>
<view class="left-item">
<view class="label">供应商</view>
<view>{{item.supplierCode}}</view>
</view>
<view class="left-item">
<view class="label">供应商批次</view>
<view>{{item.supplierBatch}}</view>
</view>
<view class="left-item">
<view class="label">到货数量</view>
<view>{{item.supplierBatch}}</view>
</view>
<view class="left-item">
<view class="label">抽检数量</view>
<view>{{item.quantityQty}}</view>
</view>
<view class="left-item" v-if="item.haveInspectionRequest==='0'">
<view style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</view>
</view>
<view class="left-item" v-else-if="item.haveInspectionRequest==='2'">
<view style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</view>
</view>
<view class="left-item" v-else-if="item.haveInspectionRequest==='3'">
<view style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</view>
</view>
</view>
</view>
</view>
</view>
@ -212,44 +214,53 @@
<div class="box" style="page-break-before:always;"><br />
<div class="relative" >
<div class="q">Q</div>
<table border='1'>
<thead>
<tr class='top1'>
<th>物料代码:</th>
<th colspan='3'>${item.itemCode}</th>
</tr>
</thead>
<tbody>
<tr>
<td>物料名称</td>
<td>${item.itemName}</td>
<td>发货单号</td>
<td>${this.data1.asnNumber}</td>
</tr>
<tr>
<td>供应商</td>
<td>${item.supplierCode}</td>
<td>供应商批次</td>
<td>${item.supplierBatch}</td>
</tr>
<tr>
<td>到货数量</td>
<td>${item.quantityQty}</td>
<td>抽检数量</td>
<td>${item.sampleQty}</td>
</tr>
<div class="left">
<div class="left-item">
<div class="label">发货单号</div>
<div>${this.data1.asnNumber}</div>
</div>
<div class="left-item">
<div class="label">物料代码</div>
<div>${item.itemCode}</div>
</div>
<div class="left-item">
<div class="label">物料名称</div>
<div>${item.itemName}</div>
</div>
<div class="left-item">
<div class="label">供应商</div>
<div>${item.supplierCode}</div>
</div>
<div class="left-item">
<div class="label">供应商批次</div>
<div>${item.supplierBatch}</div>
</div>
<div class="left-item">
<div class="label">到货数量</div>
<div>${item.supplierBatch}</div>
</div>
<div class="left-item">
<div class="label">抽检数量</div>
<div>${item.quantityQty}</div>
</div>
`
let str2 = ``
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'){
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'){
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 = `
</tbody>
</table>
</div>
</div>
</div>
</div>
`
@ -373,173 +384,31 @@
<style lang="scss">
.box1 {
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;
.left-item {
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-left: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1;
min-height: 30px;
line-height: 30px;
view{
padding: 4px 10px;
}
.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;
.label{
width: 100px;
padding: 4px 10px;
border-right: 1px solid #b1b1b1;
}
}
.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 {
margin-bottom: 20rpx;
@ -548,10 +417,15 @@
.q {
position: absolute;
left: 50%;
top: 50%;
font-size: 400rpx;
transform: translate(-50%, -50%);
font-size: 12.5rem;
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>
Loading…
Cancel
Save