封装一个接口方法,根据条件,调用不同接口数据

首先在接口引入文件里配置

import requests from 'utils/request'

封装一个方法类名

// 查询采购场景 没有启用

export const getList = (url,method,data: any) => {
  return requests(url, {
    method: method,
    query: data
  });
};

在Vue项目中data函数里、或者react 项目中state里
设置一个初始变量

  getListOption: { url; method } = {
    url: '/yst-pur/pur/purscene/search', // 初始化想要默认先走的接口
    method: 'post'
  };
  enableFlag: boolean = false; //是否启用 跟后台约定的
  sceneIds: string[] = []; //已选中的id数组

假设我们是要创建文件之后就执行加载接口文件进行获取接口赋值展示

在Vue项目中create 或者mounted 钩子函数中,在react项目的 componentDidMount 钩子函数中执行接口的调佣

这里是一react为例,Vue也是一样的,换换钩子函数就可以了。
  async componentDidMount() {
    this.setDefaultParams(this.props?.match?.params?.id); // 传过来详情id参数,这里接收了一下。
  }
  setDefaultParams = async (id) => {
    const deitem = await service.getProcurementTypeId(id); // 详情接口
    // 下面就是判断条件,要执行的是那一条接哭数据
    if (deitem && deitem.data.enableFlag) { // 如果启用
      this.getListOption = {
        url: `/yst-fin/fin/purSettleDef/listScene`, // 查询已对应采购场景--启用之后的
        method: 'post'
      };
      this.enableFlag = true; //  enableFlag 是我定义的一个启用状态true或false,跟后台约定的,上边已经有定义了
    } else { // 如果不启用
      this.enableFlag = false; // 没有启用的状态
      this.sceneIds = deitem.data.sceneIds;
    }
    this.setState({ isInitFinish: true });
  };

当我们上边定义类方法的时候,可能接口局不能直接调,要自己去赋值了
所以

request: async (paramData) => {
    return service.getList(
      this.getListOption.url, // 初始化接口
      this.getListOption.method,
      { // 传参
        ...paramData,
        defineId: this.props?.match?.params?.id,
        es3: 'NON', // 不免值
        size: 100, // 不分页,统一的固定值
        orders: [{ asc: false, column: 'createTime' }] //排序
      }
    );
  },
  
  // 当我们执行接口成功之后,走的一个成功防范
  successCallBack: (successTableRef) => {
    this.setDefaultSelectionData(successTableRef);
  },
  
  // 这个方法你自己写在上边,不要放在这里,我这里是render 的过程,这里只是让你看的比较顺眼
setDefaultSelectionData = (successTableRef) => {
//在这里进行判断,让有启用的数据并且有选中的数据进行push 展示
    if (!this.enableFlag && this.sceneIds?.length > 0) {
      const dataSource = successTableRef.dataSource;
      const selectedRowKeys = [];
      const selectedRows = [];
      this.sceneIds.forEach((itemid) => {
        const row = dataSource.find((it) => it.id == itemid);
        if (row) {
          selectedRowKeys.push(itemid);
          selectedRows.push(row);
        }
      });
      const selectionData = {
        selectedRowKeys,
        selectedRows,
        length: selectedRowKeys.length
      };
      setTimeout(() => {
        this.tableRef?.setSelectionData(selectionData);
      }, 0);
    }
  };

在保存页面
// 保存采购场景按钮

  save = async (selectionData?: any) => {
    const item = selectionData.selectedRows.map(
      ({ sceneCode, id, sceneName, es7 }) => ({
        sceneCode,
        sceneId: id,
        sceneName,
        es7
      })
    );
    let params = {
      defineId: this.props?.match?.params?.id,
      params: item
    };
    const res = await service.addScene(params);
    if (res && res.success === true) {
      this.setState({});
      ElNotification({ type: 'success', message: res.msg });
      // 保存完成后自动跳转到指定页面
      const { store } = this.props
      store.MultiTabMobx.closeCurrentToPath('/fin/purcSettlement/Buyer');
    } else {
      ElNotification({
        type: 'error',
        message: res.msg
      });
    }
  };
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值