定时调度

src/view/Manage/DatasourceManage/Component/ScheduleAction.jsx

-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Select, Form, Input, Switch, TimePicker, Cascader, Row, Col } from 'antd';
 import moment from 'moment';
 
@@ -65,9 +65,10 @@ const ScheduleAction = (props) => {
         _fieldsValue[item.name||''] = (item.value==="1") ? true: false;
       } else if (item.selectMode === 'timePicker') {
         _fieldsValue[item.name||''] = moment(item.value||'', 'HH:mm:ss');
-      } else if (item.selectMode === 'cascader') {
-        _fieldsValue[item.name||''] = (item.value||'').split(',');
       }
+      //  else if (item.selectMode === 'cascader') {
+      //   _fieldsValue[item.name||''] = (item.value||'').split(',');
+      // }
     });
 
     (data?.scheduleParameters||[]).forEach(item => {
@@ -76,9 +77,10 @@ const ScheduleAction = (props) => {
         _fieldsValue[item.name||''] = (item.value==="1") ? true: false;
       } else if (item.selectMode === 'timePicker') {
         _fieldsValue[item.name||''] = moment(item.value||'', 'HH:mm:ss');
-      } else if (item.selectMode === 'cascader') {
-        _fieldsValue[item.name||''] = (item.value||'').split(',');
-      }
+      } 
+      // else if (item.selectMode === 'cascader') {
+      //   _fieldsValue[item.name||''] = (item.value||'').split(',');
+      // }
     });
 
     form.setFieldsValue(_fieldsValue);
@@ -98,9 +100,10 @@ const ScheduleAction = (props) => {
         item.value = (allValues[item.name||'']===true)?'1':'0';
       } else if (item.selectMode === 'timePicker' && allValues[item.name]) {
         item.value = allValues[item.name||''].format('HH:mm:ss');
-      } else if (item.selectMode === 'cascader' && allValues[item.name]) {
-        item.value = (allValues[item.name||'']||'').join(',');
-      }
+      } 
+      // else if (item.selectMode === 'cascader' && allValues[item.name]) {
+      //   item.value = (allValues[item.name||'']||'').join(',');
+      // }
     });
 
     (newSchedule?.scheduleParameters||[]).forEach(item => {
@@ -110,9 +113,10 @@ const ScheduleAction = (props) => {
         item.value = (allValues[item.name||'']===true)?'1':'0';
       } else if (item.selectMode === 'timePicker' && allValues[item.name]) {
         item.value = (allValues[item.name||'']||'').format('HH:mm:ss');
-      } else if (item.selectMode === 'cascader' && allValues[item.name]) {
-        item.value = (allValues[item.name||'']||'').join(',');
-      }
+      } 
+      // else if (item.selectMode === 'cascader' && allValues[item.name]) {
+      //   item.value = (allValues[item.name||'']||'').join(',');
+      // }
     });
 
     onChange && onChange(newSchedule);
@@ -155,9 +159,8 @@ const ScheduleAction = (props) => {
     }
 
     if (item.selectMode === 'cascader') {
-      return <Cascader 
-        options={item.selectItemList} 
-        expandTrigger="hover"
+      return <ExecuteDateItem 
+        data={item.selectItemList} 
       />
     }
 
@@ -182,9 +185,10 @@ const ScheduleAction = (props) => {
             _type = 'boolean';
           } else if (item.selectMode === 'timePicker') {
             _type = 'object';
-          } else if (item.selectMode === 'cascader') {
-            _type = 'array';
-          }
+          } 
+          // else if (item.selectMode === 'cascader') {
+          //   _type = 'array';
+          // }
 
           return (
             <Col span={12} key={index}>
@@ -209,9 +213,10 @@ const ScheduleAction = (props) => {
             _type = 'boolean';
           } else if (item.selectMode === 'timePicker') {
             _type = 'object';
-          } else if (item.selectMode === 'cascader') {
-            _type = 'array';
-          }
+          } 
+          // else if (item.selectMode === 'cascader') {
+          //   _type = 'array';
+          // }
 
           return (
             <Col span={12} key={index}>
@@ -232,4 +237,82 @@ const ScheduleAction = (props) => {
   );
 }
 
