fix: 拖拽上传

2026-05-18 13:11:40 +08:00
parent 894aea0e74
commit 14832f5c6f
9 changed files with 232 additions and 10 deletions
--- a/openspec/changes/update-payment-voucher-drag-upload/proposal.md
+++ b/openspec/changes/update-payment-voucher-drag-upload/proposal.md
@@ -0,0 +1,36 @@
+# Change: 更新支付凭证拖拽上传交互
+
+## Why
+
+当前后台已有“创建订单”和“创建充值订单”两个线下支付凭证上传入口，但都只支持点击选择文件，不支持把图片直接拖入上传区域。
+
+对于运营后台高频处理线下支付的场景，拖拽上传是更直接的交互方式；如果两个入口交互不一致，也会增加学习成本和误操作概率。
+
+## What Changes
+
+- 更新订单管理中的“创建订单”弹窗支付凭证上传区：
+  - 支持拖拽图片上传
+  - 保留现有单文件限制、图片类型校验、5MB 大小校验、异步上传和上传中禁提交流程
+- 更新资产信息中的“创建充值订单”弹窗支付凭证上传区：
+  - 支持拖拽图片上传
+  - 保留现有单文件限制、图片类型校验、5MB 大小校验、异步上传和上传中禁提交流程
+- 更新财务管理中的“创建充值订单”弹窗支付凭证上传区：
+  - 支持拖拽图片上传
+  - 保留现有单文件限制、图片类型校验、5MB 大小校验和异步上传流程
+- 统一两个入口的拖拽上传文案和基础视觉结构，明确支持“拖到此处”与“点击选择”
+
+## Impact
+
+- Affected specs:
+  - `order-management`
+  - `asset-information`
+  - `agent-recharge`
+- Affected code:
+  - `src/views/order-management/order-list/index.vue`
+  - `src/views/asset-management/asset-information/components/dialogs/PackageRechargeDialog.vue`
+  - `src/views/finance/agent-recharge/index.vue`
+- Dependencies:
+  - 复用现有 `StorageService.getUploadUrl()` 与 `StorageService.uploadFile()` 上传流程
+  - 与活跃变更 `update-order-upload-and-device-switch-mode` 共享订单创建支付凭证上传能力
+- Breaking changes:
+  - 无接口或请求参数变更，仅前端上传交互增强
--- a/openspec/changes/update-payment-voucher-drag-upload/specs/agent-recharge/spec.md
+++ b/openspec/changes/update-payment-voucher-drag-upload/specs/agent-recharge/spec.md
@@ -0,0 +1,20 @@
+## ADDED Requirements
+
+### Requirement: Agent Recharge Voucher Drag Upload
+
+The system SHALL support drag-and-drop image selection for payment vouchers in the admin agent recharge creation dialog.
+
+#### Scenario: Drag image into agent recharge voucher upload area
+
+- **GIVEN** 用户正在后台“财务管理”中创建线下支付充值订单
+- **WHEN** 用户将一张符合要求的图片拖入支付凭证上传区
+- **THEN** 系统 MUST 接受该图片作为支付凭证待上传文件
+- **AND** 系统 MUST 继续沿用现有异步上传流程上传该文件
+- **AND** 上传完成后系统 MUST 保存返回的 `payment_voucher_key`
+
+#### Scenario: Click-to-select still works for agent recharge voucher upload
+
+- **GIVEN** 用户正在后台“财务管理”中创建线下支付充值订单
+- **WHEN** 用户点击支付凭证上传区选择一张符合要求的图片
+- **THEN** 系统 MUST 继续支持原有点击选择行为
+- **AND** 系统 MUST NOT 因新增拖拽能力破坏原有单文件限制、类型校验和大小校验
--- a/openspec/changes/update-payment-voucher-drag-upload/specs/asset-information/spec.md
+++ b/openspec/changes/update-payment-voucher-drag-upload/specs/asset-information/spec.md
@@ -0,0 +1,20 @@
+## ADDED Requirements
+
+### Requirement: Recharge Voucher Drag Upload
+
+The system SHALL support drag-and-drop image selection for payment vouchers in the admin recharge order creation dialog within asset information.
+
+#### Scenario: Drag image into recharge voucher upload area
+
+- **GIVEN** 用户正在后台“资产信息”中创建线下支付充值订单
+- **WHEN** 用户将一张符合要求的图片拖入支付凭证上传区
+- **THEN** 系统 MUST 接受该图片作为支付凭证待上传文件
+- **AND** 系统 MUST 继续沿用现有异步上传流程上传该文件
+- **AND** 上传完成后系统 MUST 保存返回的 `payment_voucher_key`
+
+#### Scenario: Click-to-select still works for recharge voucher upload
+
+- **GIVEN** 用户正在后台“资产信息”中创建线下支付充值订单
+- **WHEN** 用户点击支付凭证上传区选择一张符合要求的图片
+- **THEN** 系统 MUST 继续支持原有点击选择行为
+- **AND** 系统 MUST NOT 因新增拖拽能力破坏原有单文件限制、类型校验和大小校验
--- a/openspec/changes/update-payment-voucher-drag-upload/specs/order-management/spec.md
+++ b/openspec/changes/update-payment-voucher-drag-upload/specs/order-management/spec.md
@@ -0,0 +1,20 @@
+## ADDED Requirements
+
+### Requirement: Order Voucher Drag Upload
+
+The system SHALL support drag-and-drop image selection for payment vouchers in the admin order creation dialog.
+
+#### Scenario: Drag image into order voucher upload area
+
+- **GIVEN** 用户正在后台“订单管理”中创建线下支付订单
+- **WHEN** 用户将一张符合要求的图片拖入支付凭证上传区
+- **THEN** 系统 MUST 接受该图片作为支付凭证待上传文件
+- **AND** 系统 MUST 继续沿用现有异步上传流程上传该文件
+- **AND** 上传完成后系统 MUST 保存返回的 `payment_voucher_key`
+
+#### Scenario: Click-to-select still works for order voucher upload
+
+- **GIVEN** 用户正在后台“订单管理”中创建线下支付订单
+- **WHEN** 用户点击支付凭证上传区选择一张符合要求的图片
+- **THEN** 系统 MUST 继续支持原有点击选择行为
+- **AND** 系统 MUST NOT 因新增拖拽能力破坏原有单文件限制、类型校验和大小校验
--- a/openspec/changes/update-payment-voucher-drag-upload/tasks.md
+++ b/openspec/changes/update-payment-voucher-drag-upload/tasks.md
@@ -0,0 +1,21 @@
+# Tasks: Update Payment Voucher Drag Upload
+
+## 1. Spec And UI Scope
+
+- [x] 1.1 明确“创建订单”和各“创建充值订单”支付凭证上传入口都支持拖拽上传。
+- [x] 1.2 保持现有图片校验、异步上传和上传中禁提交行为不变。
+
+## 2. Implementation
+
+- [x] 2.1 改造订单管理“创建订单”弹窗中的支付凭证上传区，支持拖拽上传。
+- [x] 2.2 改造资产信息“创建充值订单”弹窗中的支付凭证上传区，支持拖拽上传。
+- [x] 2.3 改造财务管理“创建充值订单”弹窗中的支付凭证上传区，支持拖拽上传。
+- [x] 2.4 统一各上传区的拖拽提示文案和基础样式，同时不破坏现有文件删除与重新上传流程。
+
+## 3. Verification
+
+- [ ] 3.1 验证创建订单弹窗可通过拖拽和点击两种方式选择支付凭证图片。
+- [ ] 3.2 验证创建充值订单弹窗可通过拖拽和点击两种方式选择支付凭证图片。
+- [ ] 3.3 验证财务管理创建充值订单弹窗可通过拖拽和点击两种方式选择支付凭证图片。
+- [ ] 3.4 验证各上传入口的类型限制、大小限制，以及各自原有的上传中/移除凭证行为保持正确。
+- [x] 3.5 运行 `openspec validate update-payment-voucher-drag-upload --strict`。
--- a/src/views/asset-management/asset-information/components/BasicInfoCard.vue
+++ b/src/views/asset-management/asset-information/components/BasicInfoCard.vue
@@ -176,7 +176,7 @@
            </div>
          </template>
        </ElTableColumn>
