<template>
|
<div>
|
|
<div id="printMe" class="main">
|
<div style="text-align: center">
|
<h1 style="font-size: 40px">成品入库标识卡</h1>
|
</div>
|
<div class="container">
|
<div class="block">日期</div>
|
<div class="block"> <el-input v-model="form.value1" /></div>
|
<div class="block">生产单号</div>
|
<div class="block"> <el-input v-model="form.value2" /></div>
|
|
<div class="block">型号</div>
|
<div class="block"> <el-input v-model="form.value3" /></div>
|
<div class="block">线别</div>
|
<div class="block"> <el-input v-model="form.value4" /></div>
|
|
<div class="block">颜色</div>
|
<div class="block"> <el-input v-model="form.value5" /></div>
|
<div class="block" style="border-right: none">台数/托数:</div>
|
<div class="block" style="border-left: none"> <el-input v-model="form.value6" /></div>
|
</div>
|
</div>
|
|
<div style="display: flex;margin:100px 805px;">
|
<el-button type="info" @click="reset">清 空</el-button>
|
<el-button v-print="printObj" type="primary">打 印</el-button>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'WarehouseEntryIdCard',
|
data() {
|
return {
|
|
form: {
|
value1: '',
|
value2: '',
|
value3: '',
|
value4: '',
|
value5: '',
|
value6: ''
|
},
|
|
printObj: {
|
id: 'printMe',
|
popTitle: '打印模板',
|
preview: false,
|
extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
|
closeCallback(vue) { // 关闭打印的回调事件（无法确定点击的是确认还是取消）
|
console.log('11212', vue)
|
// vue.dialogVisible = false
|
// vue.dialogVisibleApprove = false
|
},
|
beforeOpenCallback(vue) {
|
// vue.printLoading = true
|
console.log('打开之前')
|
console.log()
|
},
|
openCallback(vue) {
|
// vue.printLoading = false
|
console.log('执行了打印')
|
}
|
}
|
}
|
},
|
mounted() {
|
},
|
methods: {
|
reset() {
|
this.form.value1 = ''
|
this.form.value2 = ''
|
this.form.value3 = ''
|
this.form.value4 = ''
|
this.form.value5 = ''
|
this.form.value6 = ''
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.main {
|
display: flex;
|
flex-direction: column;
|
width: 800px;
|
height: 600px;
|
padding: 20px 20px;
|
}
|
|
.container {
|
width: 100%;
|
height: 100%;
|
border: 1px solid #000;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.block {
|
width: 25%;
|
height: 33.3%;
|
border: 1px solid #000;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 24px;
|
}
|
|
.block:nth-child(odd) {
|
width: 20%;
|
}
|
|
.block:nth-child(even) {
|
width: 30%;
|
}
|
|
::v-deep .el-input__inner{
|
border: none;
|
font-weight: 700;
|
font-size: 24px;
|
}
|
</style>
|
<style media="print">
|
/*@media print {*/
|
@page {
|
size: auto;
|
margin: 1mm;
|
}
|
|
</style>
|
