85 lines
2.6 KiB
Vue
85 lines
2.6 KiB
Vue
|
<template>
|
|||
|
|
<el-config-provider :locale="zhCn">
|
|||
|
|
<el-row>
|
|||
|
|
<el-button style="margin-left: 25px;" color="#626aef" v-print="'#printArea'"><el-icon>
|
|||
|
|
<Printer />
|
|||
|
|
</el-icon>打印标签</el-button>
|
|||
|
|
</el-row>
|
|||
|
|
<el-container class="content">
|
|||
|
|
<!-- <div style="width: 0;height: 0;overflow: hidden"> -->
|
|||
|
|
<div>
|
|||
|
|
<div id="printArea" class="objectDialogFlowPrint">
|
|||
|
|
<div class="myPrint">
|
|||
|
|
<div class="pageWarp" v-for="item in printTabs">
|
|||
|
|
<el-card :body-style="{ padding: '0px', display: 'flex' }">
|
|||
|
|
<qrcode-vue :value="item.name + '&' + item.quantity" :size="size" :foreground="color"
|
|||
|
|
level="H" style="margin: 15px" />
|
|||
|
|
<div style="padding: 14px; text-align: left;">
|
|||
|
|
<span style="font-size: 27pt;font-weight: bold; margin-left: 0;">零件号：{{ item.name
|
|||
|
|
}}</span>
|
|||
|
|
<br />
|
|||
|
|
<span style="font-size: 27pt;font-weight: bold; margin-left: 0;">数 量：{{
|
|||
|
|
item.quantity }}</span>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-container>
|
|||
|
|
</el-config-provider>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
import QrcodeVue from 'qrcode.vue'
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'printDemo',
|
|||
|
|
components: {
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
printTabs: [
|
|||
|
|
{
|
|||
|
|
name: '测试物料1',
|
|||
|
|
quantity: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '测试物料2',
|
|||
|
|
quantity: 2
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
size: ref(200),
|
|||
|
|
color: ref('#000000')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.content {
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.objectDialogFlowPrint .pageWarp {
|
|||
|
|
/*这句话很重要，控制时候强制分页 https://www.w3school.com.cn/cssref/pr_page-break-after.asp*/
|
|||
|
|
page-break-after: always;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 5px auto;
|
|||
|
|
padding: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.objectDialogFlowPrint .myPrint {
|
|||
|
|
/* 打印的时候是否显示底色 */
|
|||
|
|
print-color-adjust: exact;
|
|||
|
|
}</style>
|