feat:更换企业授权

src/views/asset-management/asset-information/components/dialogs/PackageRechargeDialog.vue

@@ -44,17 +44,17 @@
           </ElOption>
         </ElSelect>
         <template v-if="noSeriesId">
-          <div style=" margin-top: 4px; font-size: 12px;color: var(--el-text-color-warning)">
+          <div style="margin-top: 4px; font-size: 12px; color: var(--el-text-color-warning)">
             该设备未关联套餐系列，无法购买套餐
           </div>
         </template>
         <template v-else-if="packagesEmptyWithSeriesId">
-          <div style=" margin-top: 4px; font-size: 12px;color: var(--el-text-color-info)">
+          <div style="margin-top: 4px; font-size: 12px; color: var(--el-text-color-info)">
             该系列暂无可用套餐
           </div>
         </template>
         <template v-else-if="selectedPackageIsGift">
-          <div style=" margin-top: 4px; font-size: 12px;color: var(--el-color-warning)">
+          <div style="margin-top: 4px; font-size: 12px; color: var(--el-color-warning)">
             提示: 赠送套餐只能使用线下支付方式，且必须上传支付凭证
           </div>
         </template>
@@ -83,23 +83,13 @@
         label="支付凭证"
         prop="payment_voucher_key"
       >
-        <ElUpload
+        <VoucherUpload
           ref="uploadRef"
-          class="payment-voucher-upload"
-          drag
-          :auto-upload="false"
-          :on-change="handleVoucherFileChange"
-          :on-remove="handleRemoveVoucher"
-          accept="image/*"
-          list-type="picture"
-          :limit="1"
-        >
-          <el-icon class="payment-voucher-upload__icon"><UploadFilled /></el-icon>
-          <div class="payment-voucher-upload__text"> 将支付凭证拖到此处，或<em>点击上传</em> </div>
-          <template #tip>
-            <div class="el-upload__tip">支持 jpg、png 格式，文件大小不超过 5MB</div>
-          </template>
-        </ElUpload>
+          v-model="form.payment_voucher_key"
+          voucher-name="支付凭证"
+          @uploading-change="voucherUploading = $event"
+          @change="formRef?.validateField('payment_voucher_key')"
+        />
       </ElFormItem>
     </ElForm>
     <template #footer>
@@ -111,7 +101,7 @@
           :loading="loading || voucherUploading"
           :disabled="voucherUploading"
         >
-          {{ voucherUploading ? '图片上传中...' : '提交' }}
+          {{ voucherUploading ? '凭证上传中...' : '提交' }}
         </ElButton>
       </div>
     </template>
@@ -119,24 +109,22 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, nextTick, reactive, ref, watch } from 'vue'
+  import { computed, reactive, ref, watch } from 'vue'
   import {
     ElButton,
     ElDialog,
     ElForm,
     ElFormItem,
-    ElIcon,
     ElMessage,
     ElOption,
     ElSelect,
-    ElTag,
-    ElUpload
+    ElTag
   } from 'element-plus'
-  import { UploadFilled } from '@element-plus/icons-vue'
-  import type { FormInstance, FormRules, UploadFile, UploadInstance } from 'element-plus'
-  import { OrderService, PackageManageService, StorageService } from '@/api/modules'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import { OrderService, PackageManageService } from '@/api/modules'
   import type { CreateOrderRequest, PackageResponse } from '@/types/api'
   import { useUserStore } from '@/store/modules/user'