-        <ElTableColumn prop="msisdn" label="MSISDN" min-width="150" showOverflowTooltip/>
+        <ElTableColumn prop="msisdn" label="MSISDN" min-width="150" showOverflowTooltip />

        <ElTableColumn prop="carrier_name" label="运营商" min-width="120" showOverflowTooltip />
        <ElTableColumn prop="slot_position" label="卡槽位置" width="130">
--- a/src/views/asset-management/asset-information/components/dialogs/PackageRechargeDialog.vue
+++ b/src/views/asset-management/asset-information/components/dialogs/PackageRechargeDialog.vue
@@ -85,14 +85,19 @@
      >
        <ElUpload
          ref="uploadRef"
+          class="payment-voucher-upload"
+          drag
          :auto-upload="false"
          :on-change="handleVoucherFileChange"
          :on-remove="handleRemoveVoucher"
          accept="image/*"
-          list-type="picture-card"
+          list-type="picture"
          :limit="1"
        >
-          <el-icon><Plus /></el-icon>
+          <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>
@@ -129,7 +134,7 @@
    ElTag,
    ElUpload
  } from 'element-plus'
-  import { Plus } from '@element-plus/icons-vue'
+  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 { CreateOrderRequest, PackageResponse } from '@/types/api'
@@ -457,4 +462,34 @@
    justify-content: flex-end;
    gap: 12px;
  }
