<template>
|
<div class="app-container">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>样机标签打印</span>
|
</div>
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
<el-form-item label="组别" prop="groupName">
|
<el-select v-model="form.groupName" placeholder="请选择组别" style="width: 100%">
|
<el-option
|
v-for="item in groupOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="样机编号" prop="prototypeCode">
|
<el-input
|
v-model="form.prototypeCode"
|
placeholder="请输入样机编号"
|
style="width: 100%">
|
</el-input>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" @click="handlePrint" :loading="printing">
|
<i class="el-icon-printer"></i> 打印标签
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</el-col>
|
|
<el-col :span="12">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>预览区域</span>
|
</div>
|
<div class="print-area">
|
<div id="printSection" class="qrcode-container">
|
<qrcode-vue :value="qrCodeValue" :size="300" level="H"></qrcode-vue>
|
<div class="info-text">
|
<div class="text-item">组别：{{ form.groupName || '-' }}</div>
|
<div class="text-item">样机编号：{{ form.prototypeCode || '-' }}</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import QrcodeVue from 'qrcode.vue'
|
import QRCode from 'qrcode'
|
|
export default {
|
name: 'PrototypeLabelPrinting',
|
components: {
|
QrcodeVue
|
},
|
data() {
|
return {
|
printing: false,
|
form: {
|
groupName: '',
|
prototypeCode: ''
|
},
|
rules: {
|
groupName: [
|
{ required: true, message: '请选择组别', trigger: 'change' }
|
],
|
prototypeCode: [
|
{ required: true, message: '请输入样机编号', trigger: 'blur' }
|
]
|
},
|
groupOptions: [
|
{ value: '研发一组', label: '研发一组' },
|
{ value: '研发二组', label: '研发二组' },
|
{ value: '研发三组', label: '研发三组研发三组' }
|
]
|
}
|
},
|
computed: {
|
qrCodeValue() {
|
if (!this.form.groupName || !this.form.prototypeCode) {
|
return '暂无数据'
|
}
|
return `${this.form.groupName}${this.form.prototypeCode}`
|
}
|
},
|
methods: {
|
handlePrint() {
|
this.$message.success('打印')
|
|
this.$refs.form.validate(async valid => {
|
if (valid) {
|
this.printing = true
|
try {
|
const qrDataUrl = await QRCode.toDataURL(this.qrCodeValue, {
|
width: 800,
|
margin: 1,
|
errorCorrectionLevel: 'H'
|
})
|
|
const testPrintContent = `
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<title>测试打印</title>
|
</head>
|
<body>
|
<h1>这是一个测试打印内容</h1>
|
</body>
|
</html>
|
`
|
|
// 第一个打印机的内容 - 原始标签
|
const firstPrintContent = `
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<title>样机标签打印-1</title>
|
<style>
|
@page {
|
size: 100mm 100mm;
|
margin: 0;
|
}
|
@media print {
|
html, body {
|
margin: 0;
|
padding: 0;
|
height: 100mm;
|
page-break-after: avoid;
|
page-break-before: avoid;
|
}
|
}
|
.print-container {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 100mm;
|
height: 80mm;
|
box-sizing: border-box;
|
padding: 5mm;
|
page-break-inside: avoid;
|
}
|
.qr-code {
|
width: 80mm;
|
height: 80mm;
|
margin-bottom: 3mm;
|
}
|
.qr-code img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
.info-text {
|
text-align: center;
|
font-size: 3mm;
|
font-weight: bold;
|
line-height: 1.5;
|
}
|
.info-text div {
|
margin: 1mm 0;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="print-container">
|
<div class="qr-code">
|
<img src="${qrDataUrl}" alt="QR Code"/>
|
</div>
|
<div class="info-text">
|
<div>组别：${this.form.groupName}</div>
|
<div>样机编号：${this.form.prototypeCode}</div>
|
<div>原始标签</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
`
|
|
// 第二个打印机的内容 - 备用标签
|
const secondPrintContent = `
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<title>样机标签打印-2</title>
|
<style>
|
@page {
|
size: 100mm 100mm;
|
margin: 0;
|
}
|
@media print {
|
html, body {
|
margin: 0;
|
padding: 0;
|
height: 100mm;
|
page-break-after: avoid;
|
page-break-before: avoid;
|
}
|
}
|
.print-container {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 100mm;
|
height: 80mm;
|
box-sizing: border-box;
|
padding: 5mm;
|
page-break-inside: avoid;
|
}
|
.qr-code {
|
width: 80mm;
|
height: 80mm;
|
margin-bottom: 3mm;
|
}
|
.qr-code img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
.info-text {
|
text-align: center;
|
font-size: 3mm;
|
font-weight: bold;
|
line-height: 1.5;
|
}
|
.info-text div {
|
margin: 1mm 0;
|
color: red;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="print-container">
|
<div class="qr-code">
|
<img src="${qrDataUrl}" alt="QR Code"/>
|
</div>
|
<div class="info-text">
|
<div>组别：${this.form.groupName}</div>
|
<div>样机编号：${this.form.prototypeCode}</div>
|
<div>备用标签</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
`
|
|
// 指定打印机名称和对应的内容
|
const printTasks = [
|
{
|
printerName: 'Kyocera ECOSYS M4125idn KX', // 使用系统中实际存在的打印机名称
|
content: testPrintContent
|
},
|
{
|
printerName: 'Kyocera ECOSYS M4125idn KX', // 使用系统中实际存在的打印机名称
|
content: firstPrintContent
|
},
|
{
|
printerName: 'Kyocera ECOSYS M4125idn KX', // 使用系统中实际存在的打印机名称
|
content: secondPrintContent
|
}
|
]
|
|
// 监听打印完成事件
|
if (window.electron?.isElectron) {
|
this.$message.success('22')
|
|
window.electron.ipcRenderer.on('print-complete', (result) => {
|
if (result.success) {
|
this.$message.success('打印成功')
|
} else {
|
this.$message.error(`打印失败: ${result.error}`)
|
console.error('Print error:', result.error)
|
}
|
})
|
|
// 发送打印任务到主进程
|
printTasks.forEach(task => {
|
this.$message.success('33')
|
|
window.electron.ipcRenderer.send('silent-print', {
|
content: task.content,
|
printerName: task.printerName
|
})
|
})
|
}
|
|
this.printing = false
|
} catch (error) {
|
console.error('打印失败:', error)
|
this.$message.error('打印失败，请重试')
|
this.printing = false
|
}
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.app-container {
|
padding: 20px;
|
|
.box-card {
|
margin-bottom: 20px;
|
|
::v-deep .el-card__header {
|
padding: 12px 20px;
|
border-bottom: 1px solid #dcdfe6;
|
|
.clearfix {
|
font-size: 15px;
|
font-weight: bold;
|
color: #303133;
|
}
|
}
|
}
|
}
|
|
.print-area {
|
display: flex;
|
justify-content: center;
|
padding: 20px;
|
|
.qrcode-container {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 30px;
|
border: 1px dashed #d9d9d9;
|
border-radius: 4px;
|
background-color: #fafafa;
|
width: 400px;
|
height: 400px;
|
|
.info-text {
|
margin-top: 20px;
|
text-align: center;
|
|
.text-item {
|
margin: 8px 0;
|
font-size: 14px;
|
color: #606266;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
</style>
|