+  import VoucherUpload from '@/components/business/VoucherUpload.vue'
 
   interface Props {
     modelValue: boolean
@@ -156,13 +144,12 @@
 
   const userStore = useUserStore()
   const formRef = ref<FormInstance>()
-  const uploadRef = ref<UploadInstance>()
+  const uploadRef = ref<InstanceType<typeof VoucherUpload>>()
   const loading = ref(false)
   const voucherUploading = ref(false)
   const packageSearchLoading = ref(false)
   const packageOptions = ref<PackageResponse[]>([])
   const packagesEmptyWithSeriesId = ref(false)
-  let activeVoucherUploadId = 0
 
   const form = reactive({
     package_id: undefined as number | undefined,
@@ -311,80 +298,6 @@
     }
   }
 
-  const invalidateVoucherUploadState = (clearFileKey = false) => {
-    activeVoucherUploadId += 1
-    voucherUploading.value = false
-    if (clearFileKey) {
-      form.payment_voucher_key = undefined
-    }
-  }
-
-  const handleVoucherFileChange = async (uploadFile: UploadFile) => {
-    const file = uploadFile.raw
-    if (!file) return
-
-    const isImage = file.type.startsWith('image/')
-    if (!isImage) {
-      ElMessage.error('只能上传图片文件!')
-      uploadRef.value?.clearFiles()
-      return
-    }
-
-    const isLt5M = file.size / 1024 / 1024 < 5
-    if (!isLt5M) {
-      ElMessage.error('图片大小不能超过 5MB!')
-      uploadRef.value?.clearFiles()
-      return
-    }
-
-    const requestId = ++activeVoucherUploadId
-    voucherUploading.value = true
-    form.payment_voucher_key = undefined
-
-    try {
-      ElMessage.info('正在上传支付凭证...')
-
-      const uploadUrlRes = await StorageService.getUploadUrl({
-        file_name: file.name,
-        content_type: file.type,
-        purpose: 'attachment'
-      })
-
-      if (uploadUrlRes.code !== 0) {
-        if (requestId !== activeVoucherUploadId) return
-        ElMessage.error(uploadUrlRes.msg || '获取上传地址失败')
-        uploadRef.value?.clearFiles()
-        return
-      }
-
-      const { upload_url, file_key } = uploadUrlRes.data
-      await StorageService.uploadFile(upload_url, file, file.type)
-
-      if (requestId !== activeVoucherUploadId) return
-
-      form.payment_voucher_key = file_key
-      ElMessage.success('上传成功')
-      nextTick(() => {
-        formRef.value?.validateField('payment_voucher_key')
-      })
-    } catch (error: any) {
-      if (requestId !== activeVoucherUploadId) return
-
-      console.error('上传支付凭证失败:', error)
-      ElMessage.error(error?.message || '上传失败，请重试')
-      form.payment_voucher_key = undefined
-      uploadRef.value?.clearFiles()
-    } finally {
-      if (requestId === activeVoucherUploadId) {
-        voucherUploading.value = false
-      }
-    }
-  }
-
-  const handleRemoveVoucher = () => {
-    invalidateVoucherUploadState(true)
-  }
-
   const handleCancel = () => {
     visible.value = false
   }
@@ -447,10 +360,11 @@
     formRef.value?.resetFields()
     form.package_id = undefined
     form.payment_method = 'wallet'
-    invalidateVoucherUploadState(true)
+    form.payment_voucher_key = undefined
+    voucherUploading.value = false
     packageOptions.value = []
     packagesEmptyWithSeriesId.value = false
-    uploadRef.value?.clearFiles()
+    uploadRef.value?.clearFiles(false)
   }
 </script>
 
@@ -460,34 +374,4 @@
     gap: 12px;
     justify-content: flex-end;
   }
-
-  .payment-voucher-upload {
-    width: 100%;
-
-    :deep(.el-upload) {
-      width: 100%;
-    }
-
-    :deep(.el-upload-dragger) {
-      width: 100%;
-      padding: 24px 16px;
-      border-radius: 8px;
-    }
-
-    &__icon {
-      margin-bottom: 12px;
-      font-size: 28px;
-      color: var(--el-color-primary);
-    }
-
-    &__text {
-      font-size: 14px;
-      color: var(--el-text-color-regular);
-
-      em {
-        font-style: normal;
-        color: var(--el-color-primary);
-      }
-    }
-  }
 </style>