From 105d6b807d69eb95b3426f5cf6e87a8ff7b0611c Mon Sep 17 00:00:00 2001
From: 吴健 <14790700720@163.com>
Date: 星期三, 14 五月 2025 10:34:45 +0800
Subject: [PATCH] first-add
---
billion-ui/src/views/main/bq/prototypeLabelPrinting/index.vue | 338 ++++++++++---------------------------------------------
1 files changed, 65 insertions(+), 273 deletions(-)
diff --git a/billion-ui/src/views/main/bq/prototypeLabelPrinting/index.vue b/billion-ui/src/views/main/bq/prototypeLabelPrinting/index.vue
index 0ccc786..603e1fc 100644
--- a/billion-ui/src/views/main/bq/prototypeLabelPrinting/index.vue
+++ b/billion-ui/src/views/main/bq/prototypeLabelPrinting/index.vue
@@ -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>
--
Gitblit v1.9.3