定时任务增加分组

src/pages/crontab/index.less

@@ -106,4 +106,23 @@
   .ant-tabs-nav-wrap {
     flex: unset !important;
   }
+
+  .view-more {
+    margin-left: 20px;
+    padding: 8px 0;
+    cursor: pointer;
+
+    .ant-tabs-ink-bar {
+      width: 0;
+    }
+
+    &:hover,
+    &:focus-visible {
+      color: #1890ff;
+
+      .ant-tabs-ink-bar {
+        width: 50px;
+      }
+    }
+  }
 }

src/pages/crontab/index.tsx

@@ -28,6 +28,10 @@ import {
   PauseCircleOutlined,
   FieldTimeOutlined,
   PushpinOutlined,
+  DownOutlined,
+  SettingOutlined,
+  PlusOutlined,
+  UnorderedListOutlined,
 } from '@ant-design/icons';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
@@ -40,6 +44,8 @@ import { diffTime } from '@/utils/date';
 import { getTableScroll } from '@/utils/index';
 import { history } from 'umi';
 import './index.less';
+import ViewCreateModal from './viewCreateModal';
+import ViewManageModal from './viewManageModal';
 
 const { Text, Paragraph } = Typography;
 const { Search } = Input;
@@ -355,6 +361,10 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
   const [detailCron, setDetailCron] = useState<any>();
   const [searchValue, setSearchValue] = useState('');
   const [total, setTotal] = useState<number>();
+  const [isCreateViewModalVisible, setIsCreateViewModalVisible] =
+    useState(false);
+  const [isViewManageModalVisible, setIsViewManageModalVisible] =
+    useState(false);
 
   const goToScriptManager = (record: any) => {
     const cmd = record.command.split(' ') as string[];
@@ -909,6 +919,49 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
     </>
   );
 
+  const viewAction = (key: string) => {
+    switch (key) {
+      case 'new':
+        setIsCreateViewModalVisible(true);
+        break;
+      case 'manage':
+        setIsViewManageModalVisible(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  const menu = (
+    <Menu
+      onClick={({ key, domEvent }) => {
+        domEvent.stopPropagation();
+        viewAction(key);
+      }}
+      items={[
+        {
+          label: 'Clicking me will not close the menu.',
+          key: '1',
+          icon: <UnorderedListOutlined />,
+        },
+        {
+          type: 'divider',
+        },
+        {
+          label: '新建视图',
+          key: 'new',
+          icon: <PlusOutlined />,
+        },
+        {
+          label: '视图管理',
+          key: 'manage',
+          icon: <SettingOutlined />,
+        },
+      ]}
+    />
+  );
+
   return (
     <PageContainer
       className="ql-container-wrapper crontab-wrapper"
@@ -937,6 +990,17 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         size="small"
         tabPosition="top"
         className="crontab-view"
+        tabBarExtraContent={
+          <Dropdown overlay={menu} trigger={['click']}>
+            <div className="view-more">
+              <Space>
+                更多
+                <DownOutlined />
+              </Space>
+              <div className="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+            </div>
+          </Dropdown>
+        }
       >
         <Tabs.TabPane tab="全部任务" key="all">
           {panelContent}
@@ -974,6 +1038,18 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         theme={theme}
         isPhone={isPhone}
       />
+      <ViewCreateModal
+        visible={isCreateViewModalVisible}
+        handleCancel={() => {
+          setIsCreateViewModalVisible(false);
+        }}
+      />
+      <ViewManageModal
+        visible={isViewManageModalVisible}
+        handleCancel={() => {
+          setIsViewManageModalVisible(false);
+        }}
+      />
     </PageContainer>
   );
 };

src/pages/crontab/viewCreateModal.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, message, Input, Form, Statistic, Button } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+
+const ViewCreateModal = ({
+  view,
+  handleCancel,
+  visible,
+}: {
+  view?: any;
+  visible: boolean;
+  handleCancel: (param?: string) => void;
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const handleOk = async (values: any) => {
+    setLoading(true);
+    const { value, name } = values;
+    const method = view ? 'put' : 'post';
+    let payload;
+    if (!view) {
+      payload = [{ value, name }];
+    } else {
+      payload = { ...values, id: view.id };
+    }
+    try {
+      const { code, data } = await request[method](
+        `${config.apiPrefix}crons/views`,
+        {
+          data: payload,
+        },
+      );
+      if (code !== 200) {
+        message.error(data);
+      }
+      setLoading(false);
+      handleCancel(data);
+    } catch (error: any) {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    form.resetFields();
+  }, [view, visible]);
+
+  return (
+    <Modal
+      title={view ? '编辑视图' : '新建视图'}
+      visible={visible}
+      forceRender
+      centered
+      maskClosable={false}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            handleOk(values);
+          })
+          .catch((info) => {
+            console.log('Validate Failed:', info);
+          });
+      }}
+      onCancel={() => handleCancel()}
+      confirmLoading={loading}
+    >
+      <Form form={form} layout="vertical" name="env_modal" initialValues={view}>
+        <Form.Item
+          name="name"
+          label="视图名称"
+          rules={[{ required: true, message: '请输入视图名称' }]}
+        >
+          <Input placeholder="请输入视图名称" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default ViewCreateModal;

