feat(search): 添加搜索组件导出功能
- 在搜索组件中添加导出XLS按钮 - 集成xlsx库实现数据导出功能 - 添加货币格式化工具函数toMoney - 添加状态转换工具函数toApplyStatus和toPayType - 实现handleExport方法查询并导出数据为Excel文件 - 更新搜索表单参数配置添加分页限制 - 添加表格列配置设置最小宽度 - 修改状态标签显示文本将"用户取消"改为"已驳回" - 添加applyStatus为50的已取消状态标签显示
This commit is contained in:
@@ -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();
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user