From 7af3c2759e846bb15c5df70f5a6a81cee3b71d4c Mon Sep 17 00:00:00 2001
From: danial <danial@gmail.com>
Date: Sat, 6 Dec 2025 15:10:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor(recharge-history):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E8=8B=B9=E6=9E=9C=E5=8D=A1=E5=85=85=E5=80=BC=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E9=A1=B5=E9=9D=A2=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E5=92=8C=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一icon模板写法，提升代码简洁性
- 表格分页配置改为计算属性，改善代码组织
- 显示状态标签新增文字长度判断和悬浮提示优化
- 增加类型兼容适配函数，支持新旧数据结构转换
- 重构fetchData函数，调用新版API并简化参数处理
- 优化分页、查询、重置相关函数逻辑，避免重复传参
- 使用常量对象维护状态映射，减少冗余代码
- 异步调用改用apiClient封装，提升接口调用一致性
- 优化文件下载逻辑，支持xlsx格式并自动触发保存
- 删除已注释和废弃代码，提升代码可维护性
---
 .../recharge-history/index.vue                | 355 +++++++++---------
 1 file changed, 169 insertions(+), 186 deletions(-)

diff --git a/src/views/apple-card-info/recharge-history/index.vue b/src/views/apple-card-info/recharge-history/index.vue
index 75ade59..837b34b 100644
--- a/src/views/apple-card-info/recharge-history/index.vue
+++ b/src/views/apple-card-info/recharge-history/index.vue
@@ -56,44 +56,29 @@
           <a-space direction="vertical" :size="18">
             <a-space direction="horizontal" :size="18">
               <a-button type="primary" @click="search">
-                <template #icon>
-                  <icon-search />
-                </template>
+                <template #icon><icon-search /></template>
                 搜索
               </a-button>
               <a-button @click="reset">
-                <template #icon>
-                  <icon-refresh />
-                </template>
+                <template #icon><icon-refresh /></template>
                 重置
               </a-button>
             </a-space>
-            <a-space direction="horizontal" :size="18">
-              <a-button
-                type="secondary"
-                status="warning"
-                @click="downloadDataList"
-              >
-                <template #icon>
-                  <icon-download />
-                </template>
-                下载
-              </a-button>
-            </a-space>
+            <a-button
+              type="secondary"
+              status="warning"
+              @click="downloadDataList"
+            >
+              <template #icon><icon-download /></template>
+              下载
+            </a-button>
           </a-space>
         </a-col>
       </a-row>
       <a-divider style="margin-top: 0" />
       <a-table
         :loading="loading"
-        :pagination="{
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: pagination.total,
-          pageSizeOptions: [10, 20, 50, 100],
-          showPageSize: true,
-          showTotal: true
-        }"
+        :pagination="paginationConfig"
         :columns="columns"
         :data="renderData"
         :bordered="false"
@@ -113,13 +98,20 @@
             >
               {{ getStatusColorMap(record.status).text }}
             </a-tag>
-            <a-tag
-              v-if="record.status === 0 || record.status === 16"
-              color="gray"
-              size="small"
-            >
-              {{ record.remark }}
-            </a-tag>
+            <template v-if="record.status === 0 || record.status === 16">
+              <a-tag
+                v-if="record.remark.length <= 10"
+                color="gray"
+                size="small"
+              >
+                {{ record.remark }}
+              </a-tag>
+              <a-tooltip v-else :content="record.remark" position="top">
+                <a-tag color="gray" size="small">
+                  {{ truncateText(record.remark, 10) }}
+                </a-tag>
+              </a-tooltip>
+            </template>
             <a-tag
               v-if="[1, 2].includes(record.notifyStatus)"
               size="small"
@@ -136,9 +128,7 @@
                 size="small"
                 @click="showRechargeHistory(record.orderNo)"
               >
-                <template #icon>
-                  <icon-list />
-                </template>
+                <template #icon><icon-list /></template>
               </a-button>
             </a-tooltip>
             <a-popconfirm
