BillionMes073.git

			@@ -1,309 +1,101 @@
			<template>
			<div class="app-container">
			<el-row :gutter="20">
			<el-col :span="12">
			<el-col :span="24">
			<el-card class="box-card">
			<div slot="header" class="clearfix">
			<span>样机标签打印</span>
			<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 ref="form" :model="form" :rules="rules" label-width="100px" @submit.native.prevent>
			<el-form-item label="序列号" prop="SNCode">
			<input
			v-model="form.SNCode"
			ref="inputdata"
			placeholder="请输入序列号"
			style="width: 100%; height: 40px; font-size: 30px"
			/>
			</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'

			import {addPassStationCollection} from "@/api/main/da/stationCollection";

			export default {
			name: 'PrototypeLabelPrinting',
			components: {
			QrcodeVue
			},
			data() {
			return {
			printing: false,
			scannerFlag: false,
			form: {
			groupName: '',
			prototypeCode: ''
			SNCode: '',
			LocationCode: 'OP010'
			},
			rules: {
			groupName: [
			{ required: true, message: '请选择组别', trigger: 'change' }
			],
			prototypeCode: [
			{ required: true, message: '请输入样机编号', trigger: 'blur' }
			SNCode: [
			{ 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
			}
			}
			setFocus(){
			this.$nextTick(()=>{
			this.$refs.inputdata.focus()
			})
			}
			},

			handleScannerInput(event){
			if (this.scannerFlag){
			this.form.SNCode = ''
			this.$refs.inputdata.value = ''
			this.scannerFlag = false
			}
			const input = event.target
			this.form.SNCode = input.value
			if (event.key === 'Enter'){
			this.scannerFlag = true
			//扫描完成
			addPassStationCollection({SNCode:this.form.SNCode,LocationCode: this.form.LocationCode}).then(res => {

			if (res.code === 200){
			this.$message({
			message: "扫码完成",
			type: "success"
			})
			} else {
			this.$message({
			message: "扫码错误，请重试",
			type: "error"
			})
			}
			})
			}
			},
			},
			mounted() {
			console.log('00')
			this.setFocus();
			this.$nextTick(() => {
			if (this.$refs.inputdata){
			this.$refs.inputdata.addEventListener('keydown',this.handleScannerInput)
			}

			})

			},

			beforeDestroy() {
			this.$refs.inputdata.removeEventListener('keydown',this.handleScannerInput)
			}
			}
			</script>