+
+  .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 {
+        color: var(--el-color-primary);
+        font-style: normal;
+      }
+    }
+  }
 </style>
--- a/src/views/finance/agent-recharge/index.vue
+++ b/src/views/finance/agent-recharge/index.vue
@@ -98,14 +98,19 @@
            >
              <ElUpload
                ref="uploadRef"
+                class="payment-voucher-upload"
+                drag
                :auto-upload="false"
                :on-change="handleVoucherFileChange"
                :on-remove="handleRemoveVoucher"
                accept="image/*"
-                list-type="picture-card"
+                list-type="picture"
                :limit="1"
              >
-                <el-icon><Plus /></el-icon>
+                <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>
@@ -185,7 +190,7 @@
    ElOption,
    ElUpload
  } from 'element-plus'
-  import { Plus } from '@element-plus/icons-vue'
+  import { UploadFilled } from '@element-plus/icons-vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import type {
    AgentRecharge,
@@ -849,4 +854,34 @@
  .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 {
+        color: var(--el-color-primary);
+        font-style: normal;
+      }
+    }
+  }
 </style>
--- a/src/views/order-management/order-list/index.vue
+++ b/src/views/order-management/order-list/index.vue
@@ -198,14 +198,19 @@
            >
              <ElUpload
                ref="uploadRef"
+                class="payment-voucher-upload"
+                drag
                :auto-upload="false"
                :on-change="handleVoucherFileChange"
                :on-remove="handleRemoveVoucher"
                accept="image/*"
-                list-type="picture-card"
+                list-type="picture"
                :limit="1"
              >
-                <el-icon><Plus /></el-icon>
+                <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>
@@ -249,7 +254,7 @@
    ShopService
  } from '@/api/modules'
  import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
-  import { Plus } from '@element-plus/icons-vue'
+  import { UploadFilled } from '@element-plus/icons-vue'
  import type { FormInstance, FormRules, UploadInstance, UploadFile } from 'element-plus'
  import type {
    Order,
@@ -1346,6 +1351,36 @@
    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 {
+        color: var(--el-color-primary);
+        font-style: normal;
+      }
+    }
+  }
+
  :deep(.el-table__row.table-row-with-context-menu) {
    cursor: pointer;
  }