From 76d3a0a5c6ef2b3d0f5cb56eb49b4ae56121ea30 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Fri, 27 Mar 2026 10:30:26 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E4=BF=AE=E6=94=B9=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E7=89=A9=E6=96=99=E3=80=81=E5=A4=87=E4=BB=B6=E3=80=81?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E3=80=81=E6=A8=A1=E5=85=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../erp/component/product/ProductForm.vue     | 19 ++++++++++++++++++-
 src/views/erp/mold/components/MoldForm.vue    | 17 +++++++++++++++++
 src/views/erp/product/product/ProductForm.vue | 19 ++++++++++++++++++-
 .../mes/deviceledger/DeviceLedgerForm.vue     | 17 +++++++++++++++++
 4 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/views/erp/component/product/ProductForm.vue b/src/views/erp/component/product/ProductForm.vue
index f5c2ef84..ae9e14d3 100644
--- a/src/views/erp/component/product/ProductForm.vue
+++ b/src/views/erp/component/product/ProductForm.vue
@@ -99,7 +99,7 @@
             </el-radio-group>
           </el-form-item>
         </el-col>
-        <el-col v-if="formType === 'update'" :span="12">
+        <el-col v-if="formType === 'update'" :span="24">
           <el-form-item :label="t('SparePartsManagement.SpareInfo.qrcode')" prop="qrcodeUrl">
             <div class="product-form-qrcode-wrap">
               <el-image
@@ -120,6 +120,13 @@
                 {{ t('SparePartsManagement.SpareInfo.qrcodeEmpty') }}
               </div>
               <div class="product-form-qrcode-mask">
+                <el-button
+                  circle
+                  :disabled="!formData.qrcodeUrl"
+                  @click="handlePreviewQrcode"
+                >
+                  <Icon icon="ep:zoom-in" />
+                </el-button>
                 <el-button
                   circle
                   :loading="regenerateCodeLoading"
@@ -148,6 +155,7 @@
 <script setup lang="ts">
 import { ProductApi, ProductVO } from '@/api/erp/product/product'
 import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
+import { createImageViewer } from '@/components/ImageViewer'
 import { CommonStatusEnum } from '@/utils/constants'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
@@ -246,6 +254,14 @@ const handleRegenerateCode = async () => {
   }
 }
 
+const handlePreviewQrcode = () => {
+  if (!formData.value.qrcodeUrl) return
+  createImageViewer({
+    zIndex: 9999999,
+    urlList: [formData.value.qrcodeUrl]
+  })
+}
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -328,6 +344,7 @@ const resetForm = () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   background: rgba(0, 0, 0, 0.35);
   opacity: 0;
   transition: opacity 0.2s ease;
diff --git a/src/views/erp/mold/components/MoldForm.vue b/src/views/erp/mold/components/MoldForm.vue
index 58bcf7fe..c48bd250 100644
--- a/src/views/erp/mold/components/MoldForm.vue
+++ b/src/views/erp/mold/components/MoldForm.vue
@@ -100,6 +100,13 @@
           </el-image>
           <div v-else class="mold-form-qrcode-error">{{ t('MoldManagement.Mold.qrcodeEmpty') }}</div>
           <div class="mold-form-qrcode-mask">
+            <el-button
+              circle
+              :disabled="!formData.qrcodeUrl"
+              @click="handlePreviewQrcode"
+            >
+              <Icon icon="ep:zoom-in" />
+            </el-button>
             <el-button
               circle
               :loading="regenerateCodeLoading"
@@ -148,6 +155,7 @@
 import { getIntDictOptions, DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
 import { MoldBrandApi } from '@/api/erp/mold'
 import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
+import { createImageViewer } from '@/components/ImageViewer'
 const unitList = ref<ProductUnitVO[]>([]) // 产品单位列表
 
 const { t } = useI18n() // 国际化
@@ -255,6 +263,14 @@ const handleRegenerateCode = async () => {
   }
 }
 
+const handlePreviewQrcode = () => {
+  if (!formData.value.qrcodeUrl) return
+  createImageViewer({
+    zIndex: 9999999,
+    urlList: [formData.value.qrcodeUrl]
+  })
+}
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -336,6 +352,7 @@ const resetForm = () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   background: rgba(0, 0, 0, 0.35);
   opacity: 0;
   transition: opacity 0.2s ease;