@@ -155,9 +145,7 @@
                 status="success"
                 @click="showActualAmountModal(record.orderNo, record)"
               >
-                <template #icon>
-                  <icon-refresh />
-                </template>
+                <template #icon><icon-refresh /></template>
               </a-button>
             </a-tooltip>
             <a-tooltip content="回调">
@@ -170,19 +158,9 @@
                 status="warning"
                 @click="callBackOrderManual(record.orderNo)"
               >
-                <template #icon>
-                  <icon-send />
-                </template>
+                <template #icon><icon-send /></template>
               </a-button>
             </a-tooltip>
-            <!-- <a-popconfirm
-              v-if="record.status === 14"
-              content="确认修改状态到成功状态?"
-              type="warning"
-              @ok="modifyStatusToSucceed(record.orderNo)"
-            >
-              <a-button size="small" status="danger">修正状态</a-button>
-            </a-popconfirm> -->
           </a-space>
         </template>
       </a-table>
@@ -193,7 +171,7 @@
     />
     <change-amount
       v-model:visible="state.changeAmountModalVisible"
-      :record="state.currentRecord"
+      :record="createCompatibleRecord(state.currentRecord)"
       :order-no="state.selectedOrderNo"
     />
   </div>
@@ -202,18 +180,12 @@
 <script lang="ts" setup>
 import { Message, TableColumnData } from '@arco-design/web-vue';
 import useLoading from '@/hooks/loading';
-import { Pagination } from '@/types/global';
-import { onMounted, reactive, ref, watch } from 'vue';
+import type { Pagination } from '@/types/global';
+import { onMounted, reactive, ref, computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import {
-  AppleCardRechargeOrderParams,
-  AppleCardRechargeOrderRecord,
-  callBackOrderManualAPI,
-  downloadDataListApi,
-  modifyStatusToSucceedAPI,
-  queryAppleCardRechargeOrderList,
-  resetOrderStatusAPI
-} from '@/api/apple-card-recharge-history';
+import type { KamiInternalModelEntityV1CardAppleRechargeInfo } from '@/api/generated/models';
+import type { AppleCardRechargeOrderRecord } from '@/api/apple-card-recharge-history';
+import { apiClient } from '@/api';
 import RechargeHistory from './components/recharge-history.vue';
 import ChangeAmount from './components/change-amount.vue';
 import { checkTokenFromIframe } from '@/utils/auth';
@@ -221,14 +193,22 @@ import { checkTokenFromIframe } from '@/utils/auth';
 const route = useRoute();
 const { accountID } = route.params;
 
-const basePagination: Pagination = {
-  current: 1,
-  pageSize: 50
-};
+const basePagination: Pagination = { current: 1, pageSize: 50 };
 const pagination = reactive({
   accountID: accountID as string,
   ...basePagination
 });
+
+// Status mapping constants
+const STATUS_MAP = Object.freeze({
+  0: { color: 'red', text: '失败' },
+  1: { color: 'green', text: '成功' },
+  2: { color: 'orange', text: '调度中' },
+  3: { color: 'blue', text: '等待' },
+  14: { color: 'blue', text: '卡密重复(需人工介入)' },
+  15: { color: 'red', text: '失败(金额异议)' },
+  16: { color: 'red', text: '冻结' }
+} as const);
 const columns: TableColumnData[] = [
   {
     title: '序号',
@@ -283,20 +263,8 @@ const columns: TableColumnData[] = [
     slotName: 'operations'
   }
 ];
-const generateFormModel = () => {
-  return {
-    account: '',
-    orderNo: '',
-    attach: '',
-    cardNo: '',
-    cardPass: '',
-    merchantId: '',
-    dateRange: []
-  };
-};
-const { loading, setLoading } = useLoading(true);
-const renderData = ref<AppleCardRechargeOrderRecord[]>([]);
-const formModel = ref<{
+// Form model type definition
+interface FormModel {
   account: string;
   orderNo: string;
   attach: string;
@@ -304,29 +272,72 @@ const formModel = ref<{
   cardPass: string;
   merchantId: string;
   dateRange: Date[];
-}>(generateFormModel());
+}
+
+const generateFormModel = (): FormModel => ({
+  account: '',
+  orderNo: '',
+  attach: '',
+  cardNo: '',
+  cardPass: '',
+  merchantId: '',
+  dateRange: []
+});
+
+const { loading, setLoading } = useLoading(true);
+const renderData = ref<KamiInternalModelEntityV1CardAppleRechargeInfo[]>([]);
+const formModel = ref<FormModel>(generateFormModel());
+
 const state = reactive({
   rechargeHistoryModalVisible: false,
   selectedOrderNo: '',
   changeAmountModalVisible: false,
-  currentRecord: {} as AppleCardRechargeOrderRecord
+  currentRecord: {} as KamiInternalModelEntityV1CardAppleRechargeInfo
 });
 
-const fetchData = async (
-  params: AppleCardRechargeOrderParams = {
-    current: 1,
-    pageSize: 50
-  }
-) => {
+// 创建类型适配器，确保向后兼容
+const createCompatibleRecord = (
+  record: KamiInternalModelEntityV1CardAppleRechargeInfo
+): AppleCardRechargeOrderRecord => ({
+  id: record.id || 0,
+  orderNo: record.orderNo || '',
+  actualAmount: record.actualAmount || 0,
+  cardAmount: record.cardAmount || 0,
+  balance: record.balance || 0,
+  accountName: record.accountName || '',
+  attach: record.attach || '',
+  notifyStatus: record.notifyStatus || 0,
+  merchantId: record.merchantId || '',
+  createdAt: record.createdAt || ''
+});
+
+const paginationConfig = computed(() => ({
+  current: pagination.current,
+  pageSize: pagination.pageSize,
+  total: pagination.total,
+  pageSizeOptions: [10, 20, 50, 100],
+  showPageSize: true,
+  showTotal: true
+}));
+
+const fetchData = async () => {
   setLoading(true);
   try {
-    const {
-      data: { list, total }
-    } = await queryAppleCardRechargeOrderList(params);
-    renderData.value = list;
-    pagination.current = params.current;
-    pagination.pageSize = params.pageSize;
-    pagination.total = total;
+    const { data } = await apiClient.apiCardInfoAppleCardRechargeOrderListGet({
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      account: formModel.value.account,
+      accountId: accountID as string,
+      attach: formModel.value.attach,
+      orderNo: formModel.value.orderNo,
+      cardNo: formModel.value.cardNo,
+      cardPass: formModel.value.cardPass,
+      merchantId: formModel.value.merchantId,
+      startDate: formModel.value.dateRange?.[0]?.toISOString(),
+      endDate: formModel.value.dateRange?.[1]?.toISOString()
+    });
+    renderData.value = data.list || [];
+    pagination.total = data.total || 0;
   } catch (err) {
     console.error(err);
   } finally {
@@ -335,123 +346,95 @@ const fetchData = async (
 };
 
 const onPageChange = (current: number) => {
-  fetchData({ ...pagination, current });
+  pagination.current = current;
+  fetchData();
 };
 const onPageSizeChange = (pageSize: number) => {
-  fetchData({ ...pagination, pageSize });
+  pagination.pageSize = pageSize;
+  fetchData();
 };
 const search = () => {
-  fetchData({
-    ...basePagination,
-    ...formModel.value
-  });
+  Object.assign(pagination, basePagination);
+  fetchData();
 };
 const reset = () => {
   formModel.value = generateFormModel();
+  search();
 };
 const showRechargeHistory = (orderNo: string) => {
-  state.rechargeHistoryModalVisible = true;
-  state.selectedOrderNo = orderNo;
+  Object.assign(state, {
+    rechargeHistoryModalVisible: true,
+    selectedOrderNo: orderNo
+  });
 };
-const getStatusColorMap = (status: number) => {
-  type colorMap = {
-    color: string;
-    text: string;
-  };
-  let c: colorMap = {
-    color: '',
-    text: ''
-  };
+const truncateText = (text: string, maxLength: number) =>
+  text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
 
-  switch (status) {
-    case 0:
-      c = {
-        color: 'red',
-        text: '失败'
-      };
-      break;
-    case 1:
-      c = {
-        color: 'green',
-        text: '成功'
-      };
-      break;
-    case 15:
-      c = {
-        color: 'red',
-        text: '失败(金额异议)'
-      };
-      break;
-    case 14:
-      c = {
-        color: 'blue',
-        text: '卡密重复(需人工介入)'
-      };
-      break;
-    case 2:
-      c = {
-        color: 'orange',
-        text: '调度中'
-      };
-      break;
-    case 3:
-      c = {
-        color: 'blue',
-        text: '等待'
-      };
-      break;
-    case 16:
-      c = {
-        color: 'red',
-        text: '冻结'
-      };
-      break;
-    default:
-      c = {
-        color: 'grey',
-        text: '其他状态，待更新'
-      };
-      break;
-  }
-  return c;
-};
+const getStatusColorMap = (status: number) =>
+  STATUS_MAP[status as keyof typeof STATUS_MAP] || {
+    color: 'grey',
+    text: '其他状态，待更新'
+  };
 const callBackOrderManual = async (orderNo: string) => {
-  await callBackOrderManualAPI({ orderNo });
-  fetchData({ ...pagination, ...formModel.value });
+  await apiClient.apiCardInfoAppleCardRechargeOrderCallbackByManualPost({
+    kamiApiCardInfoAppleV1CallBackOrderManualReq: { orderNo }
+  });
+  fetchData();
   Message.success('回调成功');
 };
+
 const showActualAmountModal = (
   orderNo: string,
-  record: AppleCardRechargeOrderRecord
+  record: KamiInternalModelEntityV1CardAppleRechargeInfo
 ) => {
-  state.changeAmountModalVisible = true;
-  state.selectedOrderNo = orderNo;
-  state.currentRecord = record;
-};
-const modifyStatusToSucceed = async (orderNo: string) => {
-  await modifyStatusToSucceedAPI({ orderNo });
-  fetchData({ ...pagination, ...formModel.value });
-  Message.success('处理成功');
+  Object.assign(state, {
+    changeAmountModalVisible: true,
+    selectedOrderNo: orderNo,
+    currentRecord: record
+  });
 };
+
 watch(
   () => state.changeAmountModalVisible,
   newValue => {
-    if (newValue === false) {
-      search();
-    }
+    if (!newValue) search();
   }
 );
-const resetStatus = (orderNo: string) => {
-  resetOrderStatusAPI({ orderNo }).then(() => {
-    Message.success('重置成功');
-    search();
+
+const resetStatus = async (orderNo: string) => {
+  await apiClient.apiCardInfoAppleCardRechargeOrderResetStatusPost({
+    kamiApiCardInfoAppleV1RechargeOrderResetStatusReq: { orderNo }
   });
+  Message.success('重置成功');
+  search();
 };
-onMounted(() => fetchData({ ...pagination }));
+
+onMounted(() => fetchData());
+
 const downloadDataList = async () => {
-  await downloadDataListApi({
-    ...basePagination,
-    ...formModel.value
+  const response = await apiClient.apiCardInfoAppleCardRechargeOrderDownloadGet(
+    {
+      accountId: accountID as string,
+      account: formModel.value.account,
+      attach: formModel.value.attach,
+      orderNo: formModel.value.orderNo,
+      cardNo: formModel.value.cardNo,
+      merchantId: formModel.value.merchantId,
+      cardPass: formModel.value.cardPass,
+      startDate: formModel.value.dateRange?.[0]?.toISOString(),
+      endDate: formModel.value.dateRange?.[1]?.toISOString()
+    }
+  );
+
+  // 处理文件下载
+  const blob = new Blob([response.data as unknown as ArrayBuffer], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
   });
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'apple_recharge_history.xlsx';
+  link.click();
+  window.URL.revokeObjectURL(url);
 };
 </script>