批量删除登录日志

1.增加后台批量删除登录日志方法，在Controller中增加删除登录日志的方法 代码如下：

    @Log(title = "登录日志", businessType = BusinessType.DELETE)
    @DeleteMapping(value="del")
    public AjaxResult delete(@RequestBody  Long[] infoIds)
    {
        return toAjax(logininforService.deleteLogininforByIds(infoIds));
    }

后台接口是一个DeleteMapping接口，传递的是一个JSON格式的主键ID数组，支持多条数据一起批量删除 ​

2.修改src/pages/loginfo/service.js中的删除方法，原代码如下

export async function removeRule(data, options) {
  return request('/api/rule', {
    data,
    method: 'DELETE',
    ...(options || {}),
  });
}

这里我们只改下函数名以及请求的后台url地址，method为DELETE跟后台一致，不用做调整，修改后代码如下

export async function removeLoginfo(data, options) {
  return request('/api/monitor/logininfor/del', {
    data,
    method: 'DELETE',
    ...(options || {}),
  });
}

​

3.回到src/pages/loginfo/index.jsx,修改index.jsx中引入service的代码，用新名称removeLoginfo替换掉原来的删除方法removeRule,替换前代码

import { loginfo, addLoginfo, updateLoginfo, removeRule } from './service';

替换后代码

import { loginfo, addLoginfo, updateLoginfo, removeLoginfo } from './service';

4.找到index.jsx中删除按钮的位置，删除按钮在页脚

  {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择{' '}
              <a
                style={{
                  fontWeight: 600,
                }}
              >
                {selectedRowsState.length}
              </a>{' '}
              项 &nbsp;&nbsp;
              <span>
                服务调用次数总计 {selectedRowsState.reduce((pre, item) => pre + item.callNo, 0)} 万
              </span>
            </div>
          }
        >
          <Button
            onClick={async () => {
              await handleRemove(selectedRowsState);
              setSelectedRows([]);
              actionRef.current?.reloadAndRest?.();
            }}
          >
            批量删除
          </Button>
          <Button type="primary">批量审批</Button>
        </FooterToolbar>
      )}

这段代码的逻辑是，如果有选中行即selectedRowsState?.length > 0，则显示 FooterToolbar组件，组件里面有两个按钮批量删除和批量审批，我们这里没有批量审批的逻辑，也没有服务调用次数总计，我们对这段代码做下调整，调整后为

   {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择{' '}
              <a
                style={{
                  fontWeight: 600,
                }}
              >
                {selectedRowsState.length}
              </a>{' '}
              项            
            </div>
          }
        >
          <Button
            onClick={async () => {
              await handleRemove(selectedRowsState);
              setSelectedRows([]);
              actionRef.current?.reloadAndRest?.();
            }}
          >
            批量删除
          </Button>  
        </FooterToolbar>
      )}

按钮点击事件会触发handleRemove(selectedRowsState)，handleRemove会调用后台，删除选定行的数据， setSelectedRows([])会清空state中的选中行记录, actionRef.current?.reloadAndRest?.();会重新加载表格。 ​

5.找到handleRemove方法，修改handleRemove方法，handleRemove方法原代码如下

const handleRemove = async (selectedRows) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;

  try {
    await removeRule({
      key: selectedRows.map((row) => row.key),
    });
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

参数selectedRows为选中数据行对象数组，会调用removeRule方法来批量删除，removeRule方法调用时会传一个 {key:[]}对象参数，removeRule方法我们已做修改，且原代码调用后台的参数格式不符合要求，我们做下调整，调整后handleRemove方法代码如下：

const handleRemove = async (selectedRows) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;

  try {
    await removeLoginfo(selectedRows.map((row) => row.infoId),
   );
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

方法名换成removeLoginfo，直接传递infoId数组，不用加key参数 ​

6.保存index.jsx，保存编译通过后，访问登录日志页面，测试下是否能实现批量删除，我们先查询所有2022年1月25日的数据 ​

全选后，出现批量删除按钮 点批量删除，2022年1月25日的登录数据已全部删除 重置一下，可以发现除了2022年1月25日的登录数据意外，其他日期的登录日志可以正常显示 最近做了个小API应用，希望大家关注支持下: www.yuque.com/docs/share/…