feat(creditMpCustomer): 添加导出和批量删除功能

- 在搜索组件中添加导出按钮和批量删除按钮
- 实现导出数据功能,支持导出小程序端客户列表
- 添加关键词搜索功能,支持按关键词过滤数据
- 实现批量删除功能,支持选择多个客户进行删除
- 更新表格配置,添加行选择和搜索参数传递
- 修改数据源查询逻辑,支持关键词和状态筛选
- 添加文件下载图标和删除图标依赖
This commit is contained in:
2026-03-16 21:39:57 +08:00
parent c79c68e7a1
commit 41a1fcb4ed
2 changed files with 113 additions and 12 deletions

View File

@@ -3,10 +3,11 @@
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-pro-table
ref="tableRef"
row-key="creditMpCustomerId"
row-key="id"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
v-model:selection="selection"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
@@ -17,6 +18,7 @@
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
@exportData="exportData"
/>
</template>
<template #bodyCell="{ column, record }">
@@ -61,8 +63,14 @@
import Search from './components/search.vue';
import {getPageTitle} from '@/utils/common';
import CreditMpCustomerEdit from './components/creditMpCustomerEdit.vue';
import { pageCreditMpCustomer, removeCreditMpCustomer, removeBatchCreditMpCustomer } from '@/api/credit/creditMpCustomer';
import {
pageCreditMpCustomer,
listCreditMpCustomer,
removeCreditMpCustomer,
removeBatchCreditMpCustomer
} from '@/api/credit/creditMpCustomer';
import type { CreditMpCustomer, CreditMpCustomerParam } from '@/api/credit/creditMpCustomer/model';
import { exportCreditData } from '../utils/export';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -77,20 +85,23 @@
const showMove = ref(false);
// 加载状态
const loading = ref(true);
// 搜索关键词
const searchText = ref('');
// 表格数据源
const datasource: DatasourceFunction = ({
page,
limit,
where,
where = {},
orders,
filters
}) => {
const params: CreditMpCustomerParam = { ...(where as CreditMpCustomerParam) };
if (filters) {
where.status = filters.status;
(params as any).status = filters.status;
}
return pageCreditMpCustomer({
...where,
...params,
...orders,
page,
limit
@@ -227,8 +238,12 @@
/* 搜索 */
const reload = (where?: CreditMpCustomerParam) => {
if (where && Object.prototype.hasOwnProperty.call(where, 'keywords')) {
searchText.value = where.keywords ?? '';
}
const targetWhere = where ?? { keywords: searchText.value || undefined };
selection.value = [];
tableRef?.value?.reload({ where: where });
tableRef?.value?.reload({ where: targetWhere });
};
/* 打开编辑弹窗 */
@@ -242,6 +257,39 @@
showMove.value = true;
};
/* 导出 */
const exportData = () => {
exportCreditData<CreditMpCustomer>({
filename: '小程序端客户列表',
includeCompanyName: false,
columns: [
{ title: 'ID', dataIndex: 'id' },
{ title: '拖欠方', dataIndex: 'toUser' },
{ title: '拖欠金额', dataIndex: 'price' },
{ title: '拖欠年数', dataIndex: 'years' },
{ title: '链接', dataIndex: 'url' },
{ title: '状态', dataIndex: 'statusTxt' },
{ title: '所在省份', dataIndex: 'province' },
{ title: '所在城市', dataIndex: 'city' },
{ title: '所在辖区', dataIndex: 'region' },
{ title: '文件路径', dataIndex: 'files' },
{ title: '是否有数据', dataIndex: 'hasData' },
{ title: '备注', dataIndex: 'comments' },
{ title: '是否推荐', dataIndex: 'recommend' },
{ title: '排序(数字越小越靠前)', dataIndex: 'sortNumber' },
{ title: '状态, 0正常, 1冻结', dataIndex: 'status' },
{ title: '是否删除, 0否, 1是', dataIndex: 'deleted' },
{ title: '用户ID', dataIndex: 'userId' },
{ title: '创建时间', dataIndex: 'createTime' },
{ title: '修改时间', dataIndex: 'updateTime' }
],
fetchData: () =>
listCreditMpCustomer({
keywords: searchText.value || undefined
})
});
};
/* 删除单个 */
const remove = (row: CreditMpCustomer) => {
const hide = message.loading('请求中..', 0);