by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dap 2024-11-13 10:45:58 +08:00
parent 995e9d6fdc
commit fc28f4ec7e
9 changed files with 188 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

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

81
apps/web-antd/src/utils/file/download.ts
View File

@ -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,

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

@ -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="
downloadExcel(
loginInfoExport,
'登录日志',
tableApi.formApi.form.values,
)
"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>

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

@ -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="
downloadExcel(
operLogExport,
'操作日志',
tableApi.formApi.form.values,
)
"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>

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

@ -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="
downloadExcel(
configExport,
'参数配置',
tableApi.formApi.form.values,
)
"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>

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

@ -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,

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

@ -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="
downloadExcel(
roleExport,
'角色数据',
tableApi.formApi.form.values,
)
"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>

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

@ -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="
downloadExcel(
userExport,
'用户管理',
tableApi.formApi.form.values,
)
"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>

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

@ -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,