fix: 重构通知公告页面，修复点击查询重置分页的问题

src/api/system.ts

@@ -62,7 +62,7 @@ export const getDeptList = (data?: object) => {
 export const getSystemNoticeListApi = (params?: SystemNoticeQuery) => {
   return http.request<ResponseData<PageDTO<SystemNoticeDTO>>>(
     "get",
-    "/system/notice/list",
+    "/system/notices",
     {
       params
     }
@@ -71,21 +71,63 @@ export const getSystemNoticeListApi = (params?: SystemNoticeQuery) => {
 
 /** 添加系统通知 */
 export const addSystemNoticeApi = (data: SystemNoticeRequest) => {
-  return http.request<ResponseData<any>>("post", "/system/notice/", {
+  return http.request<ResponseData<void>>("post", "/system/notices", {
     data
   });
 };
 
 /** 修改系统通知 */
 export const updateSystemNoticeApi = (data: SystemNoticeRequest) => {
-  return http.request<ResponseData<any>>("put", "/system/notice/", {
+  return http.request<ResponseData<void>>(
-    data
+    "put",
-  });
+    `/system/notices/${data.noticeId}`,
+    {
+      data
+    }
+  );
 };
 
 /** 删除系统通知 */
 export const deleteSystemNoticeApi = (data: Array<number>) => {
-  return http.request<ResponseData<any>>("delete", `/system/notice/${data}`, {
+  return http.request<ResponseData<void>>("delete", "/system/notices", {
-    data
+    params: {
+      // 需要将数组转换为字符串  否则Axios会将参数变成 noticeIds[0]:1  noticeIds[1]:2 这种格式，后端接收参数不成功
+      noticeIds: data.toString()
+    }
   });
 };
+
+type OperationLogDTO = {
+  operationId: number;
+  businessType: number;
+  businessTypeStr: string;
+  requestMethod: string;
+  requestModule: string;
+  requestUrl: string;
+  calledMethod: string;
+  operatorType: number;
+  operatorTypeStr: string;
+  userId: number;
+  username: string;
+  operatorIp: string;
+  operatorLocation: string;
+  deptId: number;
+  deptName: string;
+  operationParam: string;
+  operationResult: string;
+  status: number;
+  statusStr: string;
+  errorStack: string;
+  operationTime: Date;
+};
+
+/** 获取操作日志列表 */
+export const getOperationLogListApi = (params?: SystemNoticeQuery) => {
+  return http.request<ResponseData<PageDTO<OperationLogDTO>>>(
+    "get",
+    "/operationLog/list",
+    {
+      params
+    }
+  );
+};

src/views/system/notice/index.vue

@@ -29,6 +29,7 @@ const {
   columns,
   dataList,
   pagination,
+  defaultSort,
   onSearch,
   resetForm,
   openDialog,
@@ -131,7 +132,7 @@ const {
           adaptive
           :data="dataList"
           :columns="dynamicColumns"
-          :default-sort="{ prop: 'createTime', order: 'descending' }"
+          :default-sort="defaultSort"
           :pagination="pagination"
           :paginationSmall="size === 'small' ? true : false"
           :header-cell-style="{

src/views/system/notice/utils/hook.tsx

@@ -12,13 +12,18 @@ import {
   deleteSystemNoticeApi,
   SystemNoticeRequest
 } from "@/api/system";
-import { reactive, ref, onMounted, h, toRaw } from "vue";
+import { reactive, ref, onMounted, h, toRaw, watchEffect } from "vue";
 import { useUserStoreHook } from "@/store/modules/user";
 
 const noticeTypeMap = useUserStoreHook().dictionaryMap["sysNotice.noticeType"];
 const noticeStatusMap = useUserStoreHook().dictionaryMap["sysNotice.status"];
 
 export function useNoticeHook() {
+  const defaultSort = {
+    prop: "createTime",
+    order: "descending"
+  };
+
   const pagination = reactive<PaginationProps>({
     total: 0,
     pageSize: 10,
@@ -32,9 +37,15 @@ export function useNoticeHook() {
     creatorName: "",
     pageNum: pagination.currentPage,
     pageSize: pagination.pageSize,
-    orderColumn: "createTime",
+    orderColumn: defaultSort.prop,
-    orderDirection: "descending"
+    orderDirection: defaultSort.order
   });
+
+  watchEffect(() => {
+    searchFormParams.pageNum = pagination.currentPage;
+    searchFormParams.pageSize = pagination.pageSize;
+  });
+
   const formRef = ref();
   const dataList = ref([]);
   const pageLoading = ref(true);
@@ -109,14 +120,48 @@ export function useNoticeHook() {
     }
   ];
 
+  async function onSearch() {
+    // 点击搜索的时候 需要重置分页
+    pagination.currentPage = 1;
+    getNoticeList();
+  }
+
+  function resetForm(formEl, tableRef) {
+    if (!formEl) return;
+    // 清空查询参数
+    formEl.resetFields();
+    // 清空排序
+    searchFormParams.orderColumn = "";
+    searchFormParams.orderDirection = "";
+    tableRef.getTableRef().clearSort();
+    // 重置分页并查询
+    onSearch();
+  }
+
+  async function getNoticeList() {
+    pageLoading.value = true;
+    const { data } = await getSystemNoticeListApi(toRaw(searchFormParams));
+
+    dataList.value = data.rows;
+    pagination.total = data.total;
+
+    setTimeout(() => {
+      pageLoading.value = false;
+    }, 500);
+  }
+
   async function handleDelete(row) {
     await deleteSystemNoticeApi([row.noticeId]).then(() => {
       message(`您删除了通知标题为${row.name}的这条数据`, { type: "success" });
       // 刷新列表
-      onSearch();
+      getNoticeList();
     });
   }
 
+  function handleSelectionChange(rows) {
+    multipleSelection.value = rows.map(item => item.noticeId);
+  }
+
   async function handleBulkDelete(tableRef) {
     if (multipleSelection.value.length === 0) {
       message("请选择需要删除的数据", { type: "warning" });
@@ -140,26 +185,29 @@ export function useNoticeHook() {
             type: "success"
           });
           // 刷新列表
-          onSearch();
+          getNoticeList();
         });
       })
       .catch(() => {
         message("取消删除", {
           type: "info"
         });
+        // 清空checkbox选择的数据
         tableRef.getTableRef().clearSelection();
       });
   }
 
+  /**
+   * 处理排序
+   * @param sort 排序参数
+   */
   function handleSortChange(sort) {
-    searchFormParams.pageNum = 1;
+    // 排序参数改变建议把分页重置为第一页
+    pagination.currentPage = 1;
+    // 填充分页参数
     searchFormParams.orderColumn = sort.prop;
     searchFormParams.orderDirection = sort.order;
-    onSearch();
+    getNoticeList();
-  }
-
-  function handleSelectionChange(rows) {
-    multipleSelection.value = rows.map(item => item.noticeId);
   }
 
   async function handleAdd(row, done) {
@@ -170,7 +218,7 @@ export function useNoticeHook() {
       // 关闭弹框
       done();
       // 刷新列表
-      onSearch();
+      getNoticeList();
     });
   }
 
@@ -182,46 +230,21 @@ export function useNoticeHook() {
       // 关闭弹框
       done();
       // 刷新列表
-      onSearch();
+      getNoticeList();
     });
   }
 
   function handleSizeChange(val: number) {
     pagination.currentPage = 1;
     pagination.pageSize = val;
-    searchFormParams.pageNum = pagination.currentPage;
+    getNoticeList();
-    searchFormParams.pageSize = pagination.pageSize;
-    onSearch();
   }
 
   function handleCurrentChange(val: number) {
     pagination.currentPage = val;
-    searchFormParams.pageNum = pagination.currentPage;
+    getNoticeList();
-    onSearch();
   }
 
-  async function onSearch() {
-    pageLoading.value = true;
-    const { data } = await getSystemNoticeListApi(toRaw(searchFormParams));
-
-    dataList.value = data.rows;
-    pagination.total = data.total;
-
-    setTimeout(() => {
-      pageLoading.value = false;
-    }, 500);
-  }
-
-  const resetForm = (formEl, tableRef) => {
-    if (!formEl) return;
-    formEl.resetFields();
-    searchFormParams.orderColumn = "";
-    searchFormParams.orderDirection = "";
-
-    tableRef.getTableRef().clearSort();
-    onSearch();
-  };
-
   function openDialog(title = "新增", row?: AddNoticeRequest) {
     addDialog({
       title: `${title}公告`,
@@ -260,7 +283,7 @@ export function useNoticeHook() {
   }
 
   onMounted(() => {
-    onSearch();
+    getNoticeList();
   });
 
   return {
@@ -269,6 +292,7 @@ export function useNoticeHook() {
     columns,
     dataList,
     pagination,
+    defaultSort,
     onSearch,
     resetForm,
     openDialog,