From 14832f5c6f3d51b53cb16d0b172e229985d0486c Mon Sep 17 00:00:00 2001
From: sexygoat <1538832180@qq.com>
Date: Mon, 18 May 2026 13:11:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8B=96=E6=8B=BD=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../proposal.md                               | 36 ++++++++++++++++
 .../specs/agent-recharge/spec.md              | 20 +++++++++
 .../specs/asset-information/spec.md           | 20 +++++++++
 .../specs/order-management/spec.md            | 20 +++++++++
 .../tasks.md                                  | 21 ++++++++++
 .../components/BasicInfoCard.vue              |  2 +-
 .../dialogs/PackageRechargeDialog.vue         | 41 +++++++++++++++++--
 src/views/finance/agent-recharge/index.vue    | 41 +++++++++++++++++--
 .../order-management/order-list/index.vue     | 41 +++++++++++++++++--
 9 files changed, 232 insertions(+), 10 deletions(-)
 create mode 100644 openspec/changes/update-payment-voucher-drag-upload/proposal.md
 create mode 100644 openspec/changes/update-payment-voucher-drag-upload/specs/agent-recharge/spec.md
 create mode 100644 openspec/changes/update-payment-voucher-drag-upload/specs/asset-information/spec.md
 create mode 100644 openspec/changes/update-payment-voucher-drag-upload/specs/order-management/spec.md
 create mode 100644 openspec/changes/update-payment-voucher-drag-upload/tasks.md

diff --git a/openspec/changes/update-payment-voucher-drag-upload/proposal.md b/openspec/changes/update-payment-voucher-drag-upload/proposal.md
new file mode 100644
index 0000000..e2250e6
--- /dev/null
+++ 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:
+  - 无接口或请求参数变更，仅前端上传交互增强
diff --git 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
new file mode 100644
index 0000000..1701289
--- /dev/null
+++ 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 因新增拖拽能力破坏原有单文件限制、类型校验和大小校验
diff --git 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
new file mode 100644
index 0000000..6d5a7a5
--- /dev/null
+++ 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 因新增拖拽能力破坏原有单文件限制、类型校验和大小校验
diff --git 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
new file mode 100644
index 0000000..79faac7
--- /dev/null
+++ 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 因新增拖拽能力破坏原有单文件限制、类型校验和大小校验
diff --git a/openspec/changes/update-payment-voucher-drag-upload/tasks.md b/openspec/changes/update-payment-voucher-drag-upload/tasks.md
new file mode 100644
index 0000000..1141a48
--- /dev/null
+++ 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`。
diff --git a/src/views/asset-management/asset-information/components/BasicInfoCard.vue b/src/views/asset-management/asset-information/components/BasicInfoCard.vue
index 37a8d36..63fee91 100644
--- 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">
diff --git a/src/views/asset-management/asset-information/components/dialogs/PackageRechargeDialog.vue b/src/views/asset-management/asset-information/components/dialogs/PackageRechargeDialog.vue
index 6f57310..2410528 100644
--- 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>
diff --git a/src/views/finance/agent-recharge/index.vue b/src/views/finance/agent-recharge/index.vue
index 1b208c6..b9e1f07 100644
--- 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>
diff --git a/src/views/order-management/order-list/index.vue b/src/views/order-management/order-list/index.vue
index 96f677d..2ff3161 100644
--- 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;
   }