src/pages/crontab/viewManageModal.tsx

@@ -0,0 +1,223 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Modal, message, Space, Table, Tag, Typography } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import { PageLoading } from '@ant-design/pro-layout';
+import Paragraph from 'antd/lib/skeleton/Paragraph';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+const { Text } = Typography;
+
+const type = 'DragableBodyRow';
+
+const DragableBodyRow = ({
+  index,
+  moveRow,
+  className,
+  style,
+  ...restProps
+}: any) => {
+  const ref = useRef();
+  const [{ isOver, dropClassName }, drop] = useDrop({
+    accept: type,
+    collect: (monitor) => {
+      const { index: dragIndex } = (monitor.getItem() as any) || {};
+      if (dragIndex === index) {
+        return {};
+      }
+      return {
+        isOver: monitor.isOver(),
+        dropClassName:
+          dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
+      };
+    },
+    drop: (item: any) => {
+      moveRow(item.index, index);
+    },
+  });
+  const [, drag] = useDrag({
+    type,
+    item: { index },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drop(drag(ref));
+
+  return (
+    <tr
+      ref={ref}
+      className={`${className}${isOver ? dropClassName : ''}`}
+      style={{ cursor: 'move', ...style }}
+      {...restProps}
+    />
+  );
+};
+
+const ViewManageModal = ({
+  handleCancel,
+  visible,
+}: {
+  visible: boolean;
+  handleCancel: () => void;
+}) => {
+  const columns: any = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center' as const,
+    },
+    {
+      title: '显示',
+      key: 'status',
+      dataIndex: 'status',
+      align: 'center' as const,
+      width: 70,
+      render: (text: string, record: any, index: number) => {
+        return <Space size="middle" style={{ cursor: 'text' }}></Space>;
+      },
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      align: 'center' as const,
+      render: (text: string, record: any, index: number) => {
+        return (
+          <Space size="middle">
+            <a onClick={() => editView(record, index)}>
+              <EditOutlined />
+            </a>
+            <a onClick={() => deleteView(record, index)}>
+              <DeleteOutlined />
+            </a>
+          </Space>
+        );
+      },
+    },
+  ];
+  const [list, setList] = useState<any[]>([]);
+  const [loading, setLoading] = useState<any>(true);
+
+  const editView = (record: any, index: number) => {
+    // setEditedEnv(record);
+    // setIsModalVisible(true);
+  };
+
+  const deleteView = (record: any, index: number) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: (
+        <>
+          确认删除视图{' '}
+          <Text style={{ wordBreak: 'break-all' }} type="warning">
+            {record.name}
+          </Text>{' '}
+          吗
+        </>
+      ),
+      onOk() {
+        request
+          .delete(`${config.apiPrefix}crons/views`, { data: [record.id] })
+          .then((data: any) => {
+            if (data.code === 200) {
+              message.success('删除成功');
+              const result = [...list];
+              result.splice(index, 1);
+              setList(result);
+            } else {
+              message.error(data);
+            }
+          });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+
+  const getCronViews = () => {
+    setLoading(true);
+    request
+      .get(`${config.apiPrefix}crons/views`)
+      .then((data: any) => {
+        console.log(data);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const components = {
+    body: {
+      row: DragableBodyRow,
+    },
+  };
+
+  const moveRow = useCallback(
+    (dragIndex, hoverIndex) => {
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      const dragRow = list[dragIndex];
+      request
+        .put(`${config.apiPrefix}envs/${dragRow.id}/move`, {
+          data: { fromIndex: dragIndex, toIndex: hoverIndex },
+        })
+        .then((data: any) => {
+          if (data.code === 200) {
+            const newData = [...list];
+            newData.splice(dragIndex, 1);
+            newData.splice(hoverIndex, 0, { ...dragRow, ...data.data });
+            setList(newData);
+          } else {
+            message.error(data);
+          }
+        });
+    },
+    [list],
+  );
+
+  useEffect(() => {
+    getCronViews();
+  }, []);
+
+  return (
+    <Modal
+      title="视图管理"
+      visible={visible}
+      centered
+      onCancel={() => handleCancel()}
+      className="view-manage-modal"
+      forceRender
+      footer={false}
+    >
+      {loading ? (
+        <PageLoading />
+      ) : (
+        <DndProvider backend={HTML5Backend}>
+          <Table
+            columns={columns}
+            pagination={false}
+            dataSource={list}
+            rowKey="id"
+            size="middle"
+            components={components}
+            loading={loading}
+            onRow={(record: any, index: number) => {
+              return {
+                index,
+                moveRow,
+              } as any;
+            }}
+          />
+        </DndProvider>
+      )}
+    </Modal>
+  );
+};
+
+export default ViewManageModal;