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

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

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

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

    1. export async function removeRule(data, options) {
    2.   return request('/api/rule', {
    3.     data,
    4.     method: 'DELETE',
    5.     ...(options || {}),
    6.   });
    7. }

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

    1. export async function removeLoginfo(data, options) {
    2.   return request('/api/monitor/logininfor/del', {
    3.     data,
    4.     method: 'DELETE',
    5.     ...(options || {}),
    6.   });
    7. }

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

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

    替换后代码

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

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

    1.   {selectedRowsState?.length > 0 && (
    2.         <FooterToolbar
    3.           extra={
    4.             <div>
    5.               已选择{' '}
    6.               <a
    7.                 style={{
    8.                   fontWeight: 600,
    9.                 }}
    10.               >
    11.                 {selectedRowsState.length}
    12.               </a>{' '}
    13.               项 &nbsp;&nbsp;
    14.               <span>
    15.                 服务调用次数总计 {selectedRowsState.reduce((pre, item) => pre + item.callNo, 0)} 万
    16.               </span>
    17.             </div>
    18.           }
    19.         >
    20.           <Button
    21.             onClick={async () => {
    22.               await handleRemove(selectedRowsState);
    23.               setSelectedRows([]);
    24.               actionRef.current?.reloadAndRest?.();
    25.             }}
    26.           >
    27.             批量删除
    28.           </Button>
    29.           <Button type="primary">批量审批</Button>
    30.         </FooterToolbar>
    31.       )}

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

    1.    {selectedRowsState?.length > 0 && (
    2.         <FooterToolbar
    3.           extra={
    4.             <div>
    5.               已选择{' '}
    6.               <a
    7.                 style={{
    8.                   fontWeight: 600,
    9.                 }}
    10.               >
    11.                 {selectedRowsState.length}
    12.               </a>{' '}
    13.               项            
    14.             </div>
    15.           }
    16.         >
    17.           <Button
    18.             onClick={async () => {
    19.               await handleRemove(selectedRowsState);
    20.               setSelectedRows([]);
    21.               actionRef.current?.reloadAndRest?.();
    22.             }}
    23.           >
    24.             批量删除
    25.           </Button>  
    26.         </FooterToolbar>
    27.       )}

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

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

    1. const handleRemove = async (selectedRows) => {
    2.   const hide = message.loading('正在删除');
    3.   if (!selectedRows) return true;
    5.   try {
    6.     await removeRule({
    7.       key: selectedRows.map((row) => row.key),
    8.     });
    9.     hide();
    10.     message.success('删除成功，即将刷新');
    11.     return true;
    12.   } catch (error) {
    13.     hide();
    14.     message.error('删除失败，请重试');
    15.     return false;
    16.   }
    17. };

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

    1. const handleRemove = async (selectedRows) => {
    2.   const hide = message.loading('正在删除');
    3.   if (!selectedRows) return true;
    5.   try {
    6.     await removeLoginfo(selectedRows.map((row) => row.infoId),
    7.    );
    8.     hide();
    9.     message.success('删除成功，即将刷新');
    10.     return true;
    11.   } catch (error) {
    12.     hide();
    13.     message.error('删除失败，请重试');
    14.     return false;
    15.   }
    16. };

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

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

    image.png
    全选后，出现批量删除按钮
    image.png
    点批量删除，2022年1月25日的登录数据已全部删除
    image.png
    重置一下，可以发现除了2022年1月25日的登录数据意外，其他日期的登录日志可以正常显示
    image.png