修改定时任务分页数据

back/api/cron.ts

@@ -9,17 +9,28 @@ const route = Router();
 export default (app: Router) => {
   app.use('/crons', route);
 
-  route.get('/', async (req: Request, res: Response, next: NextFunction) => {
-    const logger: Logger = Container.get('logger');
-    try {
-      const cronService = Container.get(CronService);
-      const data = await cronService.crontabs(req.query.searchValue as string);
-      return res.send({ code: 200, data });
-    } catch (e) {
-      logger.error('🔥 error: %o', e);
-      return next(e);
-    }
-  });
+  route.get(
+    '/',
+    celebrate({
+      query: Joi.object({
+        searchText: Joi.string().required().allow(''),
+        page: Joi.string().required(),
+        size: Joi.string().required(),
+        t: Joi.string().required(),
+      }),
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const cronService = Container.get(CronService);
+        const data = await cronService.crontabs(req.query as any);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        logger.error('🔥 error: %o', e);
+        return next(e);
+      }
+    },
+  );
 
   route.post(
     '/',

back/services/cron.ts

@@ -113,7 +113,15 @@ export default class CronService {
     }
   }
 
-  public async crontabs(searchText?: string): Promise<Crontab[]> {
+  public async crontabs(params?: {
+    searchText: string;
+    page: string;
+    size: string;
+  }): Promise<{ data: Crontab[]; total: number }> {
+    const searchText = params?.searchText;
+    const page = Number(params?.page || '0');
+    const size = Number(params?.size || '0');
+
     let query = {};
     if (searchText) {
       const textArray = searchText.split(':');
@@ -158,12 +166,18 @@ export default class CronService {
           break;
       }
     }
+    let condition: any = {
+      where: query,
+      order: [['createdAt', 'DESC']],
+    };
+    if (page && size) {
+      condition.offset = (page - 1) * size;
+      condition.limit = size;
+    }
     try {
-      const result = await CrontabModel.findAll({
-        where: query,
-        order: [['createdAt', 'DESC']],
-      });
-      return result as any;
+      const result = await CrontabModel.findAll(condition);
+      const count = await CrontabModel.count();
+      return { data: result, total: count };
     } catch (error) {
       throw error;
     }
@@ -441,7 +455,7 @@ export default class CronService {
   private async set_crontab(needReloadSchedule: boolean = false) {
     const tabs = await this.crontabs();
     var crontab_string = '';
-    tabs.forEach((tab) => {
+    tabs.data.forEach((tab) => {
       const _schedule = tab.schedule && tab.schedule.split(/ +/);
       if (tab.isDisabled === 1 || _schedule!.length !== 5) {
         crontab_string += '# ';

src/pages/crontab/index.tsx

@@ -346,12 +346,14 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const [logCron, setLogCron] = useState<any>();
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(20);
+  const [pageConf, setPageConf] = useState<{ page: number; size: number }>(
+    {} as any,
+  );
   const [tableScrollHeight, setTableScrollHeight] = useState<number>();
   const [isDetailModalVisible, setIsDetailModalVisible] = useState(false);
   const [detailCron, setDetailCron] = useState<any>();
   const [searchValue, setSearchValue] = useState('');
+  const [total, setTotal] = useState<number>();
 
   const goToScriptManager = (record: any) => {
     const cmd = record.command.split(' ') as string[];
@@ -374,10 +376,13 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
   const getCrons = () => {
     setLoading(true);
     request
-      .get(`${config.apiPrefix}crons?searchValue=${searchText}`)
-      .then((data: any) => {
+      .get(
+        `${config.apiPrefix}crons?searchText=${searchText}&page=${pageConf.page}&size=${pageConf.size}`,
+      )
+      .then((_data: any) => {
+        const { data, total } = _data.data;
         setValue(
-          data.data
+          data
             .sort((a: any, b: any) => {
               const sortA =
                 a.isPinned && a.status !== 0
@@ -403,7 +408,7 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
               };
             }),
         );
-        setCurrentPage(1);
+        setTotal(total);
       })
       .finally(() => setLoading(false));
   };
@@ -797,9 +802,8 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
   };
 
   const onPageChange = (page: number, pageSize: number | undefined) => {
-    setCurrentPage(page);
-    setPageSize(pageSize as number);
-    localStorage.setItem('pageSize', pageSize + '');
+    setPageConf({ page, size: pageSize as number });
+    localStorage.setItem('pageSize', String(pageSize));
   };
 
   const getRowClassName = (record: any, index: number) => {
@@ -814,11 +818,20 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
   }, [logCron]);
 
   useEffect(() => {
-    getCrons();
+    setPageConf({ ...pageConf, page: 1 });
   }, [searchText]);
 
   useEffect(() => {
-    setPageSize(parseInt(localStorage.getItem('pageSize') || '20'));
+    if (pageConf.page && pageConf.size) {
+      getCrons();
+    }
+  }, [pageConf]);
+
+  useEffect(() => {
+    setPageConf({
+      page: 1,
+      size: parseInt(localStorage.getItem('pageSize') || '2'),
+    });
     setTimeout(() => {
       setTableScrollHeight(getTableScroll());
     });
@@ -906,12 +919,12 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
       <Table
         columns={columns}
         pagination={{
-          current: currentPage,
+          current: pageConf.page,
           onChange: onPageChange,
-          pageSize: pageSize,
+          pageSize: pageConf.size,
           showSizeChanger: true,
           simple: isPhone,
-          defaultPageSize: 20,
+          total,
           showTotal: (total: number, range: number[]) =>
             `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`,
           pageSizeOptions: [20, 100, 500, 1000] as any,