Commit b8d5d9d6 authored by jingnan's avatar jingnan 👀

胶漆打印标签修改

parent 5dd15632
...@@ -13,17 +13,23 @@ ...@@ -13,17 +13,23 @@
:lay-config="cmpOptions" :lay-config="cmpOptions"
:basic-data="basicData" :basic-data="basicData"
/> />
<PrintTag ref="print" :config="printConfig" /> <PrintTagLacquer ref="printConfigLacquer" :config="printConfigLacquer" />
<PrintConfigPaint ref="printConfigPaint" :config="printConfigPaint" />
<PrintConfigAlodine ref="printConfigAlodine" :config="printConfigAlodine" />
</div> </div>
</template> </template>
<script> <script>
import PrintTag from './printTag' import PrintTagLacquer from './printTagLacquer'
import PrintConfigPaint from './printConfigPaint'
import PrintConfigAlodine from './printConfigAlodine'
import { post } from '@/utils/http' import { post } from '@/utils/http'
export default { export default {
name: 'AssignCradInfo', name: 'AssignCradInfo',
componentName: '调配卡详情', componentName: '调配卡详情',
components: { components: {
PrintTag PrintTagLacquer,
PrintConfigPaint,
PrintConfigAlodine
}, },
props: { props: {
basicData: { basicData: {
...@@ -34,7 +40,17 @@ export default { ...@@ -34,7 +40,17 @@ export default {
data() { data() {
return { return {
cmpOptions: {}, cmpOptions: {},
printConfig: { printConfigLacquer: {
visible: false,
width: 260,
prints: []
},
printConfigPaint: {
visible: false,
width: 260,
prints: []
},
printConfigAlodine: {
visible: false, visible: false,
width: 260, width: 260,
prints: [] prints: []
...@@ -50,8 +66,8 @@ export default { ...@@ -50,8 +66,8 @@ export default {
handler: function(val) { handler: function(val) {
if (val.subTypeName === 'AssignCardAlodine') { if (val.subTypeName === 'AssignCardAlodine') {
this.cmpOptions = { this.cmpOptions = {
typeName: 'AssignCardAlodine', typeName: 'AssignCard',
layKey: 'assignCardInfo' layKey: 'assignCardAlodineDetailView'
} }
} else if (val.subTypeName === 'AssignCardLacquer') { } else if (val.subTypeName === 'AssignCardLacquer') {
this.cmpOptions = { this.cmpOptions = {
...@@ -103,24 +119,36 @@ export default { ...@@ -103,24 +119,36 @@ export default {
post('/AssignCard/qualification', params) post('/AssignCard/qualification', params)
.then((res) => { .then((res) => {
var data = res.items.content[0] var data = res.items.content[0]
this.printConfig = Object.assign({}, this.printConfig, {
visible: true
})
var b = data.validityEnd && data.validityEnd.split(':') || [] var b = data.validityEnd && data.validityEnd.split(':') || []
b.pop() b.pop()
if (data.subTypeName === 'AssignCardPaint') { if (data.subTypeName === 'AssignCardPaint') { // 调漆
this.printConfigPaint = Object.assign({}, this.printConfigPaint, {
visible: true
})
const a = data.validityStart && data.validityStart.split(':') || [] const a = data.validityStart && data.validityStart.split(':') || []
a.pop() a.pop()
this.printConfig.prints = [ this.printConfigPaint.prints = [
{ {
text: data.cardNo, text: data.cardNo,
title: '漆料合格标签', title: '漆料合格标签',
count: data.actualWeight, count: { label: '领取量', value: data.actualWeight },
number: { label: '编号', value: data.cardNo }, number: { label: '编号', value: data.cardNo },
mark: { label: '油漆牌号', value: data.modelNo }, standard: {
mixingUnit: { label: '调配单位', value: data.assignUnit }, label: '材料规范',
value: this.form.standard
},
mark: {
label: '材料标识/牌号',
value: data.modelNo + '/' + data.realityMark
},
mixingUnit: {
label: '合格证编号',
value: data.certificateNo
},
// mark: { label: '油漆牌号', value: data.modelNo },
mixStartTime: { label: '混合开始时间', value: data.mixStartTime },
validity: { validity: {
label: '有效期', label: '漆料施工有效期',
value: { value: {
start: { start: {
label: '始', label: '始',
...@@ -132,27 +160,35 @@ export default { ...@@ -132,27 +160,35 @@ export default {
} }
} }
}, },
deployment: { label: '调配员', value: data.creator.userName }, deployment: { label: '发料员', value: data.creator.userName },
inspector: { inspector: {
label: '检验员', label: '检验员',
value: data.checker value: data.checker
} }
} }
] ]
} else if (data.subTypeName === 'AssignCardAlodine') { this.$refs.printConfigPaint.print()
} else if (data.subTypeName === 'AssignCardAlodine') { // 阿洛丁
this.printConfigAlodine = Object.assign({}, this.printConfigAlodine, {
visible: true
})
const c = (data.assignTime && data.assignTime.split(':')) || [] const c = (data.assignTime && data.assignTime.split(':')) || []
c.pop() c.pop()
this.printConfig.prints = [ this.printConfigAlodine.prints = [
{ {
text: data.cardNo, text: data.cardNo,
title: '阿洛丁刷涂合格标签', title: '阿洛丁刷涂合格标签',
count: data.assignTotalAmount, count: { label: '领取量', value: data.assignTotalAmount },
number: { label: '编号', value: data.cardNo }, number: { label: '编号', value: data.cardNo },
mark: { mark: {
label: '阿洛丁牌号', label: '阿洛丁牌号',
value: data.modelNo value: data.modelNo
}, },
mixingUnit: { label: '调配单位', value: data.assignUnit }, mixingUnit: {
label: '合格证编号',
value: data.certificateNo
},
receiveDate: { label: '领取日期', value: data.assignUnit || 'xxxx-xx-xx hh:mm' },
validity: { validity: {
label: '有效期', label: '有效期',
value: { value: {
...@@ -166,23 +202,29 @@ export default { ...@@ -166,23 +202,29 @@ export default {
} }
} }
}, },
deployment: { label: '调配员', value: data.creator.userName }, deployment: { label: '发料员', value: data.creator.userName },
inspector: { inspector: {
label: '检验员', label: '检验员',
value: data.checker value: data.checker
} },
remark: { label: '备注',
value: data.realityMark }
} }
] ]
} else if (data.subTypeName === 'AssignCardLacquer') { this.$refs.printConfigAlodine.print()
} else if (data.subTypeName === 'AssignCardLacquer') { // 调胶
this.printConfigLacquer = Object.assign({}, this.printConfigLacquer, {
visible: true
})
const d = (data.mixStartTime && data.mixStartTime.split(':')) || [] const d = (data.mixStartTime && data.mixStartTime.split(':')) || []
d.pop() d.pop()
const e = (data.mixEndTime && data.mixEndTime.split(':')) || [] const e = (data.mixEndTime && data.mixEndTime.split(':')) || []
e.pop() e.pop()
this.printConfig.prints = [ this.printConfigLacquer.prints = [
{ {
text: data.cardNo, text: data.cardNo,
title: '密封剂合格标签', title: '密封剂合格标签',
count: data.actualWeight, count: { label: '重量', value: data.actualWeight },
number: { label: '编号', value: data.cardNo }, number: { label: '编号', value: data.cardNo },
standard: { standard: {
label: '材料规范', label: '材料规范',
...@@ -216,8 +258,8 @@ export default { ...@@ -216,8 +258,8 @@ export default {
} }
} }
] ]
this.$refs.printConfigLacquer.print()
} }
this.$refs.print.print()
}) })
.catch((err) => console.log(err)) .catch((err) => console.log(err))
......
<template>
<section ref="print" class="print">
<section>
<div
v-for="(item, index) in config.prints"
:key="index"
style="
border: 2px solid #222;
box-sizing: border-box;
font-weight: 500;
font-size: 36px;
"
>
<div style="border-bottom: 2px solid #222">
<div
style="
display: inline-block;
border-right: 2px solid #222;
width: 70%;
vertical-align: top;
"
>
<!-- 第一行 -->
<div
style="
height: 76px;
border-bottom: 2px solid #222;
line-height: 76px;
"
>
<!-- 标题 -->
<div
style="
display: inline-block;
width: 40%;
text-align: center;
box-sizing: border-box;
border-right: 2px solid #222;
font-size: 40px;
"
>
{{ item.title }}
</div>
<!-- 编号 -->
<div
style="
display: inline-block;
vertical-align: top;
width: 14%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.number.label }}
</div>
<div
style="
display: inline-block;
box-sizing: border-box;
padding-left: 10px;
font-size: 36px;
"
>
{{ item.number.value }}
</div>
</div>
<!-- 第二行 -->
<div
style="
height: 76px;
display: flex;
align-items: center;
border-bottom: 2px solid #222;
"
>
<!-- 阿洛丁牌号 -->
<div
style="
display: inline-block;
width: 30%;
height: 76px;
line-height: 76px;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.mark.label }}
</div>
<div
style="
display: inline-block;
height: 76px;
line-height: 76px;
box-sizing: border-box;
padding-left: 10px;
font-size: 36px;
"
>
{{ item.mark.value }}
</div>
</div>
<!-- 第三行 -->
<div
style="
height: 76px;
display: flex;
align-items: center;
border-bottom: 2px solid #222;
"
>
<!-- 合格证编号 -->
<div
style="
vertical-align: top;
display: inline-block;
width: 30%;
height: 76px;
line-height: 76px;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.mixingUnit.label }}
</div>
<div
style="
display: inline-block;
box-sizing: border-box;
padding-left: 10px;
font-size: 36px;
"
>
{{ item.mixingUnit.value }}
</div>
</div>
<!-- 第四行 -->
<div
style="height: 76px; box-sizing: border-box; "
>
<div
style="
line-height: 76px;
vertical-align: top;
display: inline-block;
width: 30%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.receiveDate.label }}
</div>
<div
style="
display: inline-block;
width: 40%;
line-height: 76px;
padding-left: 10px;
vertical-align: top;
border-right: 2px solid #222;
box-sizing: border-box;
"
>
{{ item.receiveDate.value }}
</div>
<!-- 数量 -->
<div
style="
line-height: 76px;
vertical-align: top;
display: inline-block;
width: 14%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.count.label }}
</div>
<div
style="
display: inline-block;
line-height: 76px;
box-sizing: border-box;
padding-left: 20px;
"
>
{{ item.count.value }}
</div>
</div>
</div>
<!-- 二维码 -->
<div
style="
display: inline-block;
padding: 38px 50px;
width: 29%;
box-sizing: border-box;
"
>
<vue-qr
style="height:236px;"
:size="config.width"
:margin="0"
:text="item.text"
:qid="index.toString()"
/>
</div>
</div>
<!-- 施工期 -->
<div
style="height: 120px; box-sizing: border-box"
>
<div
style="
display: inline-block;
width: 21%;
border-right: 2px solid #222;
text-align: center;
line-height: 120px;
box-sizing: border-box;
vertical-align: top;
"
>
{{ item.validity.label }}
</div>
<div
style="
display: inline-block;
width: 79%;
line-height: 60px;
vertical-align: top;
"
>
<div
style="
display: inline-block;
border-bottom: 2px solid #222;
box-sizing: border-box;
width: 100%;"
>
<!-- 始 -->
<div
style="
display: inline-block;
width: 10%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.start.label }}
</div>
<div
style="
display: inline-block;
width: 89%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.start.value }}
</div>
</div>
<div style="">
<!-- 止 -->
<div
style="
display: inline-block;
width: 10%;
line-height: 50px;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.end.label }}
</div>
<div
style="
display: inline-block;
width: 89%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.end.value }}
</div>
</div>
</div>
</div>
<div
style="
font-size: 36px;
vertical-align: middle;
display: flex;
align-items: center;
font-weight: 500;
height: 76px;
border-top: 2px solid #222;
box-sizing: border-box;
"
>
<!-- 调配员 -->
<div style="width: 50%; display: flex">
<div
style="
width: 42%;
text-align: center;
line-height: 76px;
box-sizing: border-box;
border-right: 2px solid #222;"
>
{{ item.deployment.label }}
</div>
<div
style="
box-sizing: border-box;
padding-left: 20px;
width: 58%;
line-height: 76px;
border-right: 2px solid #222;"
>
{{ item.deployment.value }}
</div>
</div>
<!-- 检验员 -->
<div style="width: 50%; display: flex">
<div
style="width: 40%;
text-align: center;
line-height: 76px;
border-right: 2px solid #222;"
>
{{ item.inspector.label }}
</div>
<div
style="box-sizing: border-box; padding-left: 20px; line-height: 76px;
"
>
{{ item.inspector.value }}
</div>
</div>
</div>
<div
style="
font-size: 36px;
vertical-align: middle;
display: flex;
align-items: center;
font-weight: 500;
height: 76px;
border-top: 2px solid #222;
box-sizing: border-box;
"
>
<div
style="
width: 21%;
text-align: center;
line-height: 76px;
box-sizing: border-box;
border-right: 2px solid #222;"
>
{{ item.remark.label }}
</div>
<div
style="
box-sizing: border-box;
padding-left: 20px;
line-height: 76px;
border-right: 2px solid #222;"
>
{{ item.remark.value }}
</div>
</div>
</div>
<div
style="font-size: 34px;
"
>B330315</div>
</section>
</section>
</template>
<script>
import VueQr from 'vue-qr'
export default {
name: 'Print',
components: {
VueQr
},
props: {
config: {
type: Object,
default: () => {
return {
width: 300,
prints: []
}
}
}
},
data() {
return {
timer: null
}
},
beforeDestroy() {
this.timer = null
},
methods: {
print() {
this.timer = setInterval(() => {
if (this.$refs.print.innerHTML) {
this.printTag()
clearInterval(this.timer)
}
}, 300)
},
printTag() {
var iframe = document.createElement('IFRAME')
var doc = null
iframe.setAttribute(
'style',
'position:absolute; width:0; height:0; margin-top: -1000px; margin-left: -1000px;'
)
document.body.appendChild(iframe)
doc = iframe.contentWindow.document
doc.write(`
<style>
div{
}
</style>
`)
doc.write(this.$refs.print.innerHTML)
doc.close()
iframe.contentWindow.focus()
iframe.contentWindow.print()
}
}
}
</script>
<style lang='scss' scoped>
.print {
position: absolute;
z-index: -999;
left: -1000px;
top: -1110px;
}
</style>
<template>
<section ref="print" class="print">
<section>
<div
v-for="(item, index) in config.prints"
:key="index"
style="
border: 2px solid #222;
box-sizing: border-box;
font-weight: 500;
font-size: 36px;
"
>
<div style="border-bottom: 2px solid #222">
<div
style="
display: inline-block;
border-right: 2px solid #222;
width: 70%;
vertical-align: top;
"
>
<!-- 第一行 -->
<div
style="
height: 90px;
border-bottom: 2px solid #222;
box-sizing: border-box;
line-height: 90px;
"
>
<!-- 标题 -->
<div
style="
display: inline-block;
width: 40%;
text-align: center;
box-sizing: border-box;
border-right: 2px solid #222;
font-size: 40px;
"
>
{{ item.title }}
</div>
<!-- 编号 -->
<div
style="
display: inline-block;
vertical-align: top;
width: 14%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.number.label }}
</div>
<div
style="
display: inline-block;
box-sizing: border-box;
padding-left: 10px;
font-size: 36px;
"
>
{{ item.number.value }}
</div>
</div>
<!-- 第二行 -->
<div
style="
height: 80px;
display: flex;
align-items: center;
border-bottom: 2px solid #222;
box-sizing: border-box;
"
>
<!-- 材料规范 -->
<div
style="
display: inline-block;
width: 30%;
height: 80px;
line-height: 80px;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.standard.label }}
</div>
<div
style="
display: inline-block;
height: 80px;
line-height: 80px;
box-sizing: border-box;
padding-left: 10px;
font-size: 36px;
"
>
{{ item.standard.value }}
</div>
</div>
<div
style="
height: 80px;
display: flex;
align-items: center;
border-bottom: 2px solid #222;
"
>
<!-- 材料标识/牌号 -->
<div
style="
vertical-align: top;
display: inline-block;
width: 30%;
height: 80px;
line-height: 80px;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.mark.label }}
</div>
<div
style="
display: inline-block;
box-sizing: border-box;
padding-left: 10px;
font-size: 36px;
"
>
{{ item.mark.value }}
</div>
</div>
<!-- 合格证号 -->
<div
style="height: 80px; box-sizing: border-box; border-bottom: 2px solid #222 "
>
<div
style="
line-height: 80px;
vertical-align: top;
display: inline-block;
width: 30%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.mixingUnit.label }}
</div>
<div
style="
display: inline-block;
width: 30%;
line-height: 80px;
padding-left: 10px;
vertical-align: top;
border-right: 2px solid #222;
box-sizing: border-box;
"
>
{{ item.mixingUnit.value }}
</div>
<!-- 数量 -->
<div
style="
line-height: 80px;
vertical-align: top;
display: inline-block;
width: 14%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.count.label }}
</div>
<div
style="
display: inline-block;
line-height: 80px;
box-sizing: border-box;
padding-left: 20px;
"
>
{{ item.count.value }}
</div>
</div>
<div
style="height: 60px; line-height: 60px;"
>
<!-- 混合开始时间 -->
<div
style="
display: inline-block;
width: 30%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.mixStartTime.label }}
</div>
<div
style="
display: inline-block;
width: 70%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.mixStartTime.value }}
</div>
</div>
</div>
<!-- 二维码 -->
<div
style="
display: inline-block;
padding: 38px 50px;
width: 29%;
box-sizing: border-box;
"
>
<vue-qr
style="height:300px;"
:size="config.width"
:margin="0"
:text="item.text"
:qid="index.toString()"
/>
</div>
</div>
<div
v-if="item.remainingConstructionPeriod"
style="height: 40px; border-bottom: 2px solid #222"
>
<!-- 剩余施工期 -->
<div
style="
display: inline-block;
border-right: 2px solid #222;
line-height: 40px;
width: 24%;
text-align: center;
box-sizing: border-box;
"
>
{{ item.remainingConstructionPeriod.label }}
</div>
<div
style="
display: inline-block;
width: 59%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.remainingConstructionPeriod.value }}
</div>
</div>
<!-- 施工期 -->
<div
v-if="!item.remainingConstructionPeriod"
style="height: 120px; box-sizing: border-box"
>
<div
style="
display: inline-block;
width: 21%;
border-right: 2px solid #222;
text-align: center;
line-height: 120px;
box-sizing: border-box;
vertical-align: top;
"
>
{{ item.validity.label }}
</div>
<div
style="
display: inline-block;
width: 79%;
line-height: 60px;
vertical-align: top;
"
>
<div
style="
display: inline-block;
border-bottom: 2px solid #222;
box-sizing: border-box;
width: 100%;"
>
<!-- 始 -->
<div
style="
display: inline-block;
width: 10%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.start.label }}
</div>
<div
style="
display: inline-block;
width: 89%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.start.value }}
</div>
</div>
<div style="">
<!-- 止 -->
<div
style="
display: inline-block;
width: 10%;
line-height: 50px;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.end.label }}
</div>
<div
style="
display: inline-block;
width: 89%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.end.value }}
</div>
</div>
</div>
</div>
<!-- 2 -->
<!--解冻及施工期 -->
<div
v-if="item.remainingConstructionPeriod"
style="width: 100%; height: 40px; font-size: 36px;"
>
<div
style="
display: inline-block;
text-align: center;
vertical-align: top;
line-height: 40px;
width: 24%;
border-right: 2px solid #222;
box-sizing: border-box;
"
>
{{ item.validity.label }}
</div>
<div
style="
display: inline-block;
width: 76%;
height: 40px;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.start.label }}
{{ item.validity.value.start.value }}
{{ item.validity.value.end.label }}
{{ item.validity.value.end.value }}
</div>
</div>
<!-- 4 -->
<!-- -->
<div
style="
font-size: 36px;
vertical-align: middle;
display: flex;
align-items: center;
font-weight: 500;
height: 80px;
border-top: 2px solid #222;
box-sizing: border-box;
"
>
<!-- 调配员 -->
<div style="width: 50%; display: flex">
<div
style="
width: 42%;
text-align: center;
line-height: 80px;
box-sizing: border-box;
border-right: 2px solid #222;"
>
{{ item.deployment.label }}
</div>
<div
style="
box-sizing: border-box;
padding-left: 20px;
width: 58%;
line-height: 80px;
border-right: 2px solid #222;"
>
{{ item.deployment.value }}
</div>
</div>
<!-- 检验员 -->
<div style="width: 50%; display: flex">
<div
style="width: 40%;
text-align: center;
line-height: 80px;
border-right: 2px solid #222;"
>
{{ item.inspector.label }}
</div>
<div
style="box-sizing: border-box; padding-left: 20px; line-height: 80px;
"
>
{{ item.inspector.value }}
</div>
</div>
</div>
</div>
<div
style="font-size: 34px;
"
>B3303166</div>
</section>
</section>
</template>
<script>
import VueQr from 'vue-qr'
export default {
name: 'Print',
components: {
VueQr
},
props: {
config: {
type: Object,
default: () => {
return {
width: 300,
prints: []
}
}
}
},
data() {
return {
timer: null
}
},
beforeDestroy() {
this.timer = null
},
methods: {
print() {
this.timer = setInterval(() => {
if (this.$refs.print.innerHTML) {
this.printTag()
clearInterval(this.timer)
}
}, 300)
},
printTag() {
var iframe = document.createElement('IFRAME')
var doc = null
iframe.setAttribute(
'style',
'position:absolute; width:0; height:0; margin-top: -1000px; margin-left: -1000px;'
)
document.body.appendChild(iframe)
doc = iframe.contentWindow.document
doc.write(`
<style>
div{
}
</style>
`)
doc.write(this.$refs.print.innerHTML)
doc.close()
iframe.contentWindow.focus()
iframe.contentWindow.print()
}
}
}
</script>
<style lang='scss' scoped>
.print {
position: absolute;
z-index: -999;
left: -1000px;
top: -1110px;
}
</style>
...@@ -6,21 +6,21 @@ ...@@ -6,21 +6,21 @@
:key="index" :key="index"
style=" style="
border: 2px solid #222; border: 2px solid #222;
height: 100%;
box-sizing: border-box; box-sizing: border-box;
font-weight: lighter; font-weight: 500;
font-size: 25px; font-size: 36px;
" "
> >
<div style="height: 334px; border-bottom: 2px solid #222"> <div style="border-bottom: 2px solid #222">
<div <div
style=" style="
display: inline-block; display: inline-block;
border-right: 2px solid #222; border-right: 2px solid #222;
width: 60%; width: 70%;
vertical-align: top; vertical-align: top;
" "
> >
<!-- 第一行 -->
<div <div
style=" style="
height: 100px; height: 100px;
...@@ -32,142 +32,189 @@ ...@@ -32,142 +32,189 @@
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 65%; width: 40%;
text-align: center; text-align: center;
font-size: 30px; box-sizing: border-box;
border-right: 2px solid #222;
font-size: 40px;
" "
> >
{{ item.title }} {{ item.title }}
</div> </div>
<!-- 数量 --> <!-- 编号 -->
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 34%; vertical-align: top;
width: 14%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box; box-sizing: border-box;
padding-left: 20px;
" "
> >
重量 <span style="padding-left: 20px">{{ item.count }}</span> {{ item.number.label }}
</div>
<div
style="
display: inline-block;
box-sizing: border-box;
padding-left: 10px;
font-size: 36px;
"
>
{{ item.number.value }}
</div> </div>
</div> </div>
<!-- 第二行 -->
<div <div
style=" style="
height: 76px; height: 90px;
border-botoom: 2px solid #222;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 2px solid #222;
" "
> >
<!-- 编号 --> <!-- 材料规范 -->
<div <div
style=" style="
line-height: 76px;
display: inline-block; display: inline-block;
vertical-align: top; width: 30%;
width: 40%; height: 90px;
line-height: 90px;
border-right: 2px solid #222; border-right: 2px solid #222;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
" "
> >
{{ item.number.label }} {{ item.standard.label }}
</div> </div>
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 59%; height: 90px;
line-height: 90px;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 10px;
font-size: 25px; font-size: 36px;
" "
> >
{{ item.number.value }} {{ item.standard.value }}
</div> </div>
</div>
</div>
<div <div
style=" style="
height: 76px; height: 90px;
display: flex; display: flex;
align-items: center; align-items: center;
border-top: 2px solid #222; border-bottom: 2px solid #222;
border-botoom: 2px solid #222;
" "
> >
<!-- 材料规范 --> <!-- 材料标识/牌号 -->
<div <div
style=" style="
line-height: 76px;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
width: 40%; width: 30%;
height: 90px;
line-height: 90px;
border-right: 2px solid #222; border-right: 2px solid #222;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
" "
> >
{{ item.standard.label }} {{ item.mark.label }}
</div> </div>
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 59%;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 10px;
font-size: 25px; font-size: 36px;
" "
> >
{{ item.standard.value }} {{ item.mark.value }}
</div> </div>
</div> </div>
<!-- 合格证号 -->
<div <div
style=" style="height: 90px; box-sizing: border-box; "
height: 76px;
display: flex;
align-items: center;
border-top: 2px solid #222;
border-botoom: 2px solid #222;
"
> >
<!-- 牌号 -->
<div <div
style=" style="
line-height: 76px; line-height: 90px;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
width: 40%; width: 30%;
border-right: 2px solid #222; border-right: 2px solid #222;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
" "
> >
{{ item.mark.label }} {{ item.mixingUnit.label }}
</div>
<div
style="
display: inline-block;
width: 30%;
line-height: 90px;
padding-left: 10px;
vertical-align: top;
border-right: 2px solid #222;
box-sizing: border-box;
"
>
{{ item.mixingUnit.value }}
</div>
<!-- 数量 -->
<div
style="
line-height: 90px;
vertical-align: top;
display: inline-block;
width: 14%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.count.label }}
</div> </div>
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 59%; line-height: 90px;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 20px;
font-size: 25px;
" "
> >
{{ item.mark.value }} {{ item.count.value }}
</div> </div>
</div> </div>
<!-- <div
style="
height: 90px;
display: flex;
align-items: center;
border-top: 2px solid #222;
border-botoom: 2px solid #222;
"
> -->
<!-- 牌号 -->
</div> </div>
<!-- 二维码 --> <!-- 二维码 -->
<div <div
style=" style="
display: inline-block; display: inline-block;
padding: 50px 5px; padding: 38px 50px;
width: 39%; width: 29%;
box-sizing: border-box; box-sizing: border-box;
" "
> >
<vue-qr <vue-qr
style="height:300px;"
:size="config.width" :size="config.width"
:margin="0" :margin="0"
:text="item.text" :text="item.text"
...@@ -231,47 +278,19 @@ ...@@ -231,47 +278,19 @@
{{ item.ineffectiveTime.value }} {{ item.ineffectiveTime.value }}
</div> </div>
</div> </div>
<!-- 合格证号 -->
<div
style="height: 80px; box-sizing: border-box; border-bottom: 2px solid #222;"
>
<div
style="
line-height: 76px;
vertical-align: top;
display: inline-block;
width: 24%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box;
"
>
{{ item.mixingUnit.label }}
</div>
<div
style="
display: inline-block;
width: 69%;
line-height: 80px;
padding-left: 10px;
vertical-align: top;
"
>
{{ item.mixingUnit.value }}
</div>
</div>
<!-- 施工期 --> <!-- 施工期 -->
<div <div
v-if="!item.remainingConstructionPeriod" v-if="!item.remainingConstructionPeriod"
style="height: 80px; box-sizing: border-box" style="height: 120px; box-sizing: border-box"
> >
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 24%; width: 21%;
border-right: 2px solid #222; border-right: 2px solid #222;
text-align: center; text-align: center;
line-height: 80px; line-height: 120px;
box-sizing: border-box; box-sizing: border-box;
vertical-align: top; vertical-align: top;
" "
...@@ -281,12 +300,18 @@ ...@@ -281,12 +300,18 @@
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 69%; width: 79%;
line-height: 40px; line-height: 60px;
vertical-align: top; vertical-align: top;
" "
> >
<div style=""> <div
style="
display: inline-block;
border-bottom: 2px solid #222;
box-sizing: border-box;
width: 100%;"
>
<!-- 始 --> <!-- 始 -->
<div <div
style=" style="
...@@ -316,6 +341,7 @@ ...@@ -316,6 +341,7 @@
style=" style="
display: inline-block; display: inline-block;
width: 10%; width: 10%;
line-height: 50px;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 10px;
" "
...@@ -339,7 +365,7 @@ ...@@ -339,7 +365,7 @@
<!--解冻及施工期 --> <!--解冻及施工期 -->
<div <div
v-if="item.remainingConstructionPeriod" v-if="item.remainingConstructionPeriod"
style="width: 100%; height: 40px" style="width: 100%; height: 40px; font-size: 36px;"
> >
<div <div
style=" style="
...@@ -358,7 +384,7 @@ ...@@ -358,7 +384,7 @@
style=" style="
display: inline-block; display: inline-block;
width: 76%; width: 76%;
font-size: 25px;
height: 40px; height: 40px;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 10px;
...@@ -375,37 +401,63 @@ ...@@ -375,37 +401,63 @@
<!-- --> <!-- -->
<div <div
style=" style="
font-size: 25px; font-size: 36px;
vertical-align: middle; vertical-align: middle;
display: block;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: lighter; font-weight: 500;
height: 90px;
border-top: 2px solid #222; border-top: 2px solid #222;
border-bottom: 2px solid #222 box-sizing: border-box;
" "
> >
<!-- 调配员 --> <!-- 调配员 -->
<div style="width: 50%; display: flex"> <div style="width: 50%; display: flex">
<div style="width: 40.2%; text-align: center"> <div
style="
width: 42%;
text-align: center;
line-height: 90px;
box-sizing: border-box;
border-right: 2px solid #222;"
>
{{ item.deployment.label }} {{ item.deployment.label }}
</div> </div>
<div style="box-sizing: border-box; padding-left: 20px"> <div
style="
box-sizing: border-box;
padding-left: 20px;
width: 58%;
line-height: 90px;
border-right: 2px solid #222;"
>
{{ item.deployment.value }} {{ item.deployment.value }}
</div> </div>
</div> </div>
<!-- 检验员 --> <!-- 检验员 -->
<div style="width: 50%; display: flex"> <div style="width: 50%; display: flex">
<div style="width: 40%; text-align: center"> <div
style="width: 40%;
text-align: center;
line-height: 90px;
border-right: 2px solid #222;"
>
{{ item.inspector.label }} {{ item.inspector.label }}
</div> </div>
<div style="box-sizing: border-box; padding-left: 20px"> <div
style="box-sizing: border-box; padding-left: 20px; line-height: 90px;
"
>
{{ item.inspector.value }} {{ item.inspector.value }}
</div> </div>
</div> </div>
</div> </div>
<div>B330319B</div>
</div> </div>
<div
style="font-size: 34px;
"
>B330319B</div>
</section> </section>
</section> </section>
</template> </template>
...@@ -421,7 +473,7 @@ export default { ...@@ -421,7 +473,7 @@ export default {
type: Object, type: Object,
default: () => { default: () => {
return { return {
width: 150, width: 300,
prints: [] prints: []
} }
} }
......
...@@ -6,101 +6,118 @@ ...@@ -6,101 +6,118 @@
:key="index" :key="index"
style=" style="
border: 2px solid #222; border: 2px solid #222;
height: 100%;
box-sizing: border-box; box-sizing: border-box;
font-weight: lighter; font-weight: 500;
font-size: 25px; font-size: 36px;
" "
> >
<div style="height: 334px; border-bottom: 2px solid #222"> <div style="border-bottom: 2px solid #222">
<div <div
style=" style="
display: inline-block; display: inline-block;
border-right: 2px solid #222; border-right: 2px solid #222;
width: 60%; width: 75%;
vertical-align: top; vertical-align: top;
" "
> >
<!-- 第一行 -->
<div <div
style=" style="
height: 100px; height: 90px;
border-bottom: 2px solid #222; border-bottom: 2px solid #222;
line-height: 100px; line-height: 90px;
" "
> >
<!-- 标题 --> <!-- 标题 -->
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 65%; width: 40%;
text-align: center; text-align: center;
font-size: 30px; box-sizing: border-box;
border-right: 2px solid #222;
font-size: 40px;
" "
> >
{{ item.title }} {{ item.title }}
</div> </div>
<!-- 数量 --> <!-- 编号 -->
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 34%; vertical-align: top;
width: 14%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box; box-sizing: border-box;
padding-left: 20px;
" "
> >
重量 <span style="padding-left: 20px">{{ item.weight }}</span> {{ item.number.label }}
</div>
<div
style="
display: inline-block;
box-sizing: border-box;
padding-left: 10px;
font-size: 36px;
"
>
{{ item.number.value }}
</div> </div>
</div> </div>
<!-- 第二行 -->
<div <div
style=" style="
height: 76px; height: 60px;
border-botoom: 2px solid #222;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 2px solid #222;
" "
> >
<!-- 编号 --> <!-- 材料规范 -->
<div <div
style=" style="
line-height: 76px;
display: inline-block; display: inline-block;
vertical-align: top; width: 28%;
width: 40%; height: 60px;
line-height: 60px;
border-right: 2px solid #222; border-right: 2px solid #222;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
" "
> >
{{ item.number.label }} {{ item.standard.label }}
</div> </div>
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 59%; height: 60px;
line-height: 60px;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 10px;
font-size: 25px; font-size: 36px;
" "
> >
{{ item.number.value }} {{ item.standard.value }}
</div> </div>
</div> </div>
<div <div
style=" style="
height: 76px; height: 60px;
display: flex; display: flex;
align-items: center; align-items: center;
border-top: 2px solid #222; border-bottom: 2px solid #222;
border-botoom: 2px solid #222;
" "
> >
<!-- 牌号 --> <!-- 材料标识/牌号 -->
<div <div
style=" style="
line-height: 76px;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
width: 40%; width: 28%;
height: 60px;
line-height: 60px;
border-right: 2px solid #222; border-right: 2px solid #222;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
...@@ -111,31 +128,24 @@ ...@@ -111,31 +128,24 @@
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 59%;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 10px;
font-size: 25px; font-size: 36px;
" "
> >
{{ item.mark.value }} {{ item.mark.value }}
</div> </div>
</div> </div>
<!-- 合格证号 -->
<div <div
style=" style="height: 60px; box-sizing: border-box; "
height: 76px;
border-top: 2px solid #222;
border-botoom: 2px solid #222;
display: flex;
align-items: center;
"
> >
<!-- 合格证号 -->
<div <div
style=" style="
line-height: 60px;
vertical-align: top;
display: inline-block; display: inline-block;
line-height: 76px; width: 28%;
width: 40%;
border-right: 2px solid #222; border-right: 2px solid #222;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
...@@ -145,14 +155,40 @@ ...@@ -145,14 +155,40 @@
</div> </div>
<div <div
style=" style="
display: inline-block;
width: 30%;
line-height: 60px;
padding-left: 10px;
vertical-align: top;
border-right: 2px solid #222;
box-sizing: border-box;
"
>
{{ item.mixingUnit.value }}
</div>
<!-- 数量 -->
<div
style="
line-height: 60px;
vertical-align: top;
display: inline-block; display: inline-block;
width: 59%; width: 14%;
border-right: 2px solid #222;
text-align: center;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px;
font-size: 25px;
" "
> >
{{ item.mixingUnit.value }} 重量
</div>
<div
style="
display: inline-block;
line-height: 60px;
box-sizing: border-box;
padding-left: 20px;
"
>
{{ item.weight }}
</div> </div>
</div> </div>
</div> </div>
...@@ -160,12 +196,12 @@ ...@@ -160,12 +196,12 @@
<div <div
style=" style="
display: inline-block; display: inline-block;
padding: 50px 5px; padding: 20px 50px;
width: 39%;
box-sizing: border-box; box-sizing: border-box;
" "
> >
<vue-qr <vue-qr
style="height:236px;"
:size="config.width" :size="config.width"
:margin="0" :margin="0"
:text="item.text" :text="item.text"
...@@ -173,44 +209,17 @@ ...@@ -173,44 +209,17 @@
/> />
</div> </div>
</div> </div>
<div
style="height: 40px; border-bottom: 2px solid #222"
>
<!-- 材料规范 -->
<div
style="
display: inline-block;
border-right: 2px solid #222;
line-height: 40px;
width: 24%;
text-align: center;
box-sizing: border-box;
"
>
{{ item.standard.label }}
</div>
<div
style="
display: inline-block;
width: 59%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.standard.value }}
</div>
</div>
<div <div
v-if="item.remainingConstructionPeriod" v-if="item.remainingConstructionPeriod"
style="height: 40px; border-bottom: 2px solid #222" style="height: 60px; border-bottom: 2px solid #222"
> >
<!-- 剩余施工期 --> <!-- 剩余施工期 -->
<div <div
style=" style="
display: inline-block; display: inline-block;
border-right: 2px solid #222; border-right: 2px solid #222;
line-height: 40px; line-height: 60px;
width: 24%; width: 21%;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
" "
...@@ -225,19 +234,19 @@ ...@@ -225,19 +234,19 @@
padding-left: 10px; padding-left: 10px;
" "
> >
{{ item.remainingConstructionPeriod.value }} {{ item.remainingConstructionPeriod.value }}{{ item.remainingConstructionPeriod.value&&'min' }}
</div> </div>
</div> </div>
<div <div
v-if="item.ineffectiveTime" v-if="item.ineffectiveTime"
style="height: 40px; line-height: 40px; border-bottom: 2px solid #222" style="height: 60px; line-height: 60px; border-bottom: 2px solid #222"
> >
<!-- 失效时间 --> <!-- 失效时间 -->
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 24%; width: 21%;
border-right: 2px solid #222; border-right: 2px solid #222;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
...@@ -260,15 +269,15 @@ ...@@ -260,15 +269,15 @@
<!-- 施工期 --> <!-- 施工期 -->
<div <div
v-if="!item.remainingConstructionPeriod" v-if="!item.remainingConstructionPeriod"
style="height: 80px; box-sizing: border-box" style="height: 120px; box-sizing: border-box"
> >
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 24%; width: 21%;
border-right: 2px solid #222; border-right: 2px solid #222;
text-align: center; text-align: center;
line-height: 80px; line-height: 120px;
box-sizing: border-box; box-sizing: border-box;
vertical-align: top; vertical-align: top;
" "
...@@ -278,12 +287,18 @@ ...@@ -278,12 +287,18 @@
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 69%; width: 79%;
line-height: 40px; line-height: 60px;
vertical-align: top; vertical-align: top;
" "
> >
<div style=""> <div
style="
display: inline-block;
border-bottom: 2px solid #222;
box-sizing: border-box;
width: 100%;"
>
<!-- 始 --> <!-- 始 -->
<div <div
style=" style="
...@@ -313,6 +328,7 @@ ...@@ -313,6 +328,7 @@
style=" style="
display: inline-block; display: inline-block;
width: 10%; width: 10%;
line-height: 50px;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 10px;
" "
...@@ -336,15 +352,14 @@ ...@@ -336,15 +352,14 @@
<!--解冻及施工期 --> <!--解冻及施工期 -->
<div <div
v-if="item.remainingConstructionPeriod" v-if="item.remainingConstructionPeriod"
style="width: 100%; height: 40px" style="width: 100%; height: 120px; line-height:120px; font-size: 36px;"
> >
<div <div
style=" style="
display: inline-block; display: inline-block;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
line-height: 40px; width: 21%;
width: 24%;
border-right: 2px solid #222; border-right: 2px solid #222;
box-sizing: border-box; box-sizing: border-box;
" "
...@@ -354,54 +369,129 @@ ...@@ -354,54 +369,129 @@
<div <div
style=" style="
display: inline-block; display: inline-block;
width: 76%; width: 79%;
font-size: 25px; line-height: 60px;
height: 40px; vertical-align: top;
box-sizing: border-box;
padding-left: 10px;
" "
> >
{{ item.validity.value.start.label }} <div
{{ item.validity.value.start.value }} style="
{{ item.validity.value.end.label }} display: inline-block;
{{ item.validity.value.end.value }} border-bottom: 2px solid #222;
box-sizing: border-box;
width: 100%;"
>
<!-- 始 -->
<div
style="
display: inline-block;
width: 10%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.start.label }}
</div>
<div
style="
display: inline-block;
width: 89%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.start.value }}
</div>
</div>
<div style="">
<!-- 止 -->
<div
style="
display: inline-block;
width: 10%;
line-height: 50px;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.end.label }}
</div>
<div
style="
display: inline-block;
width: 89%;
box-sizing: border-box;
padding-left: 10px;
"
>
{{ item.validity.value.end.value }}
</div>
</div>
</div> </div>
</div> </div>
<!-- 4 --> <!-- 4 -->
<!-- --> <!-- -->
<div <div
style=" style="
font-size: 25px; font-size: 36px;
vertical-align: middle; vertical-align: middle;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: lighter; font-weight: 500;
height: 60px;
border-top: 2px solid #222; border-top: 2px solid #222;
border-bottom: 2px solid #222 box-sizing: border-box;
" "
> >
<!-- 调配员 --> <!-- 调配员 -->
<div style="width: 50%; display: flex"> <div style="width: 50%; display: flex">
<div style="width: 40.2%; text-align: center"> <div
style="
width: 42%;
text-align: center;
line-height: 60px;
box-sizing: border-box;
border-right: 2px solid #222;"
>
{{ item.deployment.label }} {{ item.deployment.label }}
</div> </div>
<div style="box-sizing: border-box; padding-left: 20px"> <div
style="
box-sizing: border-box;
padding-left: 20px;
width: 58%;
line-height: 60px;
border-right: 2px solid #222;"
>
{{ item.deployment.value }} {{ item.deployment.value }}
</div> </div>
</div> </div>
<!-- 检验员 --> <!-- 检验员 -->
<div style="width: 50%; display: flex"> <div style="width: 50%; display: flex">
<div style="width: 40%; text-align: center"> <div
style="width: 40%;
text-align: center;
line-height: 60px;
border-right: 2px solid #222;"
>
{{ item.inspector.label }} {{ item.inspector.label }}
</div> </div>
<div style="box-sizing: border-box; padding-left: 20px"> <div
style="box-sizing: border-box; padding-left: 20px; line-height: 60px;
"
>
{{ item.inspector.value }} {{ item.inspector.value }}
</div> </div>
</div> </div>
</div> </div>
<div>B330320</div>
</div> </div>
<div
style="font-size: 34px;
"
>B330320</div>
</section> </section>
</section> </section>
</template> </template>
...@@ -417,7 +507,7 @@ export default { ...@@ -417,7 +507,7 @@ export default {
type: Object, type: Object,
default: () => { default: () => {
return { return {
width: 150, width: 300,
prints: [] prints: []
} }
} }
...@@ -452,7 +542,7 @@ export default { ...@@ -452,7 +542,7 @@ export default {
doc.write(` doc.write(`
<style> <style>
div{ div{
} }
</style> </style>
`) `)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment