增加任务详情

src/pages/crontab/index.tsx

@@ -33,6 +33,7 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
 import CronModal, { CronLabelModal } from './modal';
 import CronLogModal from './logModal';
+import CronDetailModal from './detail';
 import cron_parser from 'cron-parser';
 import { diffTime } from '@/utils/date';
 import { getTableScroll } from '@/utils/index';
@@ -42,7 +43,7 @@ import './index.less';
 const { Text } = Typography;
 const { Search } = Input;
 
-enum CrontabStatus {
+export enum CrontabStatus {
   'running',
   'idle',
   'disabled',
@@ -84,7 +85,26 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
               goToScriptManager(record);
             }}
           >
-            {record.name || record._id}{' '}
+            <Popover
+              placement="right"
+              trigger={isPhone ? 'click' : 'hover'}
+              content={
+                <div>
+                  {record.labels?.map((label: string, i: number) => (
+                    <Tag
+                      color="blue"
+                      onClick={() => {
+                        onSearch(`label:${label}`);
+                      }}
+                    >
+                      {label}
+                    </Tag>
+                  ))}
+                </div>
+              }
+            >
+              {record.name || '-'}
+            </Popover>
             {record.isPinned ? (
               <span>
                 <PushpinOutlined />
@@ -93,32 +113,6 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
               ''
             )}
           </a>
-          <span>
-            {record.labels?.length > 0 && record.labels[0] !== '' ? (
-              <Popover
-                placement="right"
-                trigger={isPhone ? 'click' : 'hover'}
-                content={
-                  <div>
-                    {record.labels?.map((label: string, i: number) => (
-                      <Tag
-                        color="blue"
-                        onClick={() => {
-                          onSearch(`label:${label}`);
-                        }}
-                      >
-                        {label}
-                      </Tag>
-                    ))}
-                  </div>
-                }
-              >
-                <Tag color="blue">{record.labels[0]}</Tag>
-              </Popover>
-            ) : (
-              ''
-            )}
-          </span>
         </>
       ),
       sorter: {
@@ -316,7 +310,8 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
             {record.status === CrontabStatus.idle && (
               <Tooltip title={isPc ? '运行' : ''}>
                 <a
-                  onClick={() => {
+                  onClick={(e) => {
+                    e.stopPropagation();
                     runCron(record, index);
                   }}
                 >
@@ -327,7 +322,8 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
             {record.status !== CrontabStatus.idle && (
               <Tooltip title={isPc ? '停止' : ''}>
                 <a
-                  onClick={() => {
+                  onClick={(e) => {
+                    e.stopPropagation();
                     stopCron(record, index);
                   }}
                 >
@@ -337,7 +333,8 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
             )}
             <Tooltip title={isPc ? '日志' : ''}>
               <a
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
                   setLogCron({ ...record, timestamp: Date.now() });
                 }}
               >
@@ -354,7 +351,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
   const [value, setValue] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [isLabelModalVisible, setisLabelModalVisible] = useState(false);
+  const [isLabelModalVisible, setIsLabelModalVisible] = useState(false);
   const [editedCron, setEditedCron] = useState();
   const [searchText, setSearchText] = useState('');
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
@@ -363,6 +360,8 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(20);
   const [tableScrollHeight, setTableScrollHeight] = useState<number>();
+  const [isDetailModalVisible, setIsDetailModalVisible] = useState(false);
+  const [detailCron, setDetailCron] = useState<any>();
 
   const goToScriptManager = (record: any) => {
     const cmd = record.command.split(' ') as string[];
@@ -629,7 +628,12 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
       arrow
       trigger={['click']}
       overlay={
-        <Menu onClick={({ key }) => action(key, record, index)}>
+        <Menu
+          onClick={({ key, domEvent }) => {
+            domEvent.stopPropagation();
+            action(key, record, index);
+          }}
+        >
           <Menu.Item key="edit" icon={<EditOutlined />}>
             编辑
           </Menu.Item>
@@ -659,7 +663,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
         </Menu>
       }
     >
-      <a>
+      <a onClick={(e) => e.stopPropagation()}>
         <EllipsisOutlined />
       </a>
     </Dropdown>
@@ -804,7 +808,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
   };
 
   const getRowClassName = (record: any, index: number) => {
-    return record.isPinned ? 'pinned-cron' : '';
+    return record.isPinned ? 'pinned-cron cron' : 'cron';
   };
 
   useEffect(() => {
@@ -890,7 +894,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
           </Button>
           <Button
             type="primary"
-            onClick={() => setisLabelModalVisible(true)}
+            onClick={() => setIsLabelModalVisible(true)}
             style={{ marginLeft: 8, marginRight: 8 }}
           >
             批量修改标签
@@ -912,7 +916,15 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
           defaultPageSize: 20,
           showTotal: (total: number, range: number[]) =>
             `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`,
-          pageSizeOptions: [10, 20, 50, 100, 200, 500, 1000],
+          pageSizeOptions: [20, 100, 500, 1000] as any,
+        }}
+        onRow={(record) => {
+          return {
+            onClick: (event) => {
+              setDetailCron(record);
+              setIsDetailModalVisible(true);
+            },
+          };
         }}
         dataSource={value}
         rowKey="id"
@@ -938,13 +950,20 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
       <CronLabelModal
         visible={isLabelModalVisible}
         handleCancel={(needUpdate?: boolean) => {
-          setisLabelModalVisible(false);
+          setIsLabelModalVisible(false);
           if (needUpdate) {
             getCrons();
           }
         }}
         ids={selectedRowIds}
       />
+      <CronDetailModal
+        visible={isDetailModalVisible}
+        handleCancel={() => {
+          setIsDetailModalVisible(false);
+        }}
+        cron={detailCron}
+      />
     </PageContainer>
   );
 };