feat:更换企业授权

src/views/finance/agent-recharge/index.vue

@@ -96,32 +96,25 @@
               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="createForm.payment_voucher_key"
+                voucher-name="支付凭证"
+                @uploading-change="voucherUploading = $event"
+                @change="createFormRef?.validateField('payment_voucher_key')"
+              />
             </ElFormItem>
           </ElForm>
           <template #footer>
             <div class="dialog-footer">
               <ElButton @click="createDialogVisible = false">取消</ElButton>
-              <ElButton type="primary" @click="handleCreateRecharge" :loading="createLoading">
-                确认创建
+              <ElButton
+                type="primary"
+                @click="handleCreateRecharge"
+                :loading="createLoading || voucherUploading"
+                :disabled="voucherUploading"
+              >
+                {{ voucherUploading ? '凭证上传中...' : '确认创建' }}
               </ElButton>
             </div>
           </template>
@@ -178,19 +171,16 @@
 <script setup lang="ts">
   import { h } from 'vue'
   import { useRouter } from 'vue-router'
-  import { AgentRechargeService, ShopService, StorageService } from '@/api/modules'
+  import { AgentRechargeService, ShopService } from '@/api/modules'
   import {
     ElMessage,
     ElTag,
-    ElTreeSelect,
     ElButton,
     ElCascader,
     ElInputNumber,
     ElSelect,
-    ElOption,
-    ElUpload
+    ElOption
   } from 'element-plus'
-  import { UploadFilled } from '@element-plus/icons-vue'
   import type { FormInstance, FormRules } from 'element-plus'
   import type {
     AgentRecharge,
@@ -198,25 +188,23 @@
     AgentRechargeStatus,
     AgentRechargePaymentMethod,
     CreateAgentRechargeRequest,
-    ConfirmOfflinePaymentRequest,
-    ShopResponse
+    ConfirmOfflinePaymentRequest
   } from '@/types/api'
   import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
-  import { useUserStore } from '@/store/modules/user'
   import { formatDateTime } from '@/utils/business/format'
-  import { RoutesAlias } from '@/router/routesAlias'
   import { useAuth } from '@/composables/useAuth'
   import PaymentVoucherDialog from '@/components/business/PaymentVoucherDialog.vue'
+  import VoucherUpload from '@/components/business/VoucherUpload.vue'
 
   defineOptions({ name: 'AgentRechargeList' })
 
   const router = useRouter()
-  const userStore = useUserStore()
   const { hasAuth } = useAuth()
 
   const loading = ref(false)
   const createLoading = ref(false)
+  const voucherUploading = ref(false)
   const confirmPayLoading = ref(false)
   const tableRef = ref()
   const createDialogVisible = ref(false)
@@ -238,8 +226,6 @@
 
   // 店铺选项
   const shopOptions = ref<any[]>([])
-  const shopTreeData = ref<ShopResponse[]>([])
-
   // 店铺级联选择相关
   const shopCascadeOptions = ref<any[]>([])
   const shopCascadeProps = {
@@ -340,7 +326,7 @@
 
   const createFormRef = ref<FormInstance>()
   const confirmPayFormRef = ref<FormInstance>()
-  const uploadRef = ref()
+  const uploadRef = ref<InstanceType<typeof VoucherUpload>>()
   const MIN_RECHARGE_AMOUNT = 0.01
 
   const createRules = computed<FormRules>(() => {
@@ -523,33 +509,6 @@
     isFirstActivation = false
   })
 
-  // 构建树形数据
-  const buildTreeData = (items: ShopResponse[]) => {
-    const map = new Map<number, ShopResponse & { children?: ShopResponse[] }>()
-    const tree: ShopResponse[] = []
-
-    // 先将所有项放入 map
-    items.forEach((item) => {
-      map.set(item.id, { ...item, children: [] })
-    })
-
-    // 构建树形结构
-    items.forEach((item) => {
-      const node = map.get(item.id)!
-      if (item.parent_id && map.has(item.parent_id)) {
-        // 有父节点，添加到父节点的 children 中
-        const parent = map.get(item.parent_id)!
-        if (!parent.children) parent.children = []
-        parent.children.push(node)
-      } else {
-        // 没有父节点或父节点不存在，作为根节点
-        tree.push(node)
-      }
-    })
-
-    return tree
-  }
-
   // 加载店铺列表 - 改用级联查询
   const loadShops = async () => {
     try {
@@ -671,60 +630,18 @@
     createForm.payment_method = ''
     createForm.shop_id = null
     createForm.payment_voucher_key = undefined
-    uploadRef.value?.clearFiles()
-  }
-
-  // 支付凭证文件变化
-  const handleVoucherFileChange = async (file: any) => {
-    const isImage = file.raw.type.startsWith('image/')
-    const isLt5M = file.raw.size / 1024 / 1024 < 5
-
-    if (!isImage) {
-      ElMessage.error('只能上传图片文件')
-      uploadRef.value?.clearFiles()
-      return
-    }
-    if (!isLt5M) {
-      ElMessage.error('图片大小不能超过 5MB')
-      uploadRef.value?.clearFiles()
-      return
-    }
-
-    try {
-      const uploadUrlRes = await StorageService.getUploadUrl({
-        file_name: file.name,
-        content_type: file.raw.type,
-        purpose: 'attachment'
-      })
-
-      if (uploadUrlRes.code !== 0) {
-        ElMessage.error(uploadUrlRes.msg || '获取上传地址失败')
-        uploadRef.value?.clearFiles()
-        return
-      }
-
-      const { upload_url, file_key } = uploadUrlRes.data
-
-      await StorageService.uploadFile(upload_url, file.raw, file.raw.type)
-
-      createForm.payment_voucher_key = file_key
-      ElMessage.success('上传成功')
-    } catch (error: any) {
-      console.error('上传失败:', error)
-      createForm.payment_voucher_key = undefined
-      uploadRef.value?.clearFiles()
-    }
-  }
-
-  // 删除支付凭证
-  const handleRemoveVoucher = () => {
-    createForm.payment_voucher_key = undefined
+    voucherUploading.value = false
+    uploadRef.value?.clearFiles(false)
   }
 
   // 创建充值订单
   const handleCreateRecharge = async () => {
     const formRef = createFormRef.value
     if (!formRef) return
+    if (voucherUploading.value) {
+      ElMessage.warning('支付凭证上传中，请稍候')
+      return
+    }
 
     await formRef.validate(async (valid) => {
       if (valid) {
@@ -854,34 +771,4 @@
   .agent-recharge-page {
     height: 100%;
   }
-
-  .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>