/**
|
* 表格数据管理组合式函数
|
* 提供分页、搜索、选择等通用功能
|
*/
|
import { ref, reactive } from 'vue';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
export function useTableData(apiFunction, options = {}) {
|
const {
|
pageSize = 10,
|
searchField = 'searchAll'
|
} = options;
|
|
// 响应式数据
|
const tableData = ref([]);
|
const loading = ref(false);
|
const total = ref(0);
|
const selectedRows = ref([]);
|
|
// 查询参数
|
const queryParams = reactive({
|
[searchField]: '',
|
current: 1,
|
size: pageSize,
|
});
|
|
// 获取列表数据
|
const getList = async () => {
|
loading.value = true;
|
try {
|
const params = {
|
[searchField]: queryParams[searchField],
|
current: queryParams.current,
|
size: queryParams.size,
|
page: queryParams.current,
|
pageSize: queryParams.size,
|
pageNum: queryParams.current,
|
limit: queryParams.size,
|
offset: (queryParams.current - 1) * queryParams.size
|
};
|
|
const res = await apiFunction(params);
|
tableData.value = res.data.records || [];
|
total.value = res.data.total || 0;
|
} catch (error) {
|
ElMessage.error('获取数据失败');
|
console.error('API错误:', error);
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
// 搜索
|
const handleSearch = () => {
|
queryParams.current = 1;
|
getList();
|
};
|
|
// 重置搜索
|
const handleReset = () => {
|
queryParams[searchField] = '';
|
handleSearch();
|
};
|
|
// 分页处理
|
const handlePageChange = ({ page, limit }) => {
|
if (page && page !== queryParams.current) {
|
queryParams.current = page;
|
}
|
if (limit && limit !== queryParams.size) {
|
queryParams.size = limit;
|
queryParams.current = 1; // 改变每页大小时回到第一页
|
}
|
getList();
|
};
|
|
// 表格选择处理
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
|
// 批量删除
|
const deleteSelected = async (deleteFunction) => {
|
if (selectedRows.value.length === 0) {
|
ElMessage.warning('请选择要删除的数据');
|
return;
|
}
|
|
try {
|
await ElMessageBox.confirm(
|
`确认删除选中的 ${selectedRows.value.length} 条数据吗？`,
|
'删除确认',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}
|
);
|
|
const ids = selectedRows.value.map(row => row.id);
|
await deleteFunction(ids);
|
|
ElMessage.success('删除成功');
|
selectedRows.value = [];
|
getList();
|
} catch (error) {
|
if (error !== 'cancel') {
|
ElMessage.error('删除失败');
|
console.error('删除错误:', error);
|
}
|
}
|
};
|
|
// 刷新数据
|
const refresh = () => {
|
getList();
|
};
|
|
return {
|
// 数据
|
tableData,
|
loading,
|
total,
|
selectedRows,
|
queryParams,
|
|
// 方法
|
getList,
|
handleSearch,
|
handleReset,
|
handlePageChange,
|
handleSelectionChange,
|
deleteSelected,
|
refresh
|
};
|
}
|
