fix: 重构通知列表 简化写法

src/api/system.ts

@@ -19,7 +19,7 @@ type ResultDept = {
   data?: Array<any>;
 };
 
-interface SystemNoticeQuery extends BasePageQuery {
+export interface SystemNoticeQuery extends BasePageQuery {
   noticeType: string;
   noticeTitle: string;
   creatorName: string;

src/utils/common.ts

@@ -0,0 +1,55 @@
+import { PaginationProps } from "@pureadmin/table";
+import { Sort } from "element-plus";
+
+export class CommonUtils {
+  static getBeginTimeSafely(timeRange: string[]): string {
+    if (timeRange == null) {
+      return undefined;
+    }
+
+    if (timeRange.length <= 0) {
+      return undefined;
+    }
+
+    if (timeRange[0] == null) {
+      return undefined;
+    }
+
+    return timeRange[0];
+  }
+
+  static getEndTimeSafely(timeRange: string[]): string {
+    if (timeRange == null) {
+      return undefined;
+    }
+
+    if (timeRange.length <= 1) {
+      return undefined;
+    }
+
+    if (timeRange[1] == null) {
+      return undefined;
+    }
+
+    return timeRange[1];
+  }
+
+  static fillPaginationParams(
+    baseQuery: BasePageQuery,
+    pagination: PaginationProps
+  ) {
+    baseQuery.pageNum = pagination.currentPage;
+    baseQuery.pageSize = pagination.pageSize;
+  }
+
+  static fillSortParams(baseQuery: BasePageQuery, sort: Sort) {
+    if (sort == null) {
+      return;
+    }
+    baseQuery.orderColumn = sort.prop;
+    baseQuery.orderDirection = sort.order;
+  }
+
+  // 私有构造函数，防止类被实例化
+  private constructor() {}
+}

src/views/system/notice/index.vue

@@ -13,7 +13,7 @@ import Refresh from "@iconify-icons/ep/refresh";
 import AddFill from "@iconify-icons/ri/add-circle-line";
 import { useUserStoreHook } from "@/store/modules/user";
 
-/** 组件name最好和菜单表中的router_name一致 */
+/** !!!重要!!! 组件name最好和菜单表中的router_name一致, copy的时候记得更改这个名字*/
 defineOptions({
   name: "SystemNotice"
 });
@@ -30,15 +30,13 @@ const {
   dataList,
   pagination,
   defaultSort,
+  multipleSelection,
   onSearch,
   resetForm,
   openDialog,
   handleDelete,
-  handleSizeChange,
+  handleBulkDelete,
-  handleCurrentChange,
+  getNoticeList
-  handleSortChange,
-  handleSelectionChange,
-  handleBulkDelete
 } = useNoticeHook();
 </script>
 
@@ -121,6 +119,7 @@ const {
         </el-button>
       </template>
       <template v-slot="{ size, dynamicColumns }">
+        <!-- TODO sort-change 有其他好的处理方式吗？ -->
         <pure-table
           border
           ref="tableRef"
@@ -139,10 +138,12 @@ const {
             background: 'var(--el-table-row-hover-bg-color)',
             color: 'var(--el-text-color-primary)'
           }"
-          @page-size-change="handleSizeChange"
+          @page-size-change="getNoticeList"
-          @page-current-change="handleCurrentChange"
+          @page-current-change="getNoticeList"
-          @sort-change="handleSortChange"
+          @sort-change="getNoticeList"
-          @selection-change="handleSelectionChange"
+          @selection-change="
+            rows => (multipleSelection = rows.map(item => item.noticeId))
+          "
         >
           <template #operation="{ row }">
             <el-button

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

@@ -1,9 +1,9 @@
 import dayjs from "dayjs";
 import editForm from "../form.vue";
 import { message } from "@/utils/message";
-import { getSystemNoticeListApi } from "@/api/system";
+import { SystemNoticeQuery, getSystemNoticeListApi } from "@/api/system";
 import { addDialog } from "@/components/ReDialog";
-import { ElMessageBox } from "element-plus";
+import { ElMessageBox, Sort } from "element-plus";
 import { AddNoticeRequest } from "../utils/types";
 import { type PaginationProps } from "@pureadmin/table";
 import {
@@ -12,39 +12,46 @@ import {
   deleteSystemNoticeApi,
   SystemNoticeRequest
 } from "@/api/system";
-import { reactive, ref, onMounted, h, toRaw, watchEffect } from "vue";
+import { reactive, ref, onMounted, h, toRaw } from "vue";
 import { useUserStoreHook } from "@/store/modules/user";
+import { CommonUtils } from "@/utils/common";
 
 const noticeTypeMap = useUserStoreHook().dictionaryMap["sysNotice.noticeType"];
 const noticeStatusMap = useUserStoreHook().dictionaryMap["sysNotice.status"];
 
 export function useNoticeHook() {
-  const defaultSort = {
+  const defaultSort: Sort = {
     prop: "createTime",
     order: "descending"
   };
 
-  const pagination = reactive<PaginationProps>({
+  const pagination: PaginationProps = {
     total: 0,
     pageSize: 10,
     currentPage: 1,
     background: true
-  });
+  };
 
-  const searchFormParams = reactive({
+  const searchFormParams = reactive<SystemNoticeQuery>({
-    noticeTitle: "",
+    noticeTitle: undefined,
-    noticeType: "",
+    noticeType: undefined,
-    creatorName: "",
+    creatorName: undefined,
-    pageNum: pagination.currentPage,
-    pageSize: pagination.pageSize,
     orderColumn: defaultSort.prop,
     orderDirection: defaultSort.order
   });
 
-  watchEffect(() => {
+  // TODO  ******困惑的问题*******
-    searchFormParams.pageNum = pagination.currentPage;
+  // const pagination = reactive<PaginationProps>({
-    searchFormParams.pageSize = pagination.pageSize;
+  //   total: 0,
-  });
+  //   pageSize: 10,
+  //   currentPage: 1,
+  //   background: true
+  // });
+  // TODO 使用watchEffect会导致 axios请求拦截器中的参数使用的是旧值
+  // watchEffect(() => {
+  //   searchFormParams.pageNum = pagination.currentPage;
+  //   searchFormParams.pageSize = pagination.pageSize;
+  // });
 
   const formRef = ref();
   const dataList = ref([]);
@@ -120,9 +127,10 @@ export function useNoticeHook() {
     }
   ];
 
-  async function onSearch() {
+  function onSearch() {
     // 点击搜索的时候 需要重置分页
     pagination.currentPage = 1;
+
     getNoticeList();
   }
 
@@ -131,14 +139,19 @@ export function useNoticeHook() {
     // 清空查询参数
     formEl.resetFields();
     // 清空排序
-    searchFormParams.orderColumn = "";
+    searchFormParams.orderColumn = undefined;
-    searchFormParams.orderDirection = "";
+    searchFormParams.orderDirection = undefined;
     tableRef.getTableRef().clearSort();
     // 重置分页并查询
     onSearch();
   }
 
-  async function getNoticeList() {
+  async function getNoticeList(sort: Sort = defaultSort) {
+    if (sort != null) {
+      CommonUtils.fillSortParams(searchFormParams, sort);
+    }
+    CommonUtils.fillPaginationParams(searchFormParams, pagination);
+
     pageLoading.value = true;
     const { data } = await getSystemNoticeListApi(toRaw(searchFormParams));
 
@@ -158,10 +171,6 @@ export function useNoticeHook() {
     });
   }
 
-  function handleSelectionChange(rows) {
-    multipleSelection.value = rows.map(item => item.noticeId);
-  }
-
   async function handleBulkDelete(tableRef) {
     if (multipleSelection.value.length === 0) {
       message("请选择需要删除的数据", { type: "warning" });
@@ -197,19 +206,6 @@ export function useNoticeHook() {
       });
   }
 
-  /**
-   * 处理排序
-   * @param sort 排序参数
-   */
-  function handleSortChange(sort) {
-    // 排序参数改变建议把分页重置为第一页
-    pagination.currentPage = 1;
-    // 填充分页参数
-    searchFormParams.orderColumn = sort.prop;
-    searchFormParams.orderDirection = sort.order;
-    getNoticeList();
-  }
-
   async function handleAdd(row, done) {
     await addSystemNoticeApi(row as SystemNoticeRequest).then(() => {
       message(`您新增了通知标题为${row.noticeTitle}的这条数据`, {
@@ -234,17 +230,6 @@ export function useNoticeHook() {
     });
   }
 
-  function handleSizeChange(val: number) {
-    pagination.currentPage = 1;
-    pagination.pageSize = val;
-    getNoticeList();
-  }
-
-  function handleCurrentChange(val: number) {
-    pagination.currentPage = val;
-    getNoticeList();
-  }
-
   function openDialog(title = "新增", row?: AddNoticeRequest) {
     addDialog({
       title: `${title}公告`,
@@ -293,14 +278,12 @@ export function useNoticeHook() {
     dataList,
     pagination,
     defaultSort,
+    multipleSelection,
+    getNoticeList,
     onSearch,
     resetForm,
     openDialog,
     handleDelete,
-    handleSizeChange,
-    handleCurrentChange,
-    handleSortChange,
-    handleSelectionChange,
     handleBulkDelete
   };
 }

types/index.d.ts

@@ -61,8 +61,13 @@ type PageDTO<T> = {
 };
 
 interface BasePageQuery {
-  pageNumber?: number;
+  pageNum?: number;
   pageSize?: number;
+  beginTime?: string;
+  endTime?: string;
+  orderColumn?: string;
+  orderDirection?: string;
+  timeRangeColumn?: string;
 }
 
 type Effect = "light" | "dark";