feat(search): 添加搜索组件导出功能

- 在搜索组件中添加导出XLS按钮
- 集成xlsx库实现数据导出功能
- 添加货币格式化工具函数toMoney
- 添加状态转换工具函数toApplyStatus和toPayType
- 实现handleExport方法查询并导出数据为Excel文件
- 更新搜索表单参数配置添加分页限制
- 添加表格列配置设置最小宽度
- 修改状态标签显示文本将"用户取消"改为"已驳回"
- 添加applyStatus为50的已取消状态标签显示
This commit is contained in:
2026-02-01 09:57:34 +08:00
parent f1c3bd199c
commit dde5f20402
2 changed files with 112 additions and 3 deletions

View File

@@ -33,6 +33,7 @@
v-model:value="where.keywords" v-model:value="where.keywords"
@search="handleSearch" @search="handleSearch"
/> />
<a-button type="dashed" @click="handleExport">导出xls</a-button>
<a-button @click="resetSearch"> 重置 </a-button> <a-button @click="resetSearch"> 重置 </a-button>
</a-space> </a-space>
</a-form-item> </a-form-item>
@@ -46,9 +47,16 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { DeleteOutlined } from '@ant-design/icons-vue'; import { DeleteOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { utils, writeFile } from 'xlsx';
import Import from './Import.vue'; import Import from './Import.vue';
import useSearch from '@/utils/use-search'; import useSearch from '@/utils/use-search';
import { ShopDealerWithdrawParam } from '@/api/shop/shopDealerWithdraw/model'; import { getTenantId } from '@/utils/domain';
import { pageShopDealerWithdraw } from '@/api/shop/shopDealerWithdraw';
import type {
ShopDealerWithdraw,
ShopDealerWithdrawParam
} from '@/api/shop/shopDealerWithdraw/model';
withDefaults( withDefaults(
defineProps<{ defineProps<{
@@ -73,9 +81,13 @@
// 搜索表单 // 搜索表单
const { where, resetFields } = useSearch<ShopDealerWithdrawParam>({ const { where, resetFields } = useSearch<ShopDealerWithdrawParam>({
keywords: '' keywords: '',
page: 1,
limit: 5000
}); });
const list = ref<ShopDealerWithdraw[]>([]);
// 搜索 // 搜索
const handleSearch = () => { const handleSearch = () => {
const searchParams = { ...where }; const searchParams = { ...where };
@@ -88,6 +100,102 @@
emit('search', searchParams); emit('search', searchParams);
}; };
const toMoney = (val: unknown) => {
const n = Number.parseFloat(String(val ?? '0'));
return Number.isFinite(n) ? n.toFixed(2) : '0.00';
};
const toApplyStatus = (val: unknown) => {
const n = Number(val);
if (n === 10) return '待审核';
if (n === 20) return '审核通过';
if (n === 30) return '驳回/取消';
if (n === 40) return '已打款';
return '';
};
const toPayType = (val: unknown) => {
const n = Number(val);
if (n === 10) return '微信/商家转账';
if (n === 20) return '支付宝';
if (n === 30) return '银行卡';
return '';
};
// 导出
const handleExport = async () => {
const array: (string | number)[][] = [
[
'订单号',
'用户',
'手机号',
'提现金额',
'打款方式',
'申请状态',
'审核/打款时间',
'创建时间',
'备注',
'租户ID'
]
];
const params = { ...where };
// 清除空值,避免把空字符串传给后端
Object.keys(params).forEach((key) => {
if (params[key] === '' || params[key] === undefined) {
delete params[key];
}
});
params.page = 1;
params.limit = 5000;
await pageShopDealerWithdraw(params)
.then((data) => {
list.value = data?.list || [];
list.value.forEach((d: ShopDealerWithdraw) => {
array.push([
d.id ?? '',
`${d.realName || d.nickname || '-'}(${d.userId ?? '-'})`,
d.phone ?? '',
toMoney(d.money),
toPayType(d.payType),
toApplyStatus(d.applyStatus),
d.auditTime ?? '',
d.createTime ?? '',
d.comments ?? '',
d.tenantId ?? ''
]);
});
const sheetName = `bak_shop_dealer_withdraw_${getTenantId()}`;
const workbook = { SheetNames: [sheetName], Sheets: {} as any };
const sheet = utils.aoa_to_sheet(array);
workbook.Sheets[sheetName] = sheet;
sheet['!cols'] = [
{ wch: 10 },
{ wch: 20 },
{ wch: 14 },
{ wch: 12 },
{ wch: 14 },
{ wch: 12 },
{ wch: 20 },
{ wch: 20 },
{ wch: 24 },
{ wch: 10 }
];
message.loading('正在导出...', 0);
setTimeout(() => {
writeFile(workbook, `${sheetName}.xlsx`);
message.destroy();
}, 1000);
})
.catch((e: any) => {
message.destroy();
message.error(e?.message ?? String(e));
});
};
// 重置搜索 // 重置搜索
const resetSearch = () => { const resetSearch = () => {
resetFields(); resetFields();

View File

@@ -27,8 +27,9 @@
<a-tag v-if="record.applyStatus === 20" color="success" <a-tag v-if="record.applyStatus === 20" color="success"
>审核通过</a-tag >审核通过</a-tag
> >
<a-tag v-if="record.applyStatus === 30" color="error">用户取消</a-tag> <a-tag v-if="record.applyStatus === 30" color="error">已驳回</a-tag>
<a-tag v-if="record.applyStatus === 40">已打款</a-tag> <a-tag v-if="record.applyStatus === 40">已打款</a-tag>
<a-tag v-if="record.applyStatus === 50" color="error">已取消</a-tag>
</template> </template>
<template v-if="column.key === 'userInfo'"> <template v-if="column.key === 'userInfo'">
<a-space> <a-space>