定时任务增加关联订阅

src/pages/crontab/index.tsx

@@ -56,6 +56,7 @@ import { getCommandScript, 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';
 
 const { Text, Paragraph } = Typography;
 const { Search } = Input;
@@ -67,6 +68,7 @@ const Crontab = () => {
       title: intl.get('名称'),
       dataIndex: 'name',
       key: 'name',
+      fixed: isPhone ? undefined : 'left',
       width: 120,
       render: (text: string, record: any) => (
         <>
@@ -122,7 +124,7 @@ const Crontab = () => {
       title: intl.get('命令/脚本'),
       dataIndex: 'command',
       key: 'command',
-      width: 240,
+      width: 200,
       render: (text, record) => {
         return (
           <Paragraph
@@ -146,82 +148,11 @@ const Crontab = () => {
         compare: (a: any, b: any) => a.command.localeCompare(b.command),
       },
     },
-    {
-      title: intl.get('定时规则'),
-      dataIndex: 'schedule',
-      key: 'schedule',
-      width: 140,
-      sorter: {
-        compare: (a, b) => a.schedule.localeCompare(b.schedule),
-      },
-    },
-    {
-      title: intl.get('最后运行时长'),
-      width: 150,
-      dataIndex: 'last_running_time',
-      key: 'last_running_time',
-      sorter: {
-        compare: (a: any, b: any) => {
-          return a.last_running_time - b.last_running_time;
-        },
-      },
-      render: (text, record) => {
-        return record.last_running_time
-          ? diffTime(record.last_running_time)
-          : '-';
-      },
-    },
-    {
-      title: intl.get('最后运行时间'),
-      dataIndex: 'last_execution_time',
-      key: 'last_execution_time',
-      width: 120,
-      sorter: {
-        compare: (a, b) => {
-          return (a.last_execution_time || 0) - (b.last_execution_time || 0);
-        },
-      },
-      render: (text, record) => {
-        const language = navigator.language || navigator.languages[0];
-        return (
-          <span
-            style={{
-              display: 'block',
-            }}
-          >
-            {record.last_execution_time
-              ? new Date(record.last_execution_time * 1000)
-                  .toLocaleString(language, {
-                    hour12: false,
-                  })
-                  .replace(' 24:', ' 00:')
-              : '-'}
-          </span>
-        );
-      },
-    },
-    {
-      title: intl.get('下次运行时间'),
-      width: 120,
-      sorter: {
-        compare: (a: any, b: any) => {
-          return a.nextRunTime - b.nextRunTime;
-        },
-      },
-      render: (text, record) => {
-        const language = navigator.language || navigator.languages[0];
-        return record.nextRunTime
-          .toLocaleString(language, {
-            hour12: false,
-          })
-          .replace(' 24:', ' 00:');
-      },
-    },
     {
       title: intl.get('状态'),
       key: 'status',
       dataIndex: 'status',
-      width: 88,
+      width: 100,
       filters: [
         {
           text: intl.get('运行中'),
@@ -272,10 +203,97 @@ const Crontab = () => {
         </>
       ),
     },
+    {
+      title: intl.get('定时规则'),
+      dataIndex: 'schedule',
+      key: 'schedule',
+      width: 150,
+      sorter: {
+        compare: (a, b) => a.schedule.localeCompare(b.schedule),
+      },
+    },
+    {
+      title: intl.get('最后运行时长'),
+      width: 180,
+      dataIndex: 'last_running_time',
+      key: 'last_running_time',
+      sorter: {
+        compare: (a: any, b: any) => {
+          return a.last_running_time - b.last_running_time;
+        },
+      },
+      render: (text, record) => {
+        return record.last_running_time
+          ? diffTime(record.last_running_time)
+          : '-';
+      },
+    },
+    {
+      title: intl.get('最后运行时间'),
+      dataIndex: 'last_execution_time',
+      key: 'last_execution_time',
+      width: 150,
+      sorter: {
+        compare: (a, b) => {
+          return (a.last_execution_time || 0) - (b.last_execution_time || 0);
+        },
+      },
+      render: (text, record) => {
+        const language = navigator.language || navigator.languages[0];
+        return (
+          <span
+            style={{
+              display: 'block',
+            }}
+          >
+            {record.last_execution_time
+              ? new Date(record.last_execution_time * 1000)
+                  .toLocaleString(language, {
+                    hour12: false,
+                  })
+                  .replace(' 24:', ' 00:')
+              : '-'}
+          </span>
+        );
+      },
+    },
+    {
+      title: intl.get('下次运行时间'),
+      width: 150,
+      sorter: {
+        compare: (a: any, b: any) => {
+          return a.nextRunTime - b.nextRunTime;
+        },
+      },
+      render: (text, record) => {
+        const language = navigator.language || navigator.languages[0];
+        return record.nextRunTime
+          .toLocaleString(language, {
+            hour12: false,
+          })
+          .replace(' 24:', ' 00:');
+      },
+    },
+    {
+      title: intl.get('关联订阅'),
+      width: 190,
+      render: (text, record: any) =>
+        record.sub_id ? (
+          <Name
+            service={() =>
+              request.get(`${config.apiPrefix}subscriptions/${record.sub_id}`)
+            }
+            options={{ ready: record?.sub_id, cacheKey: record.sub_id }}
+          />
+        ) : (
+          '-'
+        ),
+    },
     {
       title: intl.get('操作'),
       key: 'action',
       width: 130,
+      fixed: isPhone ? undefined : 'right',
       render: (text, record, index) => {
         const isPc = !isPhone;
         return (
@@ -350,6 +368,7 @@ const Crontab = () => {
   const [moreMenuActive, setMoreMenuActive] = useState(false);
   const tableRef = useRef<HTMLDivElement>(null);
   const tableScrollHeight = useTableScrollHeight(tableRef);
+  const [activeKey, setActiveKey] = useState('');
 
   const goToScriptManager = (record: any) => {
     const result = getCommandScript(record.command);
@@ -784,6 +803,9 @@ const Crontab = () => {
     if (pageConf.page && pageConf.size) {
       getCrons();
     }
+    if (viewConf && viewConf.id) {
+      setActiveKey(viewConf.id);
+    }
   }, [pageConf, viewConf]);
 
   useEffect(() => {
@@ -883,11 +905,6 @@ const Crontab = () => {
     setViewConf(view ? view : null);
   };
 
-  const [vt] = useVT(
-    () => ({ scroll: { y: tableScrollHeight } }),
-    [tableScrollHeight],
-  );
-
   return (
     <PageContainer
       className="ql-container-wrapper crontab-wrapper ql-container-wrapper-has-tab"
@@ -914,6 +931,7 @@ const Crontab = () => {
       <Tabs
         defaultActiveKey="all"
         size="small"
+        activeKey={activeKey}
         tabPosition="top"
         className={`crontab-view ${moreMenuActive ? 'more-active' : ''}`}
         tabBarExtraContent={
@@ -1023,7 +1041,6 @@ const Crontab = () => {
           rowSelection={rowSelection}
           rowClassName={getRowClassName}
           onChange={onPageChange}
-          // components={isPhone ? undefined : vt}
         />
       </div>
       <CronLogModal
@@ -1063,9 +1080,6 @@ const Crontab = () => {
         handleCancel={(data) => {
           setIsCreateViewModalVisible(false);
           getCronViews();
-          if (data && data.id === viewConf.id) {
-            setViewConf({ ...viewConf, ...data });
-          }
         }}
       />
       <ViewManageModal
@@ -1076,9 +1090,6 @@ const Crontab = () => {
         }}
         cronViewChange={(data) => {
           getCronViews();
-          if (data && data.id === viewConf.id) {
-            setViewConf({ ...viewConf, ...data });
-          }
         }}
       />
     </PageContainer>

src/pages/crontab/viewCreateModal.tsx

@@ -14,15 +14,16 @@ import { request } from '@/utils/http';
 import config from '@/utils/config';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import IconFont from '@/components/iconfont';
-import get from 'lodash/get';
 import { CrontabStatus } from './type';
+import { useRequest } from 'ahooks';
 
 const PROPERTIES = [
   { name: intl.get('命令'), value: 'command' },
   { name: intl.get('名称'), value: 'name' },
   { name: intl.get('定时规则'), value: 'schedule' },
-  { name: intl.get('状态'), value: 'status' },
+  { name: intl.get('状态'), value: 'status', onlySelect: true },
   { name: intl.get('标签'), value: 'labels' },
+  { name: intl.get('订阅'), value: 'sub_id', onlySelect: true },
 ];
 
 const EOperation: any = {
@@ -47,14 +48,6 @@ const SORTTYPES = [
   { name: intl.get('倒序'), value: 'DESC' },
 ];
 
-const STATUS_MAP = {
-  status: [
-    { name: intl.get('运行中'), value: CrontabStatus.running },
-    { name: intl.get('空闲中'), value: CrontabStatus.idle },
-    { name: intl.get('已禁用'), value: CrontabStatus.disabled },
-  ],
-};
-
 enum ViewFilterRelation {
   'and' = '且',
   'or' = '或',
@@ -73,6 +66,21 @@ const ViewCreateModal = ({
   const [loading, setLoading] = useState(false);
   const [filterRelation, setFilterRelation] = useState<'and' | 'or'>('and');
   const filtersValue = Form.useWatch('filters', form);
+  const { data } = useRequest(
+    () => request.get(`${config.apiPrefix}subscriptions`),
+    {
+      cacheKey: 'subscriptions',
+    },
+  );
+
+  const STATUS_MAP = {
+    status: [
+      { name: intl.get('运行中'), value: CrontabStatus.running },
+      { name: intl.get('空闲中'), value: CrontabStatus.idle },
+      { name: intl.get('已禁用'), value: CrontabStatus.disabled },
+    ],
+    sub_id: data?.data.map((x) => ({ name: x.name, value: x.id })),
+  };
 
   const handleOk = async (values: any) => {
     setLoading(true);
@@ -105,7 +113,7 @@ const ViewCreateModal = ({
   }, [view, visible]);
 
   const operationElement = (
-    <Select style={{ width: 80 }}>
+    <Select style={{ width: 120 }}>
       {OPERATIONS.map((x) => (
         <Select.Option key={x.name} value={x.value}>
           {x.name}
@@ -243,7 +251,7 @@ const ViewCreateModal = ({
                         name={[name, 'property']}
                         rules={[{ required: true }]}
                       >
-                        {propertyElement(PROPERTIES, { width: 90 })}
+                        {propertyElement(PROPERTIES, { width: 120 })}
                       </Form.Item>
                       <Form.Item
                         {...restField}

src/pages/crontab/viewManageModal.tsx

@@ -85,6 +85,7 @@ const ViewManageModal = ({
       title: intl.get('名称'),
       dataIndex: 'name',
       key: 'name',
+      render: (v) => (v === '全部任务' ? intl.get('全部任务') : v)
     },
     {
       title: intl.get('类型'),