完善：完善所有日志功能的列表分页功能

continew-admin-ui/src/views/monitor/log/login/index.vue

@@ -43,15 +43,16 @@
         </a-col>
       </a-row>
       <a-table
-        row-key="logId"
-        :loading="loading"
-        :pagination="pagination"
         :columns="columns"
         :data="renderData"
+        :pagination="paginationProps"
+        row-key="logId"
         :bordered="false"
         :stripe="true"
+        :loading="loading"
         size="large"
-        @page-change="onPageChange"
+        @page-change="handlePageChange"
+        @page-size-change="handlePageSizeChange"
       >
         <template #index="{ rowIndex }">
           {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
@@ -82,14 +83,13 @@
   import useLoading from '@/hooks/loading';
   import { queryLoginLogList, LoginLogRecord, LoginLogParams } from '@/api/monitor/log';
   import { Pagination } from '@/types/global';
+  import { PaginationProps } from '@arco-design/web-vue';
   import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
   import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
   import { FormInstance } from '@arco-design/web-vue/es/form';
 
   const { loading, setLoading } = useLoading(true);
   const queryFormRef = ref<FormInstance>();
-  const renderData = ref<LoginLogRecord[]>([]);
-
   const queryFormData = ref({
     status: undefined,
     createTime: [],
@@ -105,6 +105,23 @@
     },
   ]);
 
+  // 查询
+  const toQuery = () => {
+    fetchData({
+      page: pagination.current,
+      size: pagination.pageSize,
+      sort: ['createTime,desc'],
+      ...queryFormData.value,
+    } as unknown as LoginLogParams);
+  };
+
+  // 重置
+  const resetQuery = async () => {
+    await queryFormRef.value?.resetFields();
+    await fetchData();
+  };
+
+  const renderData = ref<LoginLogRecord[]>([]);
   const basePagination: Pagination = {
     current: 1,
     pageSize: 10,
@@ -112,6 +129,14 @@
   const pagination = reactive({
     ...basePagination,
   });
+  const paginationProps = computed((): PaginationProps => {
+    return {
+      showTotal: true,
+      showPageSize: true,
+      total: pagination.total,
+      current: pagination.current,
+    }
+  });
   const columns = computed<TableColumnData[]>(() => [
     {
       title: '序号',
@@ -150,7 +175,7 @@
     },
   ]);
 
-  // 查询列表
+  // 分页查询列表
   const fetchData = async (
     params: LoginLogParams = { page: 1, size: 10, sort: ['createTime,desc'] }
   ) => {
@@ -164,25 +189,11 @@
       setLoading(false);
     }
   };
