完善定时任务视图

src/pages/crontab/index.less

@@ -108,7 +108,7 @@
   }
 
   .view-more {
-    margin-left: 20px;
+    margin-left: 32px;
     padding: 8px 0;
     cursor: pointer;
 

src/pages/crontab/index.tsx

@@ -358,6 +358,7 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
     size: number;
     sorter: any;
   }>({} as any);
+  const [viewConf, setViewConf] = useState<any>();
   const [tableScrollHeight, setTableScrollHeight] = useState<number>();
   const [isDetailModalVisible, setIsDetailModalVisible] = useState(false);
   const [detailCron, setDetailCron] = useState<any>();
@@ -396,6 +397,9 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         sorter.order === 'ascend' ? 'ASC' : 'DESC'
       }`;
     }
+    if (viewConf) {
+      url += `&queryString=${JSON.stringify({ filters: viewConf.filters })}`;
+    }
     request
       .get(url)
       .then((_data: any) => {
@@ -828,7 +832,7 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
     if (pageConf.page && pageConf.size) {
       getCrons();
     }
-  }, [pageConf]);
+  }, [pageConf, viewConf]);
 
   useEffect(() => {
     setPageConf({
@@ -944,6 +948,7 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         break;
 
       default:
+        tabClick(key);
         break;
     }
   };
@@ -955,7 +960,7 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         viewAction(key);
       }}
       items={[
-        ...[...cronViews].slice(5).map((x) => ({
+        ...[...cronViews].slice(2).map((x) => ({
           label: x.name,
           key: x.id,
           icon: <UnorderedListOutlined />,
@@ -989,6 +994,11 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
       });
   };
 
+  const tabClick = (key: string) => {
+    const view = cronViews.find(x => x.id == key);
+    setViewConf(view ? view : null);
+  }
+
   return (
     <PageContainer
       className="ql-container-wrapper crontab-wrapper ql-container-wrapper-has-tab"
@@ -1018,7 +1028,7 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         tabPosition="top"
         className="crontab-view"
         tabBarExtraContent={
-          <Dropdown overlay={menu} trigger={['click']}>
+          <Dropdown overlay={menu} trigger={['click']} overlayStyle={{minWidth: 200}}>
             <div className="view-more">
               <Space>
                 更多
@@ -1028,11 +1038,12 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
             </div>
           </Dropdown>
         }
+        onTabClick={tabClick}
       >
         <Tabs.TabPane tab="全部任务" key="all">
           {panelContent}
         </Tabs.TabPane>
-        {[...cronViews].slice(0, 5).map((x) => (
+        {[...cronViews].slice(0, 2).map((x) => (
           <Tabs.TabPane tab={x.name} key={x.id}>
             {panelContent}
           </Tabs.TabPane>
@@ -1073,14 +1084,19 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
       <ViewCreateModal
         visible={isCreateViewModalVisible}
         handleCancel={() => {
+          getCronViews();
           setIsCreateViewModalVisible(false);
         }}
       />
       <ViewManageModal
+        cronViews={cronViews}
         visible={isViewManageModalVisible}
         handleCancel={() => {
           setIsViewManageModalVisible(false);
         }}
+        cronViewChange={() => {
+          getCronViews();
+        }}
       />
     </PageContainer>
   );

src/pages/crontab/viewCreateModal.tsx

@@ -20,10 +20,14 @@ const PROPERTIES = [
 ];
 
 const OPERATIONS = [
-  { name: '包含', value: 'contains' },
-  { name: '不包含', value: 'noncontains' },
-  // { name: '属于', value: 'belong' },
-  // { name: '不属于', value: 'nonbelong' },
+  { name: '包含', value: 'Reg' },
+  { name: '不包含', value: 'NotReg' },
+  // { name: '属于', value: 'In' },
+  // { name: '不属于', value: 'Nin' },
+  // { name: '等于', value: 'Eq' },
+  // { name: '不等于', value: 'Ne' },
+  // { name: '为空', value: 'IsNull' },
+  // { name: '不为空', value: 'NotNull' },
 ];
 
 const ViewCreateModal = ({
@@ -61,7 +65,7 @@ const ViewCreateModal = ({
   useEffect(() => {
     form.resetFields();
     form.setFieldsValue({
-      filters: [{ property: 'command', operation: 'contains' }],
+      filters: [{ property: 'command', operation: 'Reg' }],
     });
   }, [view, visible]);
 
@@ -154,9 +158,9 @@ const ViewCreateModal = ({
               ))}
               <Form.Item>
                 <a
-                  href=""
+                  href="#"
                   onClick={() =>
-                    add({ property: 'command', operation: 'contains' })
+                    add({ property: 'command', operation: 'Reg' })
                   }
                 >
                   <PlusOutlined />

src/pages/crontab/viewManageModal.tsx

@@ -3,8 +3,6 @@ import { Modal, message, Space, Table, Tag, Typography, Button } 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';
 import ViewCreateModal from './viewCreateModal';
@@ -58,11 +56,15 @@ const DragableBodyRow = ({
 };
 
 const ViewManageModal = ({
+  cronViews,
   handleCancel,
   visible,
+  cronViewChange
 }: {
+  cronViews: any[];
   visible: boolean;
   handleCancel: () => void;
+  cronViewChange: () => void;
 }) => {
   const columns: any = [
     {
@@ -72,16 +74,16 @@ const ViewManageModal = ({
       align: 'center' as const,
       width: 70,
     },
-    {
-      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: 'isDisabled',
+    //   dataIndex: 'isDisabled',
+    //   align: 'center' as const,
+    //   width: 70,
+    //   render: (text: string, record: any, index: number) => {
+    //     return <Space size="middle" style={{ cursor: 'text' }}></Space>;
+    //   },
+    // },
     {
       title: '操作',
       key: 'action',
@@ -102,7 +104,6 @@ const ViewManageModal = ({
     },
   ];
   const [list, setList] = useState<any[]>([]);
-  const [loading, setLoading] = useState<any>(true);
   const [isCreateViewModalVisible, setIsCreateViewModalVisible] =
     useState<boolean>(false);
 
@@ -129,9 +130,7 @@ const ViewManageModal = ({
           .then((data: any) => {
             if (data.code === 200) {
               message.success('删除成功');
-              const result = [...list];
-              result.splice(index, 1);
-              setList(result);
+              cronViewChange();
             } else {
               message.error(data);
             }
@@ -143,18 +142,6 @@ const ViewManageModal = ({
     });
   };
 
-  const getCronViews = () => {
-    setLoading(true);
-    request
-      .get(`${config.apiPrefix}crons/views`)
-      .then((data: any) => {
-        console.log(data);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  };
-
   const components = {
     body: {
       row: DragableBodyRow,
@@ -186,8 +173,8 @@ const ViewManageModal = ({
   );
 
   useEffect(() => {
-    // getCronViews();
-  }, []);
+    setList(cronViews);
+  }, [cronViews]);
 
   return (
     <Modal
@@ -201,7 +188,7 @@ const ViewManageModal = ({
       footer={false}
       maskClosable={false}
     >
-      <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
+      <Space style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 10 }}>
         <Button
           key="2"
           type="primary"
@@ -210,30 +197,28 @@ const ViewManageModal = ({
           新建视图
         </Button>
       </Space>
-      {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>
-      )}
+      <DndProvider backend={HTML5Backend}>
+        <Table
+          bordered
+          columns={columns}
+          pagination={false}
+          dataSource={list}
+          rowKey="id"
+          size="middle"
+          style={{ marginBottom: 20 }}
+          components={components}
+          onRow={(record: any, index: number) => {
+            return {
+              index,
+              moveRow,
+            } as any;
+          }}
+        />
+      </DndProvider>
       <ViewCreateModal
         visible={isCreateViewModalVisible}
         handleCancel={() => {
+          cronViewChange();
           setIsCreateViewModalVisible(false);
         }}
       />