style：修改产品物料、备件、设备、模具管理二维码样式

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;

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;

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;

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;