更新版本 v2.13.9

.umirc.ts

@@ -14,7 +14,7 @@ export default defineConfig({
   dynamicImport: {
     loading: '@/components/pageLoading',
   },
-  favicon: '/images/g5.ico',
+  favicon: '/images/favicon.svg',
   proxy: {
     '/api/public': {
       target: 'http://127.0.0.1:5400/',

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,23 @@ export default class CronService {
           break;
       }
     }
+    let condition: any = {
+      where: query,
+      order: [
+        ['isPinned', 'DESC'],
+        ['isDisabled', 'ASC'],
+        ['status', 'ASC'],
+        ['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 +460,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.less

@@ -101,3 +101,9 @@
     background: #fafafa;
   }
 }
+
+.crontab-view {
+  .ant-tabs-nav-wrap {
+    flex: unset !important;
+  }
+}

src/pages/crontab/index.tsx

@@ -12,6 +12,7 @@ import {
   Typography,
   Input,
   Popover,
+  Tabs,
 } from 'antd';
 import {
   ClockCircleOutlined,
@@ -122,7 +123,7 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         </>
       ),
       sorter: {
-        compare: (a: any, b: any) => a.name.localeCompare(b.name),
+        compare: (a: any, b: any) => a?.name?.localeCompare(b?.name),
         multiple: 2,
       },
     },
@@ -346,12 +347,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,36 +377,23 @@ 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
-            .sort((a: any, b: any) => {
-              const sortA =
-                a.isPinned && a.status !== 0
-                  ? 5
-                  : a.isDisabled && a.status !== 0
-                  ? 4
-                  : a.status;
-              const sortB =
-                b.isPinned && b.status !== 0
-                  ? 5
-                  : b.isDisabled && b.status !== 0
-                  ? 4
-                  : b.status;
-              return CrontabSort[sortA] - CrontabSort[sortB];
-            })
-            .map((x) => {
-              return {
-                ...x,
-                nextRunTime: cron_parser
-                  .parseExpression(x.schedule)
-                  .next()
-                  .toDate(),
-              };
-            }),
+          data.map((x) => {
+            return {
+              ...x,
+              nextRunTime: cron_parser
+                .parseExpression(x.schedule)
+                .next()
+                .toDate(),
+            };
+          }),
         );
-        setCurrentPage(1);
+        setTotal(total);
       })
       .finally(() => setLoading(false));
   };
@@ -743,11 +733,6 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
   const rowSelection = {
     selectedRowIds,
     onChange: onSelectChange,
-    selections: [
-      Table.SELECTION_ALL,
-      Table.SELECTION_INVERT,
-      Table.SELECTION_NONE,
-    ],
   };
 
   const delCrons = () => {
@@ -797,9 +782,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,39 +798,27 @@ 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') || '20'),
+    });
     setTimeout(() => {
       setTableScrollHeight(getTableScroll());
     });
   }, []);
 
-  return (
-    <PageContainer
-      className="ql-container-wrapper crontab-wrapper"
-      title="定时任务"
-      extra={[
-        <Search
-          placeholder="请输入名称或者关键词"
-          style={{ width: 'auto' }}
-          enterButton
-          allowClear
-          loading={loading}
-          value={searchValue}
-          onChange={(e) => setSearchValue(e.target.value)}
-          onSearch={onSearch}
-        />,
-        <Button key="2" type="primary" onClick={() => addCron()}>
-          新建任务
-        </Button>,
-      ]}
-      header={{
-        style: headerStyle,
-      }}
-    >
+  const panelContent = (
+    <>
       {selectedRowIds.length > 0 && (
         <div style={{ marginBottom: 16 }}>
           <Button type="primary" style={{ marginBottom: 5 }} onClick={delCrons}>
@@ -906,15 +878,17 @@ 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,
+          pageSizeOptions: [10, 20, 50, 100, 200, 500, total || 10000].sort(
+            (a, b) => a - b,
+          ),
         }}
         onRow={(record) => {
           return {
@@ -932,6 +906,42 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         rowSelection={rowSelection}
         rowClassName={getRowClassName}
       />
+    </>
+  );
+
+  return (
+    <PageContainer
+      className="ql-container-wrapper crontab-wrapper"
+      title="定时任务"
+      extra={[
+        <Search
+          placeholder="请输入名称或者关键词"
+          style={{ width: 'auto' }}
+          enterButton
+          allowClear
+          loading={loading}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          onSearch={onSearch}
+        />,
+        <Button key="2" type="primary" onClick={() => addCron()}>
+          新建任务
+        </Button>,
+      ]}
+      header={{
+        style: headerStyle,
+      }}
+    >
+      <Tabs
+        defaultActiveKey="all"
+        size="small"
+        tabPosition="top"
+        className="crontab-view"
+      >
+        <Tabs.TabPane tab="全部任务" key="all">
+          {panelContent}
+        </Tabs.TabPane>
+      </Tabs>
       <CronLogModal
         visible={isLogModalVisible}
         handleCancel={() => {

src/pages/login/index.tsx

@@ -154,6 +154,7 @@ const Login = ({ reloadUser }: any) => {
                   message: '验证码为6位数字',
                 },
               ]}
+              validateTrigger="onBlur"
             >
               <Input
                 placeholder="6位数字"

src/version.ts

@@ -1,5 +1,7 @@
-export const version = '2.13.8';
-export const changeLogLink = 'https://t.me/jiao_long/323';
-export const changeLog = `2.13.8 版本说明
-1. 修改系统token访问逻辑，加快任务启动速度
+export const version = '2.13.9';
+export const changeLogLink = 'https://t.me/jiao_long/324';
+export const changeLog = `2.13.9 版本说明
+1. 修改定时任务分页功能，加快每页数据获取
+2. 定时任务增加每页数据可设置为最大，使任务一页展示（数据获取速度也会变慢）
+3. favicon修改😀😀
 `;