多个批量操作的链式实现【玩转前端】

/** @name 批量操作分类对象  */
const batchObj = {
  cancel: {
    confirmTips: '是否取消所有选中的订单？', // 二次确认提示, 为空时跳过二次确认
    failedTips: '不可选择', // 校验不通过提示
    inspectionFlag: false, // 校验是否通过标识
    payStatusList: [1], // 需要校验的支付状态列表
  },
  push: {
    confirmTips: '',
    failedTips: '不可选择', // 校验不通过提示
    inspectionFlag: false, // 校验是否通过标识
    payStatusList: [1], // 需要校验的支付状态列表
    orderStatusList: [2], // 需要校验的订单状态列表
  },
};

<div onClick={() => batchOperate('cancel')}>
  批量取消
</div>
<div onClick={() => batchOperate('push')}>
  批量推送
</div>

/**
 * 批量操作
 * @param {string} type 操作按钮的key值
 * @return {void} 无
 */
const batchOperate = type => {
  return applyChainCall(type, [batchCheckboxOptions, batchDoubleConfirm, batchInspection]);
};

/**
 * 链式调用 当调用到该函数的时候，该函数才执行
 * @param {Array} chainCalls 所有的链式函数列表
 * @param {string} type 操作的按钮类型
 * @param {number} index 链式函数调用的位置 默认第一个
 * @return {void} 无
 */
const applyChainCall = (type, chainCalls, index = 0) => {
  return chainCalls[index](type, chainCalls)();
};

/**
 * 获取下一步函数的处理事件 直接执行下一步操作
 * @param {string} type 操作的按钮类型
 * @param {Array} chainCalls 所有的链式函数列表
 * @param {Function} funcType 当前步骤的方法名
 * @return {Function} 下一步方法执行
 */
const goToNext = (type, chainCalls, funcType) => {
  let funcIndex = 0;
  chainCalls.forEach((chainItem, chainIndex) => {
    if (chainItem === funcType) {
      funcIndex = chainIndex;
    }
  });
  return chainCalls[funcIndex + 1](type, chainCalls)();
};

/** @name 表格选中的数据  */
const [batchSelectList, setBatchSelectList] = useState([]);

/**
 * 表格多选操作-设置选择项数据
 * @param {void} 无
 * @return {void} 无
 */
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    setBatchSelectList(selectedRows);
  },
};

/**
 * 批量操作-是否选择列表数据
 * @param {string} type 操作的按钮类型
 * @param {Array} chainCalls 所有的链式函数列表
 * @return {void} 无
 */
const batchCheckboxOptions = (type, chainCalls) => {
  return () => {
    // => true: 如果列表数据一项都没有选中则给出提示弹窗，反之直接到下一步
    if (batchSelectList.length === 0) {
      Modal.confirm({
        keyboard: true,
        maskClosable: true,
        title: '提示',
        content: '请至少选择一项',
      });
    } else {
      return goToNext(type, chainCalls, batchCheckboxOptions);
    }
  };
};

/**
 * 批量操作-二次确认
 * @param {string} type 操作的按钮类型
 * @param {Array} chainCalls 所有的链式函数列表
 * @return {void} 无
 */
const batchDoubleConfirm = (type, chainCalls) => {
  return () => {
    const batchItem = batchObj[type];
    // => true: 有二次提示的才弹出二次提示弹窗，反之直接到下一步
    if (batchItem.confirmTips) {
      Modal.confirm({
        keyboard: true,
        maskClosable: true,
        title: '提示',
        content: batchItem.confirmTips,
        onOk: () => {
          return goToNext(type, chainCalls, batchDoubleConfirm);
        },
      });
    } else {
      return goToNext(type, chainCalls, batchDoubleConfirm);
    }
  };
};

/**
 * 批量操作-校验操作
 * @param {string} type 操作的按钮类型
 * @return {void} 无
 */
const batchInspection = type => {
  return () => {
    const batchItem = batchObj[type];
    /** @name 校验失败列表  */
    const failedList = batchSelectList.filter(item => !getIncludesFlag(batchItem, item));
    /** @name 校验成功列表  */
    const passedList = batchSelectList.filter(item => getIncludesFlag(batchItem, item));
    // =>true: 如果校验失败列表的数组长度不为0，表示有校验失败的表格数据，则调用校验失败方法，反之调用校验成功方法
    if (failedList.length !== 0) {
      batchInspectionFailed(type, failedList);
    } else {
      batchInspectionPassed(type, passedList);
    }
  };
};

/**
 * 批量操作-筛选状态
 * @param {Object} batchItem 批处理对象
 * @param {Object} item 筛选的对象
 * @return {boolean} 筛选状态的布尔值
 */
const getIncludesFlag = (batchItem, item) => {
  const payStatusList = batchItem.payStatusList;
  const orderStatusList = batchItem.orderStatusList;
  const hasPayStatus = !!payStatusList;
  const hasOrderStatus = !!orderStatusList;
  let flag = false;
  //=>true: 如果校验状态存在，则判断校验状态列表中是否包含当前需要校验的状态值
  if ((!hasPayStatus || (hasPayStatus && payStatusList.includes(item.payStatus))) && (!hasOrderStatus || (hasOrderStatus && orderStatusList.includes(item.orderStatus)))) {
    flag = true;
  }
  return flag;
};

/**
 * 批量操作-校验通过
 * @param {string} type 操作的按钮类型
 * @param {Array} list 通过校验的数据列表
 * @return {void} 无
 */
const batchInspectionPassed = (type, list) => {
  // 调用接口，一般会将选择的表格数据处理成后端要求的入参的格式，传入接口中。
};

/**
 * 批量操作-校验不通过
 * @param {string} type 操作的按钮类型
 * @param {Array} list 没有通过校验的数据列表
 * @return {void} 无
 */
const batchInspectionFailed = (type, list) => {
  const batchItem = batchObj[type];
  let contentList = [];
  list.forEach(item => {
    contentList.push(item.adjustNo);
  });
  contentList = contentList.map(item => '订单号' + item);
  const content = contentList.join(',') + batchItem.failedTips;
  Modal.confirm({
    keyboard: true,
    maskClosable: true,
    title: '提示',
    content: content,
  });
};