feat:更换企业授权

src/views/order-management/order-list/index.vue

@@ -199,25 +199,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">支持所有图片格式</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>
@@ -229,7 +217,7 @@
                 :loading="createLoading || voucherUploading"
                 :disabled="voucherUploading"
               >
-                {{ voucherUploading ? '图片上传中...' : '提交' }}
+                {{ voucherUploading ? '凭证上传中...' : '提交' }}
               </ElButton>
             </div>
           </template>
@@ -255,19 +243,17 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, h, nextTick } from 'vue'
+  import { computed, h } from 'vue'
   import { useRouter } from 'vue-router'
   import {
     OrderService,
     CardService,
     DeviceService,
     PackageManageService,
-    StorageService,
     ShopService
   } from '@/api/modules'
   import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
-  import { UploadFilled } from '@element-plus/icons-vue'
-  import type { FormInstance, FormRules, UploadInstance, UploadFile } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
   import type {
     Order,
     OrderQueryParams,
@@ -290,6 +276,7 @@
   import { RoutesAlias } from '@/router/routesAlias'
   import PaymentVoucherDialog from '@/components/business/PaymentVoucherDialog.vue'
   import ExportTaskCreateDialog from '@/components/business/ExportTaskCreateDialog.vue'
+  import VoucherUpload from '@/components/business/VoucherUpload.vue'
 
   defineOptions({ name: 'OrderList' })
 
@@ -308,7 +295,6 @@
   const createDialogVisible = ref(false)
   const exportDialogVisible = ref(false)
   const paymentVoucherFileKey = ref('')
-  let activeVoucherUploadId = 0
 
   // 搜索表单初始值
   const initialSearchState: OrderSearchFormState = {
@@ -536,82 +522,7 @@
   })
 
   const createFormRef = ref<FormInstance>()
-  const uploadRef = ref<UploadInstance>()
-
-  const invalidateVoucherUploadState = (clearFileKey = false) => {
-    activeVoucherUploadId += 1
-    voucherUploading.value = false
-    if (clearFileKey) {
-      createForm.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 requestId = ++activeVoucherUploadId
-    voucherUploading.value = true
-    createForm.payment_voucher_key = undefined
-
-    // 开始上传
-    try {
-      ElMessage.info('正在上传支付凭证...')
-
-      // 1. 获取上传 URL
-      const uploadUrlRes = await StorageService.getUploadUrl({
-        file_name: file.name,
-        content_type: file.type,
-        purpose: 'attachment'
-      })
-
-      if (uploadUrlRes.code !== 0) {
-        ElMessage.error(uploadUrlRes.msg || '获取上传地址失败')
-        uploadRef.value?.clearFiles()
-        return
-      }
-
-      const { upload_url, file_key } = uploadUrlRes.data
-
-      // 2. 上传文件到对象存储
-      await StorageService.uploadFile(upload_url, file, file.type)
-
-      if (requestId !== activeVoucherUploadId) return
-
-      // 3. 保存 file_key
-      createForm.payment_voucher_key = file_key
-      ElMessage.success('上传成功')
-      // 触发表单验证
-      await nextTick(() => {
-        createFormRef.value?.validateField('payment_voucher_key')
-      })
-    } catch (error: any) {
-      if (requestId !== activeVoucherUploadId) return
-
-      console.error('上传失败:', error)
-      ElMessage.error(error.message || '上传失败，请重试')
-      createForm.payment_voucher_key = undefined
-      uploadRef.value?.clearFiles()
-    } finally {
-      if (requestId === activeVoucherUploadId) {
-        voucherUploading.value = false
-      }
-    }
-  }
-
-  // 删除支付凭证
-  const handleRemoveVoucher = () => {
-    invalidateVoucherUploadState(true)
-  }
+  const uploadRef = ref<InstanceType<typeof VoucherUpload>>()
 
   const createRules = computed<FormRules>(() => {
     const baseRules: FormRules = {
@@ -1231,10 +1142,11 @@
     createForm.iot_card_id = null
     createForm.device_id = null
     createForm.payment_method = 'wallet'
-    invalidateVoucherUploadState(true)
+    createForm.payment_voucher_key = undefined
+    voucherUploading.value = false
 
     // 清空上传文件列表
-    uploadRef.value?.clearFiles()
+    uploadRef.value?.clearFiles(false)
 
     // 清空套餐、IoT卡和设备搜索结果
     packageOptions.value = []
@@ -1418,36 +1330,6 @@
     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);
-      }
-    }
-  }
-
   :deep(.el-table__row.table-row-with-context-menu) {
     cursor: pointer;
   }