avue中增删改功能hook提取

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

javascript 复制代码
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,
  };
}
相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王2 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪3 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6415 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云5 小时前
npm淘宝镜像
前端·npm·node.js