-
+  const handlePageChange = (current: number) => {
-  const onPageChange = (current: number) => {
     fetchData({ page: current, size: pagination.pageSize, sort: ['createTime,desc'] });
   };
-
+  const handlePageSizeChange = (pageSize: number) => {
-  // 查询
+    fetchData({ page: pagination.current, size: pageSize, sort: ['createTime,desc'] });
-  const toQuery = () => {
-    fetchData({
-      page: pagination.current,
-      size: pagination.pageSize,
-      sort: ['createTime,desc'],
-      ...queryFormData.value,
-    } as unknown as LoginLogParams);
-  };
-
-  // 重置
-  const resetQuery = async () => {
-    await queryFormRef.value?.resetFields();
-    await fetchData();
   };
   fetchData();
 </script>

continew-admin-ui/src/views/monitor/log/operation/index.vue

@@ -55,15 +55,16 @@
         </a-col>
       </a-row>
       <a-table
-        row-key="logId"
-        :loading="loading"
-        :pagination="pagination"
         :columns="columns"
         :data="renderData"
+        :pagination="paginationProps"
+        row-key="logId"
         :bordered="false"
         :stripe="true"
+        :loading="loading"
         size="large"
-        @page-change="onPageChange"
+        @page-change="handlePageChange"
+        @page-size-change="handlePageSizeChange"
       >
         <template #index="{ rowIndex }">
           {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
@@ -94,14 +95,13 @@
   import useLoading from '@/hooks/loading';
   import { queryOperationLogList, OperationLogRecord, OperationLogParams } from '@/api/monitor/log';
   import { Pagination } from '@/types/global';
+  import { PaginationProps } from '@arco-design/web-vue';
   import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
   import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
   import { FormInstance } from '@arco-design/web-vue/es/form';
 
   const { loading, setLoading } = useLoading(true);
   const queryFormRef = ref<FormInstance>();
-  const renderData = ref<OperationLogRecord[]>([]);
-
   const queryFormData = ref({
     description: '',
     status: undefined,
@@ -118,6 +118,23 @@
     },
   ]);
 
+  // 查询
+  const toQuery = () => {
+    fetchData({
+      page: pagination.current,
+      size: pagination.pageSize,
+      sort: ['createTime,desc'],
+      ...queryFormData.value,
+    } as unknown as OperationLogParams);
+  };
+
+  // 重置
+  const resetQuery = async () => {
+    await queryFormRef.value?.resetFields();
+    await fetchData();
+  };
+
+  const renderData = ref<OperationLogRecord[]>([]);
   const basePagination: Pagination = {
     current: 1,
     pageSize: 10,
@@ -125,6 +142,14 @@
   const pagination = reactive({
     ...basePagination,
   });
+  const paginationProps = computed((): PaginationProps => {
+    return {
+      showTotal: true,
+      showPageSize: true,
+      total: pagination.total,
+      current: pagination.current,
+    }
+  });
   const columns = computed<TableColumnData[]>(() => [
     {
       title: '序号',
@@ -163,7 +188,7 @@
     },
   ]);
 
-  // 查询列表
+  // 分页查询列表
   const fetchData = async (
     params: OperationLogParams = { page: 1, size: 10, sort: ['createTime,desc'] }
   ) => {
@@ -177,25 +202,11 @@
       setLoading(false);
     }
   };
-
+  const handlePageChange = (current: number) => {
-  const onPageChange = (current: number) => {
     fetchData({ page: current, size: pagination.pageSize, sort: ['createTime,desc'] });
   };
-
+  const handlePageSizeChange = (pageSize: number) => {
-  // 查询
+    fetchData({ page: pagination.current, size: pageSize, sort: ['createTime,desc'] });
-  const toQuery = () => {
-    fetchData({
-      page: pagination.current,
-      size: pagination.pageSize,
-      sort: ['createTime,desc'],
-      ...queryFormData.value,
-    } as unknown as OperationLogParams);
-  };
-
-  // 重置
-  const resetQuery = async () => {
-    await queryFormRef.value?.resetFields();
-    await fetchData();
   };
   fetchData();
 </script>

continew-admin-ui/src/views/monitor/log/system/index.vue

@@ -27,15 +27,16 @@
 
       <!-- 表格 -->
       <a-table
-        row-key="logId"
-        :loading="loading"
-        :pagination="pagination"
         :columns="columns"
         :data="renderData"
+        :pagination="paginationProps"
+        row-key="logId"
         :bordered="false"
         :stripe="true"
+        :loading="loading"
         size="large"
-        @page-change="onPageChange"
+        @page-change="handlePageChange"
+        @page-size-change="handlePageSizeChange"
       >
         <template #index="{ rowIndex }">
           {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
@@ -233,6 +234,7 @@
     SystemLogParams,
   } from '@/api/monitor/log';
   import { Pagination } from '@/types/global';
+  import { PaginationProps } from '@arco-design/web-vue';
   import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
   import { FormInstance } from '@arco-design/web-vue/es/form';
   import VueJsonPretty from 'vue-json-pretty';
@@ -244,6 +246,24 @@
   const detailLoading = ref(false);
   const exceptionDetail = ref();
   const queryFormRef = ref<FormInstance>();
+  const queryFormData = ref({
+    createTime: [],
+  });
+  // 查询
+  const toQuery = () => {
+    fetchData({
+      page: pagination.current,
+      size: pagination.pageSize,
+      sort: ['createTime,desc'],
+      ...queryFormData.value,
+    } as unknown as SystemLogParams);
+  };
+  // 重置
+  const resetQuery = async () => {
+    await queryFormRef.value?.resetFields();
+    await fetchData();
+  };
+
   const renderData = ref<SystemLogRecord[]>([]);
   const renderDetailData = ref<SystemLogDetailRecord>({
     logId: '',
@@ -260,11 +280,6 @@
     browser: '',
     createTime: '',
   });
-
-  const queryFormData = ref({
-    createTime: [],
-  });
-
   const basePagination: Pagination = {
     current: 1,
     pageSize: 10,
@@ -272,6 +287,14 @@
   const pagination = reactive({
     ...basePagination,
   });
+  const paginationProps = computed((): PaginationProps => {
+    return {
+      showTotal: true,
+      showPageSize: true,
+      total: pagination.total,
+      current: pagination.current,
+    }
+  });
   const columns = computed<TableColumnData[]>(() => [
     {
       title: '序号',
@@ -323,7 +346,7 @@
     },
   ]);
 
-  // 查询列表
+  // 分页查询列表
   const fetchData = async (
     params: SystemLogParams = { page: 1, size: 10, sort: ['createTime,desc'] }
   ) => {
@@ -337,26 +360,13 @@
       setLoading(false);
     }
   };
-
+  const handlePageChange = (current: number) => {
-  const onPageChange = (current: number) => {
     fetchData({ page: current, size: pagination.pageSize, sort: ['createTime,desc'] });
   };
-
+  const handlePageSizeChange = (pageSize: number) => {
-  // 查询
+    fetchData({ page: pagination.current, size: pageSize, sort: ['createTime,desc'] });
-  const toQuery = () => {
-    fetchData({
-      page: pagination.current,
-      size: pagination.pageSize,
-      sort: ['createTime,desc'],
-      ...queryFormData.value,
-    } as unknown as SystemLogParams);
-  };
-
-  // 重置
-  const resetQuery = async () => {
-    await queryFormRef.value?.resetFields();
-    await fetchData();
   };
+  fetchData();
 
   // 查看详情
   const handleClick = async (logId: string) => {
@@ -375,14 +385,12 @@
   const handleCancel = () => {
     visible.value = false;
   }
-  fetchData();
 
   // 查看异常详情
   const handleExceptionDetail = async (record: SystemLogRecord) => {
     exceptionDetailVisible.value = true;
     exceptionDetail.value = record.exceptionDetail;
   };
-
   const handleExceptionDetailOk = () => {
     exceptionDetailVisible.value = false;
     exceptionDetail.value = null;

continew-admin-ui/src/views/system/user/center/components/operation-log.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="container">
     <a-table
-      row-key="logId"
-      :loading="loading"
-      :pagination="pagination"
       :columns="columns"
       :data="renderData"
+      :pagination="paginationProps"
+      row-key="logId"
       :bordered="false"
       :stripe="true"
+      :loading="loading"
       size="large"
-      @page-change="onPageChange"
+      @page-change="handlePageChange"
+      @page-size-change="handlePageSizeChange"
     >
       <template #index="{ rowIndex }">
         {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
@@ -32,7 +33,7 @@
       </template>
       <template #pagination-left>
         <a-tooltip content="刷新">
-          <div class="action-icon" @click="onRefresh">
+          <div class="action-icon" @click="handleRefresh">
             <icon-refresh size="18" />
           </div>
         </a-tooltip>
@@ -43,16 +44,16 @@
 
 <script lang="ts" setup>
   import { computed, ref, reactive } from 'vue';
-  import { useLoginStore } from '@/store';
   import useLoading from '@/hooks/loading';
+  import { useLoginStore } from '@/store';
   import { queryOperationLogList, OperationLogRecord, OperationLogParams } from '@/api/monitor/log';
   import { Pagination } from '@/types/global';
   import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import { PaginationProps } from "@arco-design/web-vue";
 
   const { loading, setLoading } = useLoading(true);
   const loginStore = useLoginStore();
   const renderData = ref<OperationLogRecord[]>([]);
-
   const basePagination: Pagination = {
     current: 1,
     pageSize: 10,
@@ -60,6 +61,14 @@
   const pagination = reactive({
     ...basePagination,
   });
+  const paginationProps = computed((): PaginationProps => {
+    return {
+      showTotal: true,
+      showPageSize: true,
+      total: pagination.total,
+      current: pagination.current,
+    }
+  });
   const columns = computed<TableColumnData[]>(() => [
     {
       title: '序号',
@@ -93,6 +102,8 @@
       dataIndex: 'browser',
     },
   ]);
+
+  // 分页查询列表
   const fetchData = async (
     params: OperationLogParams = { uid: loginStore.userId, page: 1, size: 10, sort: ['createTime,desc'] }
   ) => {
@@ -102,18 +113,17 @@
       renderData.value = data.list;
       pagination.current = params.page;
       pagination.total = data.total;
-    } catch (err) {
-      // you can report use errorHandler or other
     } finally {
       setLoading(false);
     }
   };
-
+  const handlePageChange = (current: number) => {
-  const onPageChange = (current: number) => {
     fetchData({ uid: loginStore.userId, page: current, size: pagination.pageSize, sort: ['createTime,desc'] });
   };
-
+  const handlePageSizeChange = (pageSize: number) => {
-  const onRefresh = () => {
+    fetchData({ uid: loginStore.userId, page: pagination.current, size: pageSize, sort: ['createTime,desc'] });
+  };
+  const handleRefresh = () => {
     fetchData({
       uid: loginStore.userId,
       page: pagination.current,
@@ -121,7 +131,6 @@
       sort: ['createTime,desc'],
     } as unknown as OperationLogParams);
   };
-
   fetchData();
 </script>
 
@@ -138,6 +147,7 @@
   }
   .action-icon {
     cursor: pointer;
+    margin-right: 10px;
   }
 
   .action-icon:hover {