feat:更换企业授权

src/components/business/CreateRefundDialog.vue

@@ -47,23 +47,13 @@
         />
       </ElFormItem>
       <ElFormItem label="退款凭证" prop="refund_voucher_key">
-        <ElUpload
+        <VoucherUpload
           ref="uploadRef"
-          class="refund-voucher-upload"
-          drag
-          :auto-upload="false"
-          :on-change="handleVoucherFileChange"
-          :on-remove="handleRemoveVoucher"
-          accept="image/*"
-          list-type="picture"
-          multiple
-        >
-          <ElIcon class="refund-voucher-upload__icon"><UploadFilled /></ElIcon>
-          <div class="refund-voucher-upload__text">将退款凭证拖到此处，或<em>点击上传</em></div>
-          <template #tip>
-            <div class="el-upload__tip">支持所有图片格式，可上传多张</div>
-          </template>
-        </ElUpload>
+          v-model="formData.refund_voucher_key"
+          voucher-name="退款凭证"
+          @uploading-change="voucherUploading = $event"
+          @change="formRef?.validateField('refund_voucher_key')"
+        />
       </ElFormItem>
     </ElForm>
     <template #footer>
@@ -75,7 +65,7 @@
           :loading="submitLoading || voucherUploading"
           :disabled="voucherUploading"
         >
-          {{ voucherUploading ? '图片上传中...' : '确认创建' }}
+          {{ voucherUploading ? '凭证上传中...' : '确认创建' }}
         </ElButton>
       </div>
     </template>
@@ -83,13 +73,13 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, computed, watch, nextTick } from 'vue'
+  import { ref, reactive, computed, watch } from 'vue'
   import { ElMessage } from 'element-plus'
-  import { UploadFilled } from '@element-plus/icons-vue'
-  import type { FormInstance, FormRules, UploadFile, UploadInstance } from 'element-plus'
-  import { RefundService, OrderService, StorageService } from '@/api/modules'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import { RefundService, OrderService } from '@/api/modules'
   import type { CreateRefundRequest, Order } from '@/types/api'
   import { formatMoney, yuanToFen } from '@/utils/business/format'
+  import VoucherUpload from '@/components/business/VoucherUpload.vue'
 
   interface Props {
     modelValue: boolean
@@ -109,13 +99,11 @@
   })
 
   const formRef = ref<FormInstance>()
-  const uploadRef = ref<UploadInstance>()
+  const uploadRef = ref<InstanceType<typeof VoucherUpload>>()
   const submitLoading = ref(false)
   const voucherUploading = ref(false)
-  const voucherUploadingCount = ref(0)
   const orderSearchLoading = ref(false)
   const orderSearchOptions = ref<Order[]>([])
-  let activeVoucherUploadBatch = 0
 
   const formData = reactive<{
     order_id: number | null
@@ -207,96 +195,14 @@
 
   const handleDialogClosed = () => {
     formRef.value?.resetFields()
-    activeVoucherUploadBatch += 1
-    voucherUploadingCount.value = 0
     voucherUploading.value = false
     formData.order_id = null
     formData.requested_refund_amount = undefined
     formData.actual_received_amount = 0
     formData.refund_reason = ''
     formData.refund_voucher_key = undefined
-    voucherFileKeyMap.clear()
-    removedVoucherUploadUids.clear()
     orderSearchOptions.value = []
-    uploadRef.value?.clearFiles()
-  }
-
-  const voucherFileKeyMap = new Map<number, string>()
-  const removedVoucherUploadUids = new Set<number>()
-
-  const refreshPaymentVoucherKey = () => {
-    const keys = Array.from(voucherFileKeyMap.values())
-    formData.refund_voucher_key = keys.length ? keys.join(',') : undefined
-  }
-
-  const removeUploadFile = (uploadFile: UploadFile) => {
-    uploadRef.value?.handleRemove(uploadFile)
-  }
-
-  const handleVoucherFileChange = async (uploadFile: UploadFile) => {
-    const file = uploadFile.raw
-    if (!file) return
-
-    if (!file.type.startsWith('image/')) {
-      ElMessage.error('只能上传图片文件!')
-      removeUploadFile(uploadFile)
-      return
-    }
-
-    const uploadBatch = activeVoucherUploadBatch
-    removedVoucherUploadUids.delete(uploadFile.uid)
-    voucherUploadingCount.value += 1
-    voucherUploading.value = voucherUploadingCount.value > 0
-
-    try {
-      ElMessage.info('正在上传退款凭证...')
-      const uploadUrlRes = await StorageService.getUploadUrl({
-        file_name: file.name,
-        content_type: file.type,
-        purpose: 'attachment'
-      })
-
-      if (uploadUrlRes.code !== 0) {
-        ElMessage.error(uploadUrlRes.msg || '获取上传地址失败')
-        removeUploadFile(uploadFile)
-        return
-      }
-
-      const { upload_url, file_key } = uploadUrlRes.data
-      await StorageService.uploadFile(upload_url, file, file.type)
-
-      if (
-        uploadBatch !== activeVoucherUploadBatch ||
-        removedVoucherUploadUids.has(uploadFile.uid)
-      ) {
-        return
-      }
-
-      voucherFileKeyMap.set(uploadFile.uid, file_key)
-      refreshPaymentVoucherKey()
-      ElMessage.success('上传成功')
-      await nextTick(() => {
-        formRef.value?.validateField('refund_voucher_key')
-      })
-    } catch (error: any) {
-      if (uploadBatch !== activeVoucherUploadBatch) return
-      console.error('上传退款凭证失败:', error)
-      ElMessage.error(error.message || '上传失败，请重试')
-      voucherFileKeyMap.delete(uploadFile.uid)
-      refreshPaymentVoucherKey()
-      removeUploadFile(uploadFile)
-    } finally {
-      if (uploadBatch === activeVoucherUploadBatch) {
-        voucherUploadingCount.value = Math.max(0, voucherUploadingCount.value - 1)
-        voucherUploading.value = voucherUploadingCount.value > 0
-      }
-    }
-  }
-
-  const handleRemoveVoucher = (uploadFile: UploadFile) => {
-    removedVoucherUploadUids.add(uploadFile.uid)
-    voucherFileKeyMap.delete(uploadFile.uid)
-    refreshPaymentVoucherKey()
+    uploadRef.value?.clearFiles(false)
   }
 
   const handleSubmit = async () => {
@@ -343,35 +249,3 @@
     }
   })
 </script>
-
-<style scoped lang="scss">
-  .refund-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>