avue中增删改功能hook提取-Toy模板网

这篇具有很好参考价值的文章主要介绍了avue中增删改功能hook提取。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

再avue使用中，我们会进场用到表格的增删改功能，我们写一个公共的hooks，然后只需要对请求的方法，参数的前后处理，就可以统一生成文章来源地址https://www.toymoban.com/news/detail-854526.html

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 - key
  rowIdKey?: 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,
  };
}