/**
|
* 通用删除功能组合式函数
|
* 提供统一的删除确认、API调用、数据更新逻辑
|
*/
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
/**
|
* 创建删除功能
|
* @param {Object} options 配置选项
|
* @param {Function|Function} options.deleteApi 删除API函数或返回API函数的函数
|
* @param {Function|Function} options.getList 重新获取列表数据的函数或返回函数的函数
|
* @param {Ref} options.selectedRows 选中行的响应式引用
|
* @param {Ref} options.tableData 表格数据的响应式引用
|
* @param {Ref} options.total 总数的响应式引用
|
* @param {String} options.confirmText 确认删除的提示文本
|
* @param {String} options.successText 删除成功的提示文本
|
* @param {Boolean} options.useLocalUpdate 是否使用本地更新（不重新请求接口）
|
* @returns {Object} 返回删除相关的方法
|
*/
|
export function useDelete(options = {}) {
|
const {
|
deleteApi,
|
getList,
|
selectedRows,
|
tableData,
|
total,
|
confirmText = "确定删除选中的数据吗？",
|
successText = "删除成功",
|
useLocalUpdate = false
|
} = options;
|
|
/**
|
* 获取实际的删除API函数
|
* 支持直接传入函数或返回函数的函数
|
*/
|
const getDeleteApi = () => {
|
if (typeof deleteApi === 'function') {
|
// 尝试调用看是否返回函数
|
try {
|
const result = deleteApi();
|
return typeof result === 'function' ? result : deleteApi;
|
} catch (error) {
|
// 如果调用出错，说明这本身就是API函数
|
return deleteApi;
|
}
|
}
|
return deleteApi;
|
};
|
|
/**
|
* 获取实际的获取列表函数
|
* 支持直接传入函数或返回函数的函数
|
*/
|
const getListFunction = () => {
|
if (typeof getList === 'function') {
|
try {
|
const result = getList();
|
return typeof result === 'function' ? result : getList;
|
} catch (error) {
|
// 如果调用出错，说明这本身就是列表函数
|
return getList;
|
}
|
}
|
return getList;
|
};
|
|
/**
|
* 批量删除方法
|
* @param {Array} customIds 自定义要删除的ID数组，如果不传则使用selectedRows
|
*/
|
const handleDelete = async (customIds = null) => {
|
// 确定要删除的行
|
const rowsToDelete = customIds ?
|
tableData.value.filter(item => customIds.includes(item.id)) :
|
selectedRows.value;
|
|
// 检查是否有选中数据
|
if (rowsToDelete.length === 0) {
|
ElMessage.warning("请选择要删除的数据");
|
return false;
|
}
|
|
try {
|
// 确认删除
|
await ElMessageBox.confirm(confirmText, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
});
|
|
// 提取ID
|
const ids = rowsToDelete.map(item => item.id);
|
|
// 获取当前的删除API函数
|
const currentDeleteApi = getDeleteApi();
|
if (!currentDeleteApi) {
|
ElMessage.error("删除API未配置");
|
return false;
|
}
|
|
// 调用删除API
|
const res = await currentDeleteApi(ids);
|
|
if (res.code === 200) {
|
// 根据配置选择更新方式
|
if (useLocalUpdate) {
|
// 本地更新：从表格数据中移除已删除的项
|
tableData.value = tableData.value.filter(item => !ids.includes(item.id));
|
if (total && total.value !== undefined) {
|
total.value = tableData.value.length;
|
}
|
} else {
|
// 重新获取数据
|
const currentGetList = getListFunction();
|
if (currentGetList) {
|
await currentGetList();
|
}
|
}
|
|
// 清空选中状态
|
if (selectedRows && selectedRows.value) {
|
selectedRows.value = [];
|
}
|
|
ElMessage.success(successText);
|
return true;
|
} else {
|
ElMessage.error("删除失败：" + (res.msg || "未知错误"));
|
return false;
|
}
|
} catch (error) {
|
if (error !== "cancel") {
|
console.error("删除操作失败:", error);
|
ElMessage.error("删除失败：" + (error.message || "请稍后重试"));
|
} else {
|
ElMessage.info("已取消删除");
|
}
|
return false;
|
}
|
};
|
|
/**
|
* 删除单个项目
|
* @param {Object} row 要删除的行数据
|
*/
|
const handleDeleteSingle = async (row) => {
|
return await handleDelete([row.id]);
|
};
|
|
/**
|
* 删除多个项目（批量删除）
|
*/
|
const handleDeleteBatch = async () => {
|
return await handleDelete();
|
};
|
|
return {
|
handleDelete,
|
handleDeleteSingle,
|
handleDeleteBatch
|
};
|
}
|
