定时任务详情增加额外定时展示

src/pages/crontab/detail.tsx

@@ -33,6 +33,7 @@ import IconFont from '@/components/iconfont';
 import { getCommandScript, getEditorMode } from '@/utils';
 import VirtualList from 'rc-virtual-list';
 import useScrollHeight from '@/hooks/useScrollHeight';
+import dayjs from 'dayjs';
 
 const { Text } = Typography;
 
@@ -52,8 +53,6 @@ interface LogItem {
   filename: string;
 }
 
-const language = navigator.language || navigator.languages[0];
-
 const CronDetailModal = ({
   cron = {},
   handleCancel,
@@ -498,7 +497,12 @@ const CronDetailModal = ({
           </div>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">{intl.get('定时')}</div>
-            <div className="cron-detail-info-value">{currentCron.schedule}</div>
+            <div className="cron-detail-info-value">
+              <div>{currentCron.schedule}</div>
+              {currentCron.extra_schedules?.map((x) => (
+                <div key={x.schedule}>{x.schedule}</div>
+              ))}
+            </div>
           </div>
           <div className="cron-detail-info-item">
             <div className="cron-detail-info-title">
@@ -506,11 +510,9 @@ const CronDetailModal = ({
             </div>
             <div className="cron-detail-info-value">
               {currentCron.last_execution_time
-                ? new Date(currentCron.last_execution_time * 1000)
-                    .toLocaleString(language, {
-                      hour12: false,
-                    })
-                    .replace(' 24:', ' 00:')
+                ? dayjs(currentCron.last_execution_time * 1000).format(
+                    'YYYY-MM-DD HH:mm:ss',
+                  )
                 : '-'}
             </div>
           </div>
@@ -530,11 +532,7 @@ const CronDetailModal = ({
             </div>
             <div className="cron-detail-info-value">
               {currentCron.nextRunTime &&
-                currentCron.nextRunTime
-                  .toLocaleString(language, {
-                    hour12: false,
-                  })
-                  .replace(' 24:', ' 00:')}
+                dayjs(currentCron.nextRunTime).format('YYYY-MM-DD HH:mm:ss')}
             </div>
           </div>
         </Card>

src/pages/crontab/index.less

@@ -35,7 +35,7 @@
     overflow: auto;
 
     .ant-card-body {
-      min-width: 600px;
+      min-width: 1000px;
     }
 
     .cron-detail-info-item {
@@ -58,7 +58,7 @@
     .ant-card-body {
       display: flex;
       justify-content: space-between;
-      min-width: 600px;
+      min-width: 1000px;
     }
   }
 
@@ -78,7 +78,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-right: 32px;
 
     .operations {
       display: flex;

src/pages/crontab/index.tsx

@@ -51,13 +51,14 @@ import ViewManageModal from './viewManageModal';
 import { FilterValue, SorterResult } from 'antd/lib/table/interface';
 import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
-import { getCommandScript, parseCrontab } from '@/utils';
+import { getCommandScript, getCrontabsNextDate, parseCrontab } from '@/utils';
 import { ColumnProps } from 'antd/lib/table';
 import { useVT } from 'virtualizedtableforantd4';
 import { ICrontab, OperationName, OperationPath, CrontabStatus } from './type';
 import Name from '@/components/name';
+import dayjs from 'dayjs';
 
-const { Text, Paragraph } = Typography;
+const { Text, Paragraph, Link } = Typography;
 const { Search } = Input;
 
 const Crontab = () => {
@@ -74,17 +75,18 @@ const Crontab = () => {
           style={{
             wordBreak: 'break-all',
             marginBottom: 0,
+            color: '#1890ff'
           }}
           ellipsis={{ tooltip: text, rows: 2 }}
         >
-          <a
+          <Link
             onClick={() => {
               setDetailCron(record);
               setIsDetailModalVisible(true);
             }}
           >
             {record.name || '-'}
-          </a>
+          </Link>
         </Paragraph>
       ),
       sorter: {
@@ -183,17 +185,29 @@ const Crontab = () => {
         compare: (a, b) => a.schedule.localeCompare(b.schedule),
       },
       render: (text, record) => {
-        return record.extra_schedules?.length ? (
-          <Popover
-            placement="right"
-            content={record.extra_schedules?.map((x) => (
-              <div>{x.schedule}</div>
-            ))}
+        return (
+          <Paragraph
+            style={{
+              wordBreak: 'break-all',
+              marginBottom: 0,
+            }}
+            ellipsis={{
+              tooltip: {
+                placement: 'right',
+                title: (
+                  <>
+                    <div>{text}</div>
+                    {record.extra_schedules?.map((x) => (
+                      <div key={x.schedule}>{x.schedule}</div>
+                    ))}
+                  </>
+                ),
+              },
+              rows: 2,
+            }}
           >
             {text}
-          </Popover>
-        ) : (
-          text
+          </Paragraph>
         );
       },
     },
@@ -224,7 +238,6 @@ const Crontab = () => {
         },
       },
       render: (text, record) => {
-        const language = navigator.language || navigator.languages[0];
         return (
           <span
             style={{
@@ -232,11 +245,9 @@ const Crontab = () => {
             }}
           >
             {record.last_execution_time
-              ? new Date(record.last_execution_time * 1000)
-                  .toLocaleString(language, {
-                    hour12: false,
-                  })
-                  .replace(' 24:', ' 00:')
+              ? dayjs(record.last_execution_time * 1000).format(
+                  'YYYY-MM-DD HH:mm:ss',
+                )
               : '-'}
           </span>
         );
@@ -251,12 +262,7 @@ const Crontab = () => {
         },
       },
       render: (text, record) => {
-        const language = navigator.language || navigator.languages[0];
-        return record.nextRunTime
-          .toLocaleString(language, {
-            hour12: false,
-          })
-          .replace(' 24:', ' 00:');
+        return dayjs(record.nextRunTime).format('YYYY-MM-DD HH:mm:ss');
       },
     },
     {
@@ -389,7 +395,7 @@ const Crontab = () => {
             data.map((x) => {
               return {
                 ...x,
-                nextRunTime: parseCrontab(x.schedule),
+                nextRunTime: getCrontabsNextDate(x.schedule, x.extra_schedules),
               };
             }),
           );
@@ -677,7 +683,10 @@ const Crontab = () => {
         if (code === 200) {
           const index = value.findIndex((x) => x.id === cron.id);
           const result = [...value];
-          data.nextRunTime = parseCrontab(data.schedule);
+          data.nextRunTime = getCrontabsNextDate(
+            data.schedule,
+            data.extra_schedules,
+          );
           if (index !== -1) {
             result.splice(index, 1, {
               ...cron,