diff --git a/src/views/erp/product/product/ProductForm.vue b/src/views/erp/product/product/ProductForm.vue
index 9016913e..f75577b2 100644
--- a/src/views/erp/product/product/ProductForm.vue
+++ b/src/views/erp/product/product/ProductForm.vue
@@ -133,7 +133,7 @@
             </el-radio-group>
           </el-form-item>
         </el-col>
-        <el-col v-if="formType === 'update'" :span="12">
+        <el-col v-if="formType === 'update'" :span="24">
           <el-form-item :label="t('FactoryModeling.ProductInformation.qrcode')" prop="qrcodeUrl">
             <div class="product-form-qrcode-wrap">
               <el-image
@@ -154,6 +154,13 @@
                 {{ t('FactoryModeling.ProductInformation.qrcodeEmpty') }}
               </div>
               <div class="product-form-qrcode-mask">
+                <el-button
+                  circle
+                  :disabled="!formData.qrcodeUrl"
+                  @click="handlePreviewQrcode"
+                >
+                  <Icon icon="ep:zoom-in" />
+                </el-button>
                 <el-button
                   circle
                   :loading="regenerateCodeLoading"
@@ -183,6 +190,7 @@
 import { ProductApi, ProductVO } from '@/api/erp/product/product'
 import { ProductCategoryApi, ProductCategoryVO } from '@/api/erp/product/category'
 import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
+import { createImageViewer } from '@/components/ImageViewer'
 import { CommonStatusEnum } from '@/utils/constants'
 import { defaultProps, handleTree } from '@/utils/tree'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@@ -286,6 +294,14 @@ const handleRegenerateCode = async () => {
   }
 }
 
+const handlePreviewQrcode = () => {
+  if (!formData.value.qrcodeUrl) return
+  createImageViewer({
+    zIndex: 9999999,
+    urlList: [formData.value.qrcodeUrl]
+  })
+}
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -367,6 +383,7 @@ const resetForm = () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   background: rgba(0, 0, 0, 0.35);
   opacity: 0;
   transition: opacity 0.2s ease;
diff --git a/src/views/mes/deviceledger/DeviceLedgerForm.vue b/src/views/mes/deviceledger/DeviceLedgerForm.vue
index db7b096f..1c31bb81 100644
--- a/src/views/mes/deviceledger/DeviceLedgerForm.vue
+++ b/src/views/mes/deviceledger/DeviceLedgerForm.vue
@@ -214,6 +214,13 @@
               </el-image>
               <div v-else class="device-ledger-qrcode-error">{{ t('EquipmentManagement.EquipmentLedger.qrcodeEmpty') }}</div>
               <div class="device-ledger-qrcode-mask">
+                <el-button
+                  circle
+                  :disabled="!formData.qrcodeUrl"
+                  @click="handlePreviewQrcode"
+                >
+                  <Icon icon="ep:zoom-in" />
+                </el-button>
                 <el-button
                   circle
                   :loading="regenerateCodeLoading"
@@ -292,6 +299,7 @@ import { formatDate } from '@/utils/formatTime'
 import type { FormRules } from 'element-plus'
 import { ProductApi } from '@/api/erp/product/product'
 import { DeviceApi,DeviceVO } from '@/api/iot/device'
+import { createImageViewer } from '@/components/ImageViewer'
 
 /** 设备类型 表单 */
 defineOptions({ name: 'DeviceLedgerForm' })
@@ -532,6 +540,14 @@ const handleRegenerateCode = async () => {
   }
 }
 
+const handlePreviewQrcode = () => {
+  if (!formData.value.qrcodeUrl) return
+  createImageViewer({
+    zIndex: 9999999,
+    urlList: [formData.value.qrcodeUrl]
+  })
+}
+
 const ensureOptionsLoaded = async () => {
   const [deviceTypeRes, userRes, criticalRes, beijianRes] = await Promise.all([
     DeviceTypeApi.getDeviceTypeTree({ pageNo: 1, pageSize: 10 }),
@@ -728,6 +744,7 @@ const resetForm = () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   background: rgba(0, 0, 0, 0.35);
   opacity: 0;
   transition: opacity 0.2s ease;