「工作小记」多个批量操作的链式实现

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

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

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

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

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

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

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

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

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

/** * 批量操作-校验操作 * @param {string} type 操作的按钮类型 * @return {void} 无 */constbatchInspection=type=> {
return () => {
constbatchItem=batchObj[type];
/** @name 校验失败列表  */constfailedList=batchSelectList.filter(item=>!getIncludesFlag(batchItem, item));
/** @name 校验成功列表  */constpassedList=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} 筛选状态的布尔值 */constgetIncludesFlag= (batchItem, item) => {
constpayStatusList=batchItem.payStatusList;
constorderStatusList=batchItem.orderStatusList;
consthasPayStatus=!!payStatusList;
consthasOrderStatus=!!orderStatusList;
letflag=false;
//=>true: 如果校验状态存在，则判断校验状态列表中是否包含当前需要校验的状态值if ((!hasPayStatus|| (hasPayStatus&&payStatusList.includes(item.payStatus))) && (!hasOrderStatus|| (hasOrderStatus&&orderStatusList.includes(item.orderStatus)))) {
flag=true;
  }
returnflag;
};

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

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