Browse Source

采购收货打印样式

hella_online_20240904
lijuncheng 3 weeks ago
parent
commit
0b2e403ef3
  1. 146
      src/hybrid/html/pointPutawayJob.html
  2. 91
      src/hybrid/html/purchaseReceiptJob.html
  3. 108
      src/pages/pointPutawayJob/index.vue

146
src/hybrid/html/pointPutawayJob.html

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

91
src/hybrid/html/purchaseReceiptJob.html

@ -1,4 +1,3 @@
<!-- 采购收货打印指引单 -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
@ -17,59 +16,49 @@
.box { .box {
font-size: 13px; font-size: 13px;
/* padding: 10px; */ /* padding: 10px; */
} /* border: 1px solid #dedede; */
.mb-kw {
border-top: 1px solid #dedede;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
font-size: 15px;
display: flex;
align-items: center
}
.top1 th {
font-weight: bold;
font-size: 13px;
padding: 10px;
text-align: left;
} }
table { .left {
border-collapse: collapse; flex: 1;
border: 1px solid #dedede; border-bottom: 1px solid #b1b1b1;
/* 设置表格的边框 */ }
width: 100% .left-item {
} display: flex;
th{ border-top: 1px solid #b1b1b1;
font-weight: bold; border-left: 1px solid #b1b1b1;
font-size: 13px; border-right: 1px solid #b1b1b1;
padding: 10px; }
}
td{ .left-item div{
padding: 10px; padding: 10px 10px;
font-size: 16px;
} }
td:nth-child(2n){ .left-item .label{
width:calc(50% - 100px); width: 100px;
} padding: 10px 10px;
td:nth-child(2n+1){ border-right: 1px solid #b1b1b1;
width:80px; }
}
.relative{ .relative {
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
} }
.q{ .q {
position: absolute; position: absolute;
left: 50%; font-size: 15rem;
top:50%; color: rgba(0, 0, 0, 0.1);
font-size: 160px; width: calc(100% - 100px);
transform: translate(-50% ,-50%); right: 0px;
color: rgba(0, 0, 0, 0.1); top: 0px;
} text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style> </style>
</head> </head>
<body> <body>

108
src/pages/pointPutawayJob/index.vue

@ -42,11 +42,11 @@
<view class="left-item" v-if="item.haveInspectionRequest==='0'"> <view class="left-item" v-if="item.haveInspectionRequest==='0'">
<view style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</view> <view style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</view>
</view> </view>
<view class="left-item" v-else-if="item.haveInspectionRequest==='2'"> <view class="left-item" v-else-if="item.haveInspectionRequest==='2'">
<view style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</view> <view style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</view>
</view> </view>
<view class="left-item" v-else-if="item.haveInspectionRequest==='3'"> <view class="left-item" v-else-if="item.haveInspectionRequest==='3'">
<view style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</view> <view style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</view>
</view> </view>
</view> </view>
</view> </view>
@ -245,29 +245,32 @@
</div> </div>
` `
let str2 = `` let str2 = ``
if(item.haveInspectionRequest==='0'){ if (item.haveInspectionRequest === '0') {
str2 =`<div class="left-item"> str2 = `
<div style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</div> <div class="left-item">
</div>` <div style="color:#ff0000;font-weight: bold;font-size: 15px;">未生成检验申请</div>
}else if(item.haveInspectionRequest==='2'){ </div>`
str2 =`<div class="left-item"> } else if (item.haveInspectionRequest === '2') {
<div style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</div> str2 = `
</div>` <div class="left-item">
}else if(item.haveInspectionRequest==='3'){ <div style="color:#ffab01;font-weight: bold;font-size: 15px;">没有检验方案</div>
str2 =` <div class="left-item"> </div>`
<div style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</div> } else if (item.haveInspectionRequest === '3') {
</div>` str2 = `
<div class="left-item">
<div style="color:#258eff;font-weight: bold;font-size: 15px;">检验阶段不存在</div>
</div>`
} }
let str3 = ` let str3 = `
</div> </div>
</div> </div>
</div> </div>
</div>
` `
str += str1 + str2+ str3 str += str1 + str2 + str3
}) })
this.newHtmlContent1 = this.newHtmlContent1.replace( this.newHtmlContent1 = this.newHtmlContent1.replace(
"mainBody", str); // "mainBody", str); //
console.log(333,this.newHtmlContent1)
}); });
}) })
@ -347,7 +350,8 @@
number: this.number number: this.number
}).then(async res1 => { }).then(async res1 => {
this.data1 = res1.data this.data1 = res1.data
this.data1.inspectDTOList = this.data1.inspectDTOList.filter(item => item.sampleQty >0) this.data1.inspectDTOList = this.data1.inspectDTOList.filter(item => item.sampleQty >
0)
if (this.data1 && this.data1.inspectDTOList && this.data1.inspectDTOList.length == 0) { if (this.data1 && this.data1.inspectDTOList && this.data1.inspectDTOList.length == 0) {
this.tabIndex = 2 this.tabIndex = 2
} }
@ -391,6 +395,7 @@
flex: 1; flex: 1;
border-bottom: 1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;
} }
.left-item { .left-item {
display: flex; display: flex;
border-top: 1px solid #b1b1b1; border-top: 1px solid #b1b1b1;
@ -398,10 +403,12 @@
border-right: 1px solid #b1b1b1; border-right: 1px solid #b1b1b1;
min-height: 30px; min-height: 30px;
line-height: 30px; line-height: 30px;
view{
view {
padding: 4px 10px; padding: 4px 10px;
} }
.label{
.label {
width: 100px; width: 100px;
padding: 4px 10px; padding: 4px 10px;
border-right: 1px solid #b1b1b1; border-right: 1px solid #b1b1b1;
@ -428,4 +435,59 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
</style> .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%;
}
</style>

Loading…
Cancel
Save