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

2023-01-20 19:18:12 +08:00 · 2023-01-20 19:18:12 +08:00 · c282a36b08
commit c282a36b08
parent 8cf15fd4a8
4 changed files with 131 additions and 91 deletions
--- a/continew-admin-ui/src/views/monitor/log/login/index.vue
+++ b/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 onPageChange = (current: number) => {
+  const handlePageChange = (current: number) => {
    fetchData({ page: current, size: pagination.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();
+  const handlePageSizeChange = (pageSize: number) => {
+    fetchData({ page: pagination.current, size: pageSize, sort: ['createTime,desc'] });
  };
  fetchData();
 </script>
--- a/continew-admin-ui/src/views/monitor/log/operation/index.vue
+++ b/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 onPageChange = (current: number) => {
+  const handlePageChange = (current: number) => {
    fetchData({ page: current, size: pagination.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();
+  const handlePageSizeChange = (pageSize: number) => {
+    fetchData({ page: pagination.current, size: pageSize, sort: ['createTime,desc'] });
  };
  fetchData();
 </script>
--- a/continew-admin-ui/src/views/monitor/log/system/index.vue
+++ b/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 onPageChange = (current: number) => {
+  const handlePageChange = (current: number) => {
    fetchData({ page: current, size: pagination.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();
+  const handlePageSizeChange = (pageSize: number) => {
+    fetchData({ page: pagination.current, size: pageSize, sort: ['createTime,desc'] });
  };
+  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;
--- a/continew-admin-ui/src/views/system/user/center/components/operation-log.vue
+++ b/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 onPageChange = (current: number) => {
+  const handlePageChange = (current: number) => {
    fetchData({ uid: loginStore.userId, page: current, size: pagination.pageSize, sort: ['createTime,desc'] });
  };
-
-  const onRefresh = () => {
+  const handlePageSizeChange = (pageSize: number) => {
+    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 {