-export default ScheduleAction;
\ No newline at end of file
+export default ScheduleAction;
+
+const ExecuteDateItem = ({ value, data, onChange }) => {
+  const [categoryKey, setCategoryKey] = useState(undefined);
+  const [dateKey, setDateKey] = useState(undefined);
+
+  const mountRef = useRef(true);
+
+  useEffect(() => {
+    if (mountRef.current) {
+      setCategoryKey(value?value.split(',')[0]:undefined);
+      if (value?.split(',').length === 2) {
+        setDateKey(value?.split(',')[1].split('/'));
+      } else {
+        setDateKey(undefined);
+      }   
+    }
+
+    mountRef.current = false;
+   
+  }, [value])
+
+  const dates = useMemo(() => {
+    if (data && categoryKey) {
+      const index = data.findIndex(item => item.value === categoryKey);
+      if (index !== -1) {
+        return data[index].children;
+      }
+    }
+
+    return [];
+  }, [data, categoryKey])
+
+  const onCategoryChange = (val) => {
+    setCategoryKey(val);
+    setDateKey(undefined);
+    onChange?.(undefined);
+  }
+
+  const onDateChange = (val) => {
+    setDateKey(val);
+
+    if (categoryKey === '2') {
+      onChange?.(`${categoryKey},${val.join('/')}`);
+    } else {
+      onChange?.(`${categoryKey},${val}`);
+    }
+  }
+
+  return (
+    <Row gutter={10}>
+      <Col span={8}>
+        <Select
+          value={categoryKey}
+          onChange={onCategoryChange}
+        >
+        {
+          data?.map((item, index) => {
+            return <Select.Option key={index} value={item.value} >{item.label}</Select.Option>
+          })
+        }
+        </Select>
+      </Col>
+      <Col span={16}>
+        <Select
+          value={dateKey}
+          mode={categoryKey==='2'?'multiple':undefined}
+          onChange={onDateChange}
+        >
+        {
+          dates?.map((item, index) => {
+            return <Select.Option key={index} value={item.value} >{item.label}</Select.Option>
+          })
+        }
+        </Select>
+      </Col>
+    </Row>
+  )
+}
\ No newline at end of file

src/view/Manage/MetadataHarvester/Component/UpdateTask.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Modal, Checkbox, Row, Col, Divider, Input, Typography, Form, Switch } from 'antd';
 
 import { Config } from './Task';
