vue-hooks__钩子函数__进阶

联合其他模块进行使用

• useHandleData 用于处理数据

import { ElMessageBox, ElMessage } from "element-plus";// 引入element-plus的弹窗组件

/**
 * @description 操作单条数据信息(二次确认【删除、禁用、启用、重置密码】)
 * @param {Function} api 操作数据接口的api方法(必传)
 * @param {Object} params 携带的操作数据参数 {id,params}(必传)
 * @param {String} message 提示信息(必传)
 * @param {String} confirmType icon类型(不必传,默认为 warning)
 * @return Promise
 */
export const useHandleData = (
	api,
	params,
	message,
	confirmType = "warning"
) => {
	return new Promise((resolve, reject) => {
		ElMessageBox.confirm(`是否${message}?`, "温馨提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: confirmType,
			draggable: true
		}).then(async () => {
			const res = await api(params);
			if (!res) return reject(false);// 如果接口返回的数据为false,则不进行后续操作
			ElMessage({
				type: "success",
				message: `${message}成功!`
			});
			resolve(true);
		});
	});
};

使用示范:

import { useHandleData } from "@/hooks/useHandleData";// 引入useHandleData钩子函数
import { deleteApi } from "@/api";// 引入接口
// 删除数据
const handleDelete = (row) => {
   useHandleData(deleteApi, { id: row.id }, "删除", "error")
};