再avue使用中，我们会进场用到表格的增删改功能，我们写一个公共的hooks，然后只需要对请求的方法，参数的前后处理，就可以统一生成

import type { AxiosPromise } from "axios";
import type { Ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { cloneDeep } from "lodash-es";
import { error } from "console";
export interface CudOptions {cRequest: (...args) => AxiosPromise; //新增uRequest: (...args) => AxiosPromise; //更新dRequest: (...args) => AxiosPromise; //删除tableRequest: (...args) => AxiosPromise; // avue table onload 方法page: Ref<any>;// 前丶后置处理beforCReqFunc?: (row: any) => void;afterCReqFunc?: (row: any) => void;beforUReqFunc?: (row: any) => void;afterUReqFunc?: (row: any) => void;beforDReqFunc?: (row: any) => void;afterDReqFunc?: (row: any) => void;// 额外的请求参数cQuery?: object | Ref<object>;uQuery?: object | Ref<object>;// id - keyrowIdKey?: string;// mock 配置isMock?: boolean;mockDelay?: number;developType?: string;
}export default function (options: CudOptions) {/**增，删，改 */const _ = options;const pageRow = unref(_.page);const defaultPage = {pageSize: 1,currentPage: 10,total: 0,};//删除const rowDel = (row: object) => {ElMessageBox.confirm("确定将选择数据删除？", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(async () => {const rowCopy = cloneDeep(row);_?.beforDReqFunc?.(rowCopy); //请求前自定义处理try {const res = await _?.dRequest(rowCopy[_?.rowIdKey ?? "id"]);if ((res as any).code === 200) {ElMessage.success({type: "success",message: "操作成功!",});_?.afterDReqFunc?.(rowCopy); //请求自定义后处置//更新tabel数据await _?.tableRequest?.(_?.page);}} catch (e) {ElMessage.error(e);}});};//新增const rowSave = async (row, done, loading) => {const rowCopy = cloneDeep(row);_?.beforCReqFunc?.(rowCopy); //请求前自定义处理try {loading();const res = await _?.cRequest?.({...rowCopy,...unref(_?.cQuery ?? {}),});if ((res as unknown as any).code === 200) {ElMessage({type: "success",message: "操作成功",});done();}await _?.tableRequest?.(_?.page);_?.afterCReqFunc?.(rowCopy);} catch (e) {console.log("create error", error);}};// 更新const rowUpdate = async (row, index, done, loading) => {if (_.isMock) {setTimeout(() => {ElMessage({type: "success",message: "操作成功!",});}, _.mockDelay ?? 1000);} else {const rowCopy = cloneDeep(row);_?.beforUReqFunc?.(rowCopy); // 请求自定义前处理try {loading();const res = await _?.uRequest?.({...rowCopy,...unref(_?.uQuery ?? {}),});if ((res as unknown as ReplaceTargetType<any>).code === 200) {ElMessage({type: "success",message: "操作成功!",});done();}// 更新table数据await _?.tableRequest?.(_.page);_?.afterUReqFunc?.(rowCopy); // 请求自定义后处理} catch (error) {// done();console.log("create error:", error);}}};return {rowDel,rowSave,rowUpdate,};
}