+import ScheduleAction from '../../DatasourceManage/Component/ScheduleAction';
 import { dispatch } from '../../../../model';
 
 const FC = (props) => {
@@ -15,8 +16,10 @@ const FC = (props) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [checkAllValue, setCheckAllValue] = useState(false);
   const [configState, setConfigState] = useState(undefined);
+  const [step, setStep] = useState(1);
 
   const [ form ] = Form.useForm();
+  const [ scheduleForm ] = Form.useForm();
 
   useEffect(() => {
     if (visible) {
@@ -112,8 +115,12 @@ const FC = (props) => {
         },
         callback: data => {
           setConfirmLoading(false);
-          reset();
-          onCancel && onCancel(true);
+          if (action === 'add') {
+            setCurrentTask({id: data});
+            setStep(2);
+          }
+          // reset();
+          // onCancel && onCancel(true);
         },
         error: () => {
           setConfirmLoading(false);
@@ -133,6 +140,7 @@ const FC = (props) => {
     setConfigState(undefined);
     setKeyword('');
     setCheckAllValue(false);
+    setStep(1);
     form.resetFields();
   }
 
@@ -187,65 +195,81 @@ const FC = (props) => {
       onOk={onOk}
       confirmLoading={confirmLoading}
     >
-      <Config onState={(state) => {
-        setConfigState(state);
-      }} />
-      <Divider>{(configState?.targetType==="Neo4jTarget")?'neo4j数据库信息':'schema信息'}</Divider>
-      <div className='d-flex mb-3' style={{ alignItems: 'center' }}>
-        <span className='mr-3'>{(configState?.targetType==="Neo4jTarget")?'neo4j数据库搜索':'schema搜索'}:</span>
-        <Input 
-          placeholder={`请输入${(configState?.targetType==="Neo4jTarget")?'neo4j数据库':'schema'}名称`}
-          allowClear 
-          value={keyword}
-          onChange={onSearchInputChange} 
-          style={{ width: 230 }}
-        />
-         <Switch 
-          checkedChildren="全不选" 
-          unCheckedChildren="全选" 
-          checked={ checkAllValue } 
-          onChange={ onCheckAll } 
-          style={{ marginLeft: 'auto' }}
-        />
-      </div>
-      <div style={{ maxHeight: 300, overflow: 'auto' }}>
-        <Row className='mb-3'>
-        {
-          (filterSchemas||[]).map((schema, index) => {
-            return (
-              <Col className='mt-1' key={index} md={8}>
-                <div className='d-flex'>
-                  <Checkbox checked={ selectedSchemas.indexOf(schema)!==-1 } value={schema||''} onChange={onCheckChange} >
-                  </Checkbox>
-                  <Typography.Paragraph className='ml-1' title={schema||''} ellipsis>
-                  {schema||''}
-                  </Typography.Paragraph>
-                </div>
-              </Col>
-            );
-          })
-        }
-        </Row>
-      </div>
-      <Divider>过滤信息</Divider>
-      <Form {...formItemLayout} form={form}>
       {
-        taskSettings && (taskSettings.targetConfParameters||[]).filter(item => item.name!=='schema').map((param, index) => {
-          return (
-            <Form.Item 
-              label={param.cnName||''}
-              name={param.name||''}
-              key={index}
-              rules={[{ required: param.required, message: '必填项'}]}
-            >
+        step === 1 && <React.Fragment>
+          <Config onState={(state) => {
+            setConfigState(state);
+          }} />
+          <Divider>{(configState?.targetType==="Neo4jTarget")?'neo4j数据库信息':'schema信息'}</Divider>
+          <div className='d-flex mb-3' style={{ alignItems: 'center' }}>
+            <span className='mr-3'>{(configState?.targetType==="Neo4jTarget")?'neo4j数据库搜索':'schema搜索'}:</span>
+            <Input 
+              placeholder={`请输入${(configState?.targetType==="Neo4jTarget")?'neo4j数据库':'schema'}名称`}
+              allowClear 
+              value={keyword}
+              onChange={onSearchInputChange} 
+              style={{ width: 230 }}
+            />
+            <Switch 
+              checkedChildren="全不选" 
+              unCheckedChildren="全选" 
+              checked={ checkAllValue } 
+              onChange={ onCheckAll } 
+              style={{ marginLeft: 'auto' }}
+            />
+          </div>
+          <div style={{ maxHeight: 300, overflow: 'auto' }}>
+            <Row className='mb-3'>
             {
-              ( param.show ? <Input placeholder={param.explain||''} /> : <Input.Password placeholder={param.explain||''} visibilityToggle={false} /> )
+              (filterSchemas||[]).map((schema, index) => {
+                return (
+                  <Col className='mt-1' key={index} md={8}>
+                    <div className='d-flex'>
+                      <Checkbox checked={ selectedSchemas.indexOf(schema)!==-1 } value={schema||''} onChange={onCheckChange} >
+                      </Checkbox>
+                      <Typography.Paragraph className='ml-1' title={schema||''} ellipsis>
+                      {schema||''}
+                      </Typography.Paragraph>
+                    </div>
+                  </Col>
+                );
+              })
             }
-            </Form.Item>
-          )
-        })
+            </Row>
+          </div>
+          <Divider>过滤信息</Divider>
+          <Form {...formItemLayout} form={form}>
+          {
+            taskSettings && (taskSettings.targetConfParameters||[]).filter(item => item.name!=='schema').map((param, index) => {
+              return (
+                <Form.Item 
+                  label={param.cnName||''}
+                  name={param.name||''}
+                  key={index}
+                  rules={[{ required: param.required, message: '必填项'}]}
+                >
+                {
+                  ( param.show ? <Input placeholder={param.explain||''} /> : <Input.Password placeholder={param.explain||''} visibilityToggle={false} /> )
+                }
+                </Form.Item>
+              )
+            })
+          }
+          </Form>
+        </React.Fragment>
+      }
+      {
+        step === 2 && <React.Fragment>
+          <Divider>定时调度</Divider>
+          <ScheduleAction 
+            action={action} 
+            // id={currentSchedule.id} 
+            form={scheduleForm}
+            tid={currentTask.id}
+            // onChange={onActionChange}
+          />
+        </React.Fragment> 
       }
-      </Form>
     </Modal>
   );
 }