From b553f4952a18bc3996692896878c917c13665373 Mon Sep 17 00:00:00 2001 From: user Date: Sat, 8 Mar 2025 16:21:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=A2=E5=8D=95=E6=A8=A1=E5=9D=97:vu?= =?UTF-8?q?e-barcode-reader=20=E6=89=AB=E6=9D=A1=E7=A0=81=E5=92=8C?= =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 41 ++++++++++++ package.json | 1 + .../app/orders/order/order.component.ts | 67 ++++++------------- src/main/webapp/app/orders/order/order.vue | 8 +-- 4 files changed, 64 insertions(+), 53 deletions(-) diff --git a/package-lock.json b/package-lock.json index 55e83a4..3f96d54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "deepmerge": "4.3.1", "pinia": "2.3.1", "vue": "3.5.13", + "vue-barcode-reader": "^1.0.3", "vue-i18n": "11.1.0", "vue-router": "4.5.0", "vue-table-with-tree-grid": "^0.2.4", @@ -4480,6 +4481,28 @@ } } }, + "node_modules/@zxing/library": { + "version": "0.19.3", + "resolved": "https://registry.npmmirror.com/@zxing/library/-/library-0.19.3.tgz", + "integrity": "sha512-RUv5svewpDoD0ymXleOP8yVTO5BLkR0zn5coGC/Vs1671u0OBJ4xdtR8WVWf08OcvrieEMHdSfQY3ZKtqII/hg==", + "license": "MIT", + "dependencies": { + "ts-custom-error": "^3.2.1" + }, + "engines": { + "node": ">= 10.4.0" + }, + "optionalDependencies": { + "@zxing/text-encoding": "~0.9.0" + } + }, + "node_modules/@zxing/text-encoding": { + "version": "0.9.0", + "resolved": "https://registry.npmmirror.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz", + "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==", + "license": "(Unlicense OR Apache-2.0)", + "optional": true + }, "node_modules/abbrev": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-3.0.0.tgz", @@ -12564,6 +12587,15 @@ "typescript": ">=4.8.4" } }, + "node_modules/ts-custom-error": { + "version": "3.3.1", + "resolved": "https://registry.npmmirror.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz", + "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/tslib": { "version": "2.8.1", "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz", @@ -13256,6 +13288,15 @@ } } }, + "node_modules/vue-barcode-reader": { + "version": "1.0.3", + "resolved": "https://registry.npmmirror.com/vue-barcode-reader/-/vue-barcode-reader-1.0.3.tgz", + "integrity": "sha512-z4mv7+ai/8vECppBTb00tHnyFMMx6W1rAaQe+v214ihoaWK9iGrn8ZZsmgSxf3lwnrtGaibLdkonTtMrGsO+dA==", + "license": "MIT", + "dependencies": { + "@zxing/library": "^0.19.1" + } + }, "node_modules/vue-component-type-helpers": { "version": "2.2.4", "resolved": "https://registry.npmmirror.com/vue-component-type-helpers/-/vue-component-type-helpers-2.2.4.tgz", diff --git a/package.json b/package.json index 4323e2c..6a49205 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "deepmerge": "4.3.1", "pinia": "2.3.1", "vue": "3.5.13", + "vue-barcode-reader": "^1.0.3", "vue-i18n": "11.1.0", "vue-router": "4.5.0", "vue-table-with-tree-grid": "^0.2.4", diff --git a/src/main/webapp/app/orders/order/order.component.ts b/src/main/webapp/app/orders/order/order.component.ts index fb3cbff..6e74849 100644 --- a/src/main/webapp/app/orders/order/order.component.ts +++ b/src/main/webapp/app/orders/order/order.component.ts @@ -4,11 +4,14 @@ import { useRouter } from 'vue-router'; import { useAlertService } from '@/shared/alert/alert.service'; import buildPaginationQueryOpts from '@/shared/sort/sorts'; import axios from 'axios'; -import Quagga from '@ericblade/quagga2'; +import { StreamBarcodeReader } from 'vue-barcode-reader'; export default defineComponent({ compatConfig: { MODE: 3 }, name: 'Order', + components: { + StreamBarcodeReader, + }, setup() { const { t: t$ } = useI18n(); const alertService = useAlertService(); @@ -134,57 +137,23 @@ export default defineComponent({ } }; - const initScanner = () => { - Quagga.init( - { - inputStream: { - name: 'Live', - type: 'LiveStream', - target: document.querySelector('#interactive'), - constraints: { - facingMode: 'environment', - }, - }, - decoder: { - readers: ['code_128_reader', 'ean_reader', 'ean_8_reader', 'code_39_reader', 'upc_reader'], - }, - }, - err => { - if (err) { - alertService.showError('扫码器初始化失败，请检查摄像头权限'); - return; - } - Quagga.start(); - scannerActive.value = true; - }, - ); - - Quagga.onDetected(result => { - if (result && result.codeResult) { - const code = result.codeResult.code; - filterParams.value.number = code; - handleFilter(); - stopScanner(); - alertService.showInfo(`扫描成功：${code}`); - } - }); - }; - - const stopScanner = () => { - if (scannerActive.value) { - Quagga.stop(); - scannerActive.value = false; - } - }; - const handleScan = () => { - if (!scannerActive.value) { - initScanner(); - } else { - stopScanner(); + scannerActive.value = !scannerActive.value; + }; + + const onDecode = result => { + if (result) { + filterParams.value.number = result; + handleFilter(); + scannerActive.value = false; + alertService.showInfo(`扫描成功：${result}`); } }; + const onLoaded = () => { + alertService.showInfo('扫码器已就绪'); + }; + const handlePrint = () => { // TODO: 实现打印功能 alertService.showInfo('打印功能开发中'); @@ -212,6 +181,8 @@ export default defineComponent({ handleScan, handlePrint, scannerActive, + onDecode, + onLoaded, }; }, }); diff --git a/src/main/webapp/app/orders/order/order.vue b/src/main/webapp/app/orders/order/order.vue index 6ba2b27..7036569 100644 --- a/src/main/webapp/app/orders/order/order.vue +++ b/src/main/webapp/app/orders/order/order.vue @@ -35,7 +35,7 @@
-
+
@@ -176,15 +176,13 @@ background: #000; padding: 10px; border-radius: 5px; -} - -.viewport { width: 320px; height: 240px; } -#interactive.viewport > video { +.scanner-container video { width: 100%; height: 100%; + object-fit: cover; }