feat:更换企业授权

src/views/finance/refund/detail.vue

@@ -22,13 +22,7 @@
       </div>
     </ElCard>
 
-    <ElImageViewer
-      v-if="voucherPreviewVisible"
-      :url-list="refundVoucherUrls"
-      :initial-index="voucherPreviewIndex"
-      hide-on-click-modal
-      @close="voucherPreviewVisible = false"
-    />
+    <PaymentVoucherDialog :file-key="refundVoucherFileKey" @close="refundVoucherFileKey = ''" />
 
     <!-- 审批通过对话框 -->
     <ElDialog
@@ -172,11 +166,11 @@
 <script setup lang="ts">
   import { ref, onMounted, computed, h, reactive } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
-  import { ElCard, ElImageViewer, ElIcon, ElMessage, ElTag } from 'element-plus'
+  import { ElButton, ElCard, ElIcon, ElMessage, ElTag } from 'element-plus'
   import { ArrowLeft, Loading } from '@element-plus/icons-vue'
   import DetailPage from '@/components/common/DetailPage.vue'
   import type { DetailSection } from '@/components/common/DetailPage.vue'
-  import { RefundService, StorageService } from '@/api/modules'
+  import { RefundService } from '@/api/modules'
   import type {
     Refund,
     RefundStatus,
@@ -185,6 +179,7 @@
     ResubmitRefundRequest
   } from '@/types/api'
   import { formatDateTime, yuanToFen } from '@/utils/business/format'
+  import PaymentVoucherDialog from '@/components/business/PaymentVoucherDialog.vue'
 
   defineOptions({ name: 'RefundDetail' })
 
@@ -193,9 +188,7 @@
 
   const loading = ref(false)
   const refund = ref<Refund | null>(null)
-  const refundVoucherUrls = ref<string[]>([])
-  const voucherPreviewVisible = ref(false)
-  const voucherPreviewIndex = ref(0)
+  const refundVoucherFileKey = ref('')
 
   const pageTitle = computed(() => `退款详情`)
 
@@ -262,14 +255,6 @@
     return statusMap[status] || '-'
   }
 
-  const getVoucherKeys = (data: Refund): string[] => {
-    const voucherKey = data.refund_voucher_key || ''
-    return voucherKey
-      .split(',')
-      .map((key) => key.trim())
-      .filter(Boolean)
-  }
-
   const detailSections = computed((): DetailSection[] => [
     {
       title: '退款信息',
@@ -309,18 +294,18 @@
         {
           label: '退款凭证',
           fullWidth: true,
-          render: () =>
-            refundVoucherUrls.value.length
+          render: (data) =>
+            data.refund_voucher_key
               ? h(
-                  'div',
-                  { class: 'refund-voucher-list' },
-                  refundVoucherUrls.value.map((url, index) =>
-                    h('img', {
-                      class: 'refund-voucher-image',
-                      src: url,
-                      onClick: () => handlePreviewRefundVoucher(index)
-                    })
-                  )
+                  ElButton,
+                  {
+                    type: 'primary',
+                    link: true,
+                    onClick: () => {
+                      refundVoucherFileKey.value = data.refund_voucher_key
+                    }
+                  },
+                  () => '查看退款凭证'
                 )
               : h('span', '-')
         },
@@ -391,7 +376,6 @@
       const res = await RefundService.getRefundById(id)
       if (res.code === 0) {
         refund.value = res.data
-        await loadRefundVoucherUrls(res.data)
       }
     } catch (error) {
       console.error(error)
@@ -405,26 +389,6 @@
     router.back()
   }
 
-  const loadRefundVoucherUrls = async (data: Refund) => {
-    const fileKeys = getVoucherKeys(data)
-    refundVoucherUrls.value = []
-    if (!fileKeys.length) return
-
-    try {
-      const res = await StorageService.batchDownloadUrls({ file_keys: fileKeys })
-      if (res.code === 0) {
-        refundVoucherUrls.value = fileKeys.map((key) => res.data.urls[key]).filter(Boolean)
-      }
-    } catch (error) {
-      console.error('获取退款凭证失败:', error)
-    }
-  }
-
-  const handlePreviewRefundVoucher = (index: number) => {
-    voucherPreviewIndex.value = index
-    voucherPreviewVisible.value = true
-  }
-
   onMounted(() => {
     const id = route.params.id as string
     if (id) {
@@ -556,21 +520,5 @@
         font-size: 32px;
       }
     }
-
-    :deep(.refund-voucher-list) {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-      line-height: 1;
-    }
-
-    :deep(.refund-voucher-image) {
-      width: 96px;
-      height: 96px;
-      cursor: zoom-in;
-      object-fit: cover;
-      border: 1px solid var(--el-border-color);
-      border-radius: 6px;
-    }
   }
 </style>