feat: 新增退款凭证

src/components/business/CreateRefundDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <ElDialog v-model="dialogVisible" title="创建退款申请" width="30%" @closed="handleDialogClosed">
+  <ElDialog v-model="dialogVisible" title="创建退款申请" width="40%" @closed="handleDialogClosed">
     <ElForm ref="formRef" :model="formData" :rules="formRules" label-width="120px">
       <ElFormItem label="订单号" prop="order_id">
         <ElSelect
@@ -26,7 +26,7 @@
       <ElFormItem label="申请退款金额" prop="requested_refund_amount">
         <ElInputNumber
           v-model="formData.requested_refund_amount"
-          :min="0.01"
+          :min="0"
           :precision="2"
           :step="1"
           style="width: 100%"
@@ -46,12 +46,36 @@
           placeholder="请输入退款原因"
         />
       </ElFormItem>
+      <ElFormItem label="退款凭证" prop="refund_voucher_key">
+        <ElUpload
+          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>
+      </ElFormItem>
     </ElForm>
     <template #footer>
       <div class="dialog-footer">
         <ElButton @click="dialogVisible = false">取消</ElButton>
-        <ElButton type="primary" @click="handleSubmit" :loading="submitLoading">
-          确认创建
+        <ElButton
+          type="primary"
+          @click="handleSubmit"
+          :loading="submitLoading || voucherUploading"
+          :disabled="voucherUploading"
+        >
+          {{ voucherUploading ? '图片上传中...' : '确认创建' }}
         </ElButton>
       </div>
     </template>
@@ -59,10 +83,11 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, computed, watch } from 'vue'
+  import { ref, reactive, computed, watch, nextTick } from 'vue'
   import { ElMessage } from 'element-plus'
-  import type { FormInstance, FormRules } from 'element-plus'
-  import { RefundService, OrderService } from '@/api/modules'
+  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 { CreateRefundRequest, Order } from '@/types/api'
   import { formatMoney, yuanToFen } from '@/utils/business/format'
 
@@ -84,26 +109,32 @@
   })
 
   const formRef = ref<FormInstance>()
+  const uploadRef = ref<UploadInstance>()
   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
     requested_refund_amount?: number
     actual_received_amount: number
     refund_reason: string
+    refund_voucher_key?: string
   }>({
     order_id: null,
     requested_refund_amount: undefined,
     actual_received_amount: 0,
-    refund_reason: ''
+    refund_reason: '',
+    refund_voucher_key: undefined
   })
 
   const validateRefundAmount = (rule: any, value: number, callback: any) => {
     const requestedRefundAmount = yuanToFen(value) ?? 0
-    if (value === undefined || value === null || value <= 0) {
-      callback(new Error('申请退款金额必须大于0'))
+    if (value === undefined || value === null || value < 0) {
+      callback(new Error('申请退款金额不能小于0'))
     } else if (requestedRefundAmount > formData.actual_received_amount) {
       callback(new Error('申请退款金额不能大于实收金额'))
     } else {
@@ -116,7 +147,8 @@
     requested_refund_amount: [
       { required: true, message: '请输入申请退款金额', trigger: 'blur' },
       { validator: validateRefundAmount, trigger: 'blur' }
-    ]
+    ],
+    refund_voucher_key: [{ required: true, message: '请上传退款凭证', trigger: 'change' }]
   })
 
   const hasInitialOrder = computed(() => !!props.initialOrderId || !!props.initialOrderNo)
@@ -132,7 +164,8 @@
     try {
       const params: any = {
         page: 1,
-        page_size: 20
+        page_size: 20,
+        payment_status: 2
       }
       if (query) {
         params.order_no = query
@@ -170,15 +203,104 @@
 
   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()
   }
 
   const handleSubmit = async () => {
     if (!formRef.value) return
+    if (voucherUploading.value) {
+      ElMessage.warning('退款凭证上传中，请稍候')
+      return
+    }
 
     await formRef.value.validate(async (valid) => {
       if (valid) {
@@ -188,6 +310,7 @@
             order_id: formData.order_id!,
             requested_refund_amount: yuanToFen(formData.requested_refund_amount) ?? 0,
             actual_received_amount: formData.actual_received_amount,
+            refund_voucher_key: formData.refund_voucher_key!,
             refund_reason: formData.refund_reason || undefined
           }
           await RefundService.createRefund(data)
@@ -213,3 +336,35 @@
     }
   })
 </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 {
+        color: var(--el-color-primary);
+        font-style: normal;
+      }
+    }
+  }
+</style>