定时调度

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}>
@@ -233,3 +238,81 @@ const ScheduleAction = (props) => {
 }
 
 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,6 +195,8 @@ const FC = (props) => {
       onOk={onOk}
       confirmLoading={confirmLoading}
     >
+      {
+        step === 1 && <React.Fragment>
           <Config onState={(state) => {
             setConfigState(state);
           }} />
@@ -246,6 +256,20 @@ const FC = (props) => {
             })
           }
           </Form>
+        </React.Fragment>
+      }
+      {
+        step === 2 && <React.Fragment>
+          <Divider>定时调度</Divider>
+          <ScheduleAction 
+            action={action} 
+            // id={currentSchedule.id} 
+            form={scheduleForm}
+            tid={currentTask.id}
+            // onChange={onActionChange}
+          />
+        </React.Fragment> 
+      }
     </Modal>
   );
 }