style：设备台账-编辑-二维码组件调用

src/views/mes/deviceledger/DeviceLedgerForm.vue

@@ -199,38 +199,20 @@
         </el-col>
         <el-col v-if="formType === 'update'" :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.qrcode')" prop="qrcodeUrl">
-            <div class="device-ledger-qrcode-wrap">
+            <QrcodeActionCard
-              <el-image
+              :image-url="formData.qrcodeUrl"
-                v-if="formData.qrcodeUrl"
+              :print-id="formData.id"
-                :src="formData.qrcodeUrl"
+              :print-title="`${formData.deviceName || '设备'}码打印预览`"
-                :preview-src-list="[formData.qrcodeUrl]"
+              :print-paper-width="80"
-                preview-teleported
+              :print-paper-height="80"
-                fit="cover"
+              :print-max-width="220"
-                class="device-ledger-qrcode-img"
+              :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeEmpty')"
-              >
+              :error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
-                <template #error>
+              :refresh-url="getQrcodeRefreshUrl()"
-                  <div class="device-ledger-qrcode-error">{{ t('EquipmentManagement.EquipmentLedger.qrcodeLoadError') }}</div>
+              :refresh-disabled="!formData.id || !formData.deviceCode"
-                </template>
+              refresh-confirm-text="确认刷新该设备二维码吗？"
-              </el-image>
+              @refresh-success="handleQrcodeRefreshSuccess"
-              <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"
-                  :disabled="regenerateCodeLoading"
-                  @click="handleRegenerateCode"
-                >
-                  <Icon icon="ep:refresh" />
-                </el-button>
-              </div>
-            </div>
           </el-form-item>
         </el-col>
 
@@ -299,7 +281,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'
+import QrcodeActionCard from '@/components/QrcodeActionCard/index.vue'
 
 /** 设备类型 表单 */
 defineOptions({ name: 'DeviceLedgerForm' })
@@ -311,7 +293,6 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const regenerateCodeLoading = ref(false)
 const deviceList = ref<DeviceVO[]>([]) // 列表
 
 const parseIdsValue = (value: any): number[] => {
@@ -522,30 +503,20 @@ const handleCodeAutoChange = (value: boolean) => {
   formRef.value?.clearValidate('deviceCode')
 }
 
-const handleRegenerateCode = async () => {
+const getQrcodeRefreshUrl = () => {
-  if (!formData.value.id || !formData.value.deviceCode) return
+  if (!formData.value.id || !formData.value.deviceCode) return ''
-  regenerateCodeLoading.value = true
+  return `/mes/device-ledger/regenerate-code?id=${formData.value.id}&code=${encodeURIComponent(String(formData.value.deviceCode))}`
-  try {
-    const data = await DeviceLedgerApi.regenerateCode(formData.value.id, formData.value.deviceCode)
-    if (data?.qrcodeUrl) {
-      formData.value.qrcodeUrl = data.qrcodeUrl
-    } else {
-      const detail = await DeviceLedgerApi.getDeviceLedger(formData.value.id)
-      formData.value.qrcodeUrl = detail?.qrcodeUrl
-      formData.value.deviceCode = detail?.deviceCode ?? formData.value.deviceCode
-    }
-    message.success(t('common.updateSuccess'))
-  } finally {
-    regenerateCodeLoading.value = false
-  }
 }
 
-const handlePreviewQrcode = () => {
+const handleQrcodeRefreshSuccess = async (data: any) => {
-  if (!formData.value.qrcodeUrl) return
+  if (!formData.value.id) return
-  createImageViewer({
+  if (data?.qrcodeUrl) {
-    zIndex: 9999999,
+    formData.value.qrcodeUrl = data.qrcodeUrl
-    urlList: [formData.value.qrcodeUrl]
+    return
-  })
+  }
+  const detail = await DeviceLedgerApi.getDeviceLedger(formData.value.id)
+  formData.value.qrcodeUrl = detail?.qrcodeUrl
+  formData.value.deviceCode = detail?.deviceCode ?? formData.value.deviceCode
 }
 
 const ensureOptionsLoaded = async () => {
@@ -710,47 +681,4 @@ const resetForm = () => {
   white-space: nowrap;
 }
 
-.device-ledger-qrcode-wrap {
-  position: relative;
-  height: 150px;
-  width: fit-content;
-  min-width: 150px;
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid var(--el-border-color-lighter);
-  background: var(--el-fill-color-blank);
-}
-
-.device-ledger-qrcode-img {
-  height: 150px;
-  width: auto;
-  display: block;
-}
-
-.device-ledger-qrcode-error {
-  height: 150px;
-  min-width: 150px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--el-text-color-secondary);
-  font-size: 12px;
-  padding: 0 12px;
-}
-
-.device-ledger-qrcode-mask {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  background: rgba(0, 0, 0, 0.35);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.device-ledger-qrcode-wrap:hover .device-ledger-qrcode-mask {
-  opacity: 1;
-}
 </style>