From a68b1949feb222a796f3d889677a6cab5aa92922 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Fri, 27 Mar 2026 09:51:55 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E8=AE=BE=E5=A4=87=E5=85=B3?=
 =?UTF-8?q?=E9=94=AE=E4=BB=B6-=E4=BA=8C=E7=BB=B4=E7=A0=81=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=A2=84=E8=A7=88=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CriticalComponentForm.vue                  | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/views/mes/criticalComponent/CriticalComponentForm.vue b/src/views/mes/criticalComponent/CriticalComponentForm.vue
index 006ed5fc..4b0efa05 100644
--- a/src/views/mes/criticalComponent/CriticalComponentForm.vue
+++ b/src/views/mes/criticalComponent/CriticalComponentForm.vue
@@ -61,6 +61,13 @@
           </el-image>
           <div v-else class="critical-component-qrcode-error">{{ t('EquipmentManagement.EquipmentKeyItems.qrcodeEmpty') }}</div>
           <div class="critical-component-qrcode-mask">
+            <el-button
+              circle
+              :disabled="!formData.qrcodeUrl"
+              @click="handlePreviewQrcode"
+            >
+              <Icon icon="ep:zoom-in" />
+            </el-button>
             <el-button
               circle
               :loading="regenerateCodeLoading"
@@ -90,6 +97,7 @@
 
 <script setup lang="ts">
 import { CriticalComponentApi, CriticalComponentVO } from '@/api/mes/criticalComponent'
+import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'CriticalComponentForm' })
 
@@ -170,6 +178,14 @@ const handleRegenerateCode = async () => {
   }
 }
 
+const handlePreviewQrcode = () => {
+  if (!formData.value.qrcodeUrl) return
+  createImageViewer({
+    zIndex: 9999999,
+    urlList: [formData.value.qrcodeUrl]
+  })
+}
+
 const open = async (type: 'create' | 'update', id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
@@ -252,6 +268,7 @@ const submitForm = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   background: rgba(0, 0, 0, 0.35);
   opacity: 0;
   transition: opacity 0.2s ease;
@@ -261,4 +278,3 @@ const submitForm = async () => {
   opacity: 1;
 }
 </style>
-