feat(creditMpCustomer): 添加导出和批量删除功能
- 在搜索组件中添加导出按钮和批量删除按钮 - 实现导出数据功能,支持导出小程序端客户列表 - 添加关键词搜索功能,支持按关键词过滤数据 - 实现批量删除功能,支持选择多个客户进行删除 - 更新表格配置,添加行选择和搜索参数传递 - 修改数据源查询逻辑,支持关键词和状态筛选 - 添加文件下载图标和删除图标依赖
This commit is contained in:
@@ -7,34 +7,87 @@
|
|||||||
</template>
|
</template>
|
||||||
<span>添加</span>
|
<span>添加</span>
|
||||||
</a-button>
|
</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>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
import { computed, ref, watch } from 'vue';
|
||||||
import type { GradeParam } from '@/api/user/grade/model';
|
import {
|
||||||
import { watch } from 'vue';
|
PlusOutlined,
|
||||||
|
CloudDownloadOutlined,
|
||||||
|
DeleteOutlined
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import type {
|
||||||
|
CreditMpCustomer,
|
||||||
|
CreditMpCustomerParam
|
||||||
|
} from '@/api/credit/creditMpCustomer/model';
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
// 选中的角色
|
// 选中的角色
|
||||||
selection?: [];
|
selection?: CreditMpCustomer[];
|
||||||
}>(),
|
}>(),
|
||||||
{}
|
{
|
||||||
|
selection: () => []
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: 'search', where?: GradeParam): void;
|
(e: 'search', where?: CreditMpCustomerParam): void;
|
||||||
(e: 'add'): void;
|
(e: 'add'): void;
|
||||||
(e: 'remove'): void;
|
(e: 'remove'): void;
|
||||||
(e: 'batchMove'): void;
|
(e: 'batchMove'): void;
|
||||||
|
(e: 'exportData'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
const keywords = ref('');
|
||||||
|
const selection = computed(() => props.selection || []);
|
||||||
|
|
||||||
// 新增
|
// 新增
|
||||||
const add = () => {
|
const add = () => {
|
||||||
emit('add');
|
emit('add');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const handleSearch = () => {
|
||||||
|
emit('search', { keywords: keywords.value });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出
|
||||||
|
const exportData = () => {
|
||||||
|
emit('exportData');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 批量删除
|
||||||
|
const remove = () => {
|
||||||
|
emit('remove');
|
||||||
|
};
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.selection,
|
() => props.selection,
|
||||||
() => {}
|
() => {}
|
||||||
|
|||||||
@@ -3,10 +3,11 @@
|
|||||||
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
<a-card :bordered="false" :body-style="{ padding: '16px' }">
|
||||||
<ele-pro-table
|
<ele-pro-table
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
row-key="creditMpCustomerId"
|
row-key="id"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:datasource="datasource"
|
:datasource="datasource"
|
||||||
:customRow="customRow"
|
:customRow="customRow"
|
||||||
|
v-model:selection="selection"
|
||||||
tool-class="ele-toolbar-form"
|
tool-class="ele-toolbar-form"
|
||||||
class="sys-org-table"
|
class="sys-org-table"
|
||||||
>
|
>
|
||||||
@@ -17,6 +18,7 @@
|
|||||||
@add="openEdit"
|
@add="openEdit"
|
||||||
@remove="removeBatch"
|
@remove="removeBatch"
|
||||||
@batchMove="openMove"
|
@batchMove="openMove"
|
||||||
|
@exportData="exportData"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #bodyCell="{ column, record }">
|
<template #bodyCell="{ column, record }">
|
||||||
@@ -61,8 +63,14 @@
|
|||||||
import Search from './components/search.vue';
|
import Search from './components/search.vue';
|
||||||
import {getPageTitle} from '@/utils/common';
|
import {getPageTitle} from '@/utils/common';
|
||||||
import CreditMpCustomerEdit from './components/creditMpCustomerEdit.vue';
|
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 type { CreditMpCustomer, CreditMpCustomerParam } from '@/api/credit/creditMpCustomer/model';
|
||||||
|
import { exportCreditData } from '../utils/export';
|
||||||
|
|
||||||
// 表格实例
|
// 表格实例
|
||||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||||
@@ -77,20 +85,23 @@
|
|||||||
const showMove = ref(false);
|
const showMove = ref(false);
|
||||||
// 加载状态
|
// 加载状态
|
||||||
const loading = ref(true);
|
const loading = ref(true);
|
||||||
|
// 搜索关键词
|
||||||
|
const searchText = ref('');
|
||||||
|
|
||||||
// 表格数据源
|
// 表格数据源
|
||||||
const datasource: DatasourceFunction = ({
|
const datasource: DatasourceFunction = ({
|
||||||
page,
|
page,
|
||||||
limit,
|
limit,
|
||||||
where,
|
where = {},
|
||||||
orders,
|
orders,
|
||||||
filters
|
filters
|
||||||
}) => {
|
}) => {
|
||||||
|
const params: CreditMpCustomerParam = { ...(where as CreditMpCustomerParam) };
|
||||||
if (filters) {
|
if (filters) {
|
||||||
where.status = filters.status;
|
(params as any).status = filters.status;
|
||||||
}
|
}
|
||||||
return pageCreditMpCustomer({
|
return pageCreditMpCustomer({
|
||||||
...where,
|
...params,
|
||||||
...orders,
|
...orders,
|
||||||
page,
|
page,
|
||||||
limit
|
limit
|
||||||
@@ -227,8 +238,12 @@
|
|||||||
|
|
||||||
/* 搜索 */
|
/* 搜索 */
|
||||||
const reload = (where?: CreditMpCustomerParam) => {
|
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 = [];
|
selection.value = [];
|
||||||
tableRef?.value?.reload({ where: where });
|
tableRef?.value?.reload({ where: targetWhere });
|
||||||
};
|
};
|
||||||
|
|
||||||
/* 打开编辑弹窗 */
|
/* 打开编辑弹窗 */
|
||||||
@@ -242,6 +257,39 @@
|
|||||||
showMove.value = true;
|
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 remove = (row: CreditMpCustomer) => {
|
||||||
const hide = message.loading('请求中..', 0);
|
const hide = message.loading('请求中..', 0);
|
||||||
|
|||||||
Reference in New Issue
Block a user