refactor: 重构下载excel及区间选择器字段逻辑处理

CHANGELOG.md

@@ -3,6 +3,11 @@
 **REFACTOR**
 
 - 使用VxeTable重构OAuth账号绑定列表(替代antdv的Table)
+- commonDownloadExcel方法 支持处理区间选择器字段导出excel
+
+**OTHERS**
+
+- 废弃downloadExcel方法 统一使用commonDownloadExcel方法
 
 # 1.1.0
 

apps/web-antd/src/utils/file/download.ts

@@ -1,10 +1,16 @@
+import type { VbenFormProps } from '#/adapter/form';
+
 import { $t } from '@vben/locales';
+import { cloneDeep, formatDate } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
 import { dataURLtoBlob, urlToBase64 } from './base64Conver';
 
 /**
+ *
+ * @deprecated 无法处理区间选择器数据 请使用commonDownloadExcel
+ *
  * 下载excel文件
  * @param [func] axios函数
  * @param [fileName] 文件名称 不需要带xlsx后缀
@@ -30,6 +36,81 @@ export async function downloadExcel(
   }
 }
 
+/**
+ * 源码同packages\@core\ui-kit\form-ui\src\components\form-actions.vue
+ * @param values 表单值
+ * @param fieldMappingTime 区间选择器 字段映射
+ * @returns 格式化后的值
+ */
+function handleRangeTimeValue(
+  values: Record<string, any>,
+  fieldMappingTime: VbenFormProps['fieldMappingTime'],
+) {
+  // 需要深拷贝 可能是readonly的
+  values = cloneDeep(values);
+  if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
+    return values;
+  }
+
+  fieldMappingTime.forEach(
+    ([field, [startTimeKey, endTimeKey], format = 'YYYY-MM-DD']) => {
+      if (!values[field]) {
+        Reflect.deleteProperty(values, field);
+        return;
+      }
+
+      const [startTime, endTime] = values[field];
+      const [startTimeFormat, endTimeFormat] = Array.isArray(format)
+        ? format
+        : [format, format];
+
+      values[startTimeKey] = startTime
+        ? formatDate(startTime, startTimeFormat)
+        : undefined;
+      values[endTimeKey] = endTime
+        ? formatDate(endTime, endTimeFormat)
+        : undefined;
+
+      Reflect.deleteProperty(values, field);
+    },
+  );
+
+  return values;
+}
+
+export interface DownloadExcelOptions {
+  // 是否随机文件名(带时间戳)
+  withRandomName?: boolean;
+  // 区间选择器 字段映射
+  fieldMappingTime?: VbenFormProps['fieldMappingTime'];
+}
+
+/**
+ * 通用下载excel方法
+ * @param api 后端下载接口
+ * @param fileName 文件名 不带拓展名
+ * @param requestData 请求参数
+ * @param options 下载选项
+ */
+export async function commonDownloadExcel(
+  api: (data?: any) => Promise<Blob>,
+  fileName: string,
+  requestData: any = {},
+  options: DownloadExcelOptions = {},
+) {
+  const hideLoading = message.loading($t('pages.common.downloadLoading'), 0);
+  try {
+    const { withRandomName = true, fieldMappingTime } = options;
+    // 需要处理时间字段映射
+    const data = await api(handleRangeTimeValue(requestData, fieldMappingTime));
+    downloadExcelFile(data, fileName, withRandomName);
+  } catch (error) {
+    console.error(error);
+  } finally {
+    hideLoading();
+  }
+}
+
 export function downloadExcelFile(
   data: BlobPart,
   filename: string,

apps/web-antd/src/views/monitor/logininfor/index.vue

@@ -7,7 +7,6 @@ import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
-import dayjs from 'dayjs';
 
 import {
   tableCheckboxEvent,
@@ -22,7 +21,7 @@ import {
   loginInfoRemove,
   userUnlock,
 } from '#/api/monitor/logininfo';
-import { downloadExcel } from '#/utils/file/download';
+import { commonDownloadExcel } from '#/utils/file/download';
 import { confirmDeleteModal } from '#/utils/modal';
 
 import { columns, querySchema } from './data';
@@ -37,6 +36,14 @@ const formOptions: VbenFormProps = {
   },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'dateTime',
+      ['params[beginTime]', 'params[endTime]'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
 };
 
 const gridOptions: VxeGridProps = {
@@ -55,20 +62,6 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues = {}) => {
-        // 区间选择器处理
-        if (formValues?.dateTime) {
-          formValues.params = {
-            beginTime: dayjs(formValues.dateTime[0]).format(
-              'YYYY-MM-DD 00:00:00',
-            ),
-            endTime: dayjs(formValues.dateTime[1]).format(
-              'YYYY-MM-DD 23:59:59',
-            ),
-          };
-          Reflect.deleteProperty(formValues, 'dateTime');
-        } else {
-          Reflect.deleteProperty(formValues, 'params');
-        }
         return await loginInfoList({
           pageNum: page.currentPage,
           pageSize: page.pageSize,
@@ -149,6 +142,17 @@ async function handleUnlock() {
   canUnlock.value = false;
   tableApi.grid.clearCheckboxRow();
 }
+
+function handleDownloadExcel() {
+  commonDownloadExcel(
+    loginInfoExport,
+    '登录日志',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
 </script>
 
 <template>
@@ -164,13 +168,7 @@ async function handleUnlock() {
           </a-button>
           <a-button
             v-access:code="['monitor:logininfor:export']"
-            @click="
+            @click="handleDownloadExcel"
-              downloadExcel(
-                loginInfoExport,
-                '登录日志',
-                tableApi.formApi.form.values,
-              )
-            "
           >
             {{ $t('pages.common.export') }}
           </a-button>

apps/web-antd/src/views/monitor/operlog/index.vue

@@ -9,7 +9,6 @@ import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { Modal, Space } from 'ant-design-vue';
-import dayjs from 'dayjs';
 import { isEmpty } from 'lodash-es';
 
 import {
@@ -23,7 +22,7 @@ import {
   operLogExport,
   operLogList,
 } from '#/api/monitor/operlog';
-import { downloadExcel } from '#/utils/file/download';
+import { commonDownloadExcel } from '#/utils/file/download';
 import { confirmDeleteModal } from '#/utils/modal';
 
 import { columns, querySchema } from './data';
@@ -38,6 +37,14 @@ const formOptions: VbenFormProps = {
   },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'createTime',
+      ['params[beginTime]', 'params[endTime]'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
 };
 
 const gridOptions: VxeGridProps<OperationLog> = {
@@ -56,21 +63,6 @@ const gridOptions: VxeGridProps<OperationLog> = {
   proxyConfig: {
     ajax: {
       query: async ({ page, sort }, formValues = {}) => {
-        // 区间选择器处理
-        if (formValues?.createTime) {
-          formValues.params = {
-            beginTime: dayjs(formValues.createTime[0]).format(
-              'YYYY-MM-DD 00:00:00',
-            ),
-            endTime: dayjs(formValues.createTime[1]).format(
-              'YYYY-MM-DD 23:59:59',
-            ),
-          };
-          Reflect.deleteProperty(formValues, 'createTime');
-        } else {
-          Reflect.deleteProperty(formValues, 'params');
-        }
-
         const params: any = {
           pageNum: page.currentPage,
           pageSize: page.pageSize,
@@ -81,6 +73,7 @@ const gridOptions: VxeGridProps<OperationLog> = {
           params.orderByColumn = sort.field;
           params.isAsc = sort.order;
         }
+
         return await operLogList(params);
       },
     },
@@ -149,6 +142,12 @@ async function handleDelete() {
     },
   });
 }
+
+function handleDownloadExcel() {
+  commonDownloadExcel(operLogExport, '操作日志', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
 </script>
 
 <template>
@@ -164,13 +163,7 @@ async function handleDelete() {
           </a-button>
           <a-button
             v-access:code="['monitor:operlog:export']"
-            @click="
+            @click="handleDownloadExcel"
-              downloadExcel(
-                operLogExport,
-                '操作日志',
-                tableApi.formApi.form.values,
-              )
-            "
           >
             {{ $t('pages.common.export') }}
           </a-button>

apps/web-antd/src/views/system/config/index.vue

@@ -7,7 +7,6 @@ import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
-import dayjs from 'dayjs';
 
 import {
   tableCheckboxEvent,
@@ -20,7 +19,7 @@ import {
   configRefreshCache,
   configRemove,
 } from '#/api/system/config';
-import { downloadExcel } from '#/utils/file/download';
+import { commonDownloadExcel } from '#/utils/file/download';
 
 import configModal from './config-modal.vue';
 import { columns, querySchema } from './data';
@@ -34,6 +33,14 @@ const formOptions: VbenFormProps = {
   },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'createTime',
+      ['params[beginTime]', 'params[endTime]'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
 };
 
 const gridOptions: VxeGridProps = {
@@ -50,21 +57,6 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues = {}) => {
-        // 区间选择器处理
-        if (formValues?.createTime) {
-          formValues.params = {
-            beginTime: dayjs(formValues.createTime[0]).format(
-              'YYYY-MM-DD 00:00:00',
-            ),
-            endTime: dayjs(formValues.createTime[1]).format(
-              'YYYY-MM-DD 23:59:59',
-            ),
-          };
-          Reflect.deleteProperty(formValues, 'createTime');
-        } else {
-          Reflect.deleteProperty(formValues, 'params');
-        }
-
         return await configList({
           pageNum: page.currentPage,
           pageSize: page.pageSize,
@@ -123,6 +115,12 @@ function handleMultiDelete() {
   });
 }
 
+function handleDownloadExcel() {
+  commonDownloadExcel(configExport, '参数配置', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+
 async function handleRefreshCache() {
   await configRefreshCache();
   await tableApi.query();
@@ -137,13 +135,7 @@ async function handleRefreshCache() {
           <a-button @click="handleRefreshCache"> 刷新缓存 </a-button>
           <a-button
             v-access:code="['system:config:export']"
-            @click="
+            @click="handleDownloadExcel"
-              downloadExcel(
-                configExport,
-                '参数配置',
-                tableApi.formApi.form.values,
-              )
-            "
           >
             {{ $t('pages.common.export') }}
           </a-button>

apps/web-antd/src/views/system/oss/index.vue

@@ -17,7 +17,6 @@ import {
   Switch,
   Tooltip,
 } from 'ant-design-vue';
-import dayjs from 'dayjs';
 import { isEmpty } from 'lodash-es';
 
 import {
@@ -42,6 +41,14 @@ const formOptions: VbenFormProps = {
   },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'createTime',
+      ['params[beginCreateTime]', 'params[endCreateTime]'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
 };
 
 const gridOptions: VxeGridProps = {
@@ -60,21 +67,6 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page, sort }, formValues = {}) => {
-        // 区间选择器处理
-        if (formValues?.createTime) {
-          formValues.params = {
-            beginTime: dayjs(formValues.createTime[0]).format(
-              'YYYY-MM-DD 00:00:00',
-            ),
-            endTime: dayjs(formValues.createTime[1]).format(
-              'YYYY-MM-DD 23:59:59',
-            ),
-          };
-          Reflect.deleteProperty(formValues, 'createTime');
-        } else {
-          Reflect.deleteProperty(formValues, 'params');
-        }
-
         const params: any = {
           pageNum: page.currentPage,
           pageSize: page.pageSize,

apps/web-antd/src/views/system/role/index.vue

@@ -21,7 +21,6 @@ import {
   Popconfirm,
   Space,
 } from 'ant-design-vue';
-import dayjs from 'dayjs';
 
 import {
   tableCheckboxEvent,
@@ -35,7 +34,7 @@ import {
   roleRemove,
 } from '#/api/system/role';
 import { TableSwitch } from '#/components/table';
-import { downloadExcel } from '#/utils/file/download';
+import { commonDownloadExcel } from '#/utils/file/download';
 
 import { columns, querySchema } from './data';
 import roleAuthModal from './role-auth-modal.vue';
@@ -50,6 +49,14 @@ const formOptions: VbenFormProps = {
   },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'createTime',
+      ['params[beginTime]', 'params[endTime]'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
 };
 
 const gridOptions: VxeGridProps = {
@@ -69,21 +76,6 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues = {}) => {
-        // 区间选择器处理
-        if (formValues?.createTime) {
-          formValues.params = {
-            beginTime: dayjs(formValues.createTime[0]).format(
-              'YYYY-MM-DD 00:00:00',
-            ),
-            endTime: dayjs(formValues.createTime[1]).format(
-              'YYYY-MM-DD 23:59:59',
-            ),
-          };
-          Reflect.deleteProperty(formValues, 'createTime');
-        } else {
-          Reflect.deleteProperty(formValues, 'params');
-        }
-
         return await roleList({
           pageNum: page.currentPage,
           pageSize: page.pageSize,
@@ -142,6 +134,12 @@ function handleMultiDelete() {
   });
 }
 
+function handleDownloadExcel() {
+  commonDownloadExcel(roleExport, '角色数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+
 const { hasAccessByCodes, hasAccessByRoles } = useAccess();
 
 const isSuperAdmin = computed(() => hasAccessByRoles(['superadmin']));
@@ -168,13 +166,7 @@ function handleAssignRole(record: Recordable<any>) {
         <Space>
           <a-button
             v-access:code="['system:role:export']"
-            @click="
+            @click="handleDownloadExcel"
-              downloadExcel(
-                roleExport,
-                '角色数据',
-                tableApi.formApi.form.values,
-              )
-            "
           >
             {{ $t('pages.common.export') }}
           </a-button>

apps/web-antd/src/views/system/user/index.vue

@@ -23,7 +23,6 @@ import {
   Popconfirm,
   Space,
 } from 'ant-design-vue';
-import dayjs from 'dayjs';
 
 import {
   tableCheckboxEvent,
@@ -37,7 +36,7 @@ import {
   userStatusChange,
 } from '#/api/system/user';
 import { TableSwitch } from '#/components/table';
-import { downloadExcel } from '#/utils/file/download';
+import { commonDownloadExcel } from '#/utils/file/download';
 
 import { columns, querySchema } from './data';
 import DeptTree from './dept-tree.vue';
@@ -76,6 +75,14 @@ const formOptions: VbenFormProps = {
     await formApi.resetForm();
     await reload();
   },
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'createTime',
+      ['params[beginTime]', 'params[endTime]'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
 };
 
 const gridOptions: VxeGridProps = {
@@ -95,20 +102,6 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues = {}) => {
-        // 区间选择器处理
-        if (formValues?.createTime) {
-          formValues.params = {
-            beginTime: dayjs(formValues.createTime[0]).format(
-              'YYYY-MM-DD 00:00:00',
-            ),
-            endTime: dayjs(formValues.createTime[1]).format(
-              'YYYY-MM-DD 23:59:59',
-            ),
-          };
-          Reflect.deleteProperty(formValues, 'createTime');
-        } else {
-          Reflect.deleteProperty(formValues, 'params');
-        }
         // 部门树选择处理
         if (selectDeptId.value.length === 1) {
           formValues.deptId = selectDeptId.value[0];
@@ -175,6 +168,12 @@ function handleMultiDelete() {
   });
 }
 
+function handleDownloadExcel() {
+  commonDownloadExcel(userExport, '用户管理', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+
 const [UserInfoModal, userInfoModalApi] = useVbenModal({
   connectedComponent: userInfoModal,
 });
@@ -208,13 +207,7 @@ const { hasAccessByCodes } = useAccess();
           <Space>
             <a-button
               v-access:code="['system:user:export']"
-              @click="
+              @click="handleDownloadExcel"
-                downloadExcel(
-                  userExport,
-                  '用户管理',
-                  tableApi.formApi.form.values,
-                )
-              "
             >
               {{ $t('pages.common.export') }}
             </a-button>

apps/web-antd/src/views/tool/gen/index.vue

@@ -37,6 +37,14 @@ const formOptions: VbenFormProps = {
     },
   },
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 日期选择格式化
+  fieldMappingTime: [
+    [
+      'createTime',
+      ['params[beginTime]', 'params[endTime]'],
+      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+    ],
+  ],
 };
 
 const gridOptions: VxeGridProps = {
@@ -55,21 +63,6 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues = {}) => {
-        // 区间选择器处理
-        if (formValues?.createTime) {
-          formValues.params = {
-            beginTime: dayjs(formValues.createTime[0]).format(
-              'YYYY-MM-DD 00:00:00',
-            ),
-            endTime: dayjs(formValues.createTime[1]).format(
-              'YYYY-MM-DD 23:59:59',
-            ),
-          };
-          Reflect.deleteProperty(formValues, 'createTime');
-        } else {
-          Reflect.deleteProperty(formValues, 'params');
-        }
-
         return await generatedList({
           pageNum: page.currentPage,
           pageSize: page.pageSize,