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

@@ -7,34 +7,87 @@
</template>
<span>添加</span>
</a-button>
<a-button class="ele-btn-icon" @click="exportData">
<template #icon>
<CloudDownloadOutlined />
</template>
<span>导出</span>
</a-button>
<a-button
danger
class="ele-btn-icon"
:disabled="!selection?.length"
@click="remove"
>
<template #icon>
<DeleteOutlined />
</template>
<span>批量删除</span>
</a-button>
<a-input-search
allow-clear
v-model:value="keywords"
placeholder="请输入关键词"
style="width: 220px"
@search="handleSearch"
@pressEnter="handleSearch"
/>
</a-space>
</template>
<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue';
import type { GradeParam } from '@/api/user/grade/model';
import { watch } from 'vue';
import { computed, ref, watch } from 'vue';
import {
PlusOutlined,
CloudDownloadOutlined,
DeleteOutlined
} from '@ant-design/icons-vue';
import type {
CreditMpCustomer,
CreditMpCustomerParam
} from '@/api/credit/creditMpCustomer/model';
const props = withDefaults(
defineProps<{
// 选中的角色
selection?: [];
selection?: CreditMpCustomer[];
}>(),
{}
{
selection: () => []
}
);
const emit = defineEmits<{
(e: 'search', where?: GradeParam): void;
(e: 'search', where?: CreditMpCustomerParam): void;
(e: 'add'): void;
(e: 'remove'): void;
(e: 'batchMove'): void;
(e: 'exportData'): void;
}>();
const keywords = ref('');
const selection = computed(() => props.selection || []);
// 新增
const add = () => {
emit('add');
};
// 搜索
const handleSearch = () => {
emit('search', { keywords: keywords.value });
};
// 导出
const exportData = () => {
emit('exportData');
};
// 批量删除
const remove = () => {
emit('remove');
};
watch(
() => props.selection,
() => {}

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);