模型对比任务调度

src/view/Manage/ModelCompare/update-task.jsx

 import React from 'react'
-import { Button, Modal, Spin, Space, Divider, Form, Row, Col, Input, Select, Checkbox, Radio } from 'antd'
+import { Button, Modal, Spin, Space, Divider, Form, Row, Col, Input, Select, Checkbox, Radio, Switch, TimePicker } from 'antd'
+import moment from 'moment'
 
 import { dispatch } from '../../../model'
 
@@ -10,6 +11,7 @@ const FC = (props) => {
   const [task, setTask] = React.useState()
 
   const basicFormRef = React.useRef(null)
+  const scheduleFormRef = React.useRef(null)
 
   const title = React.useMemo(() => {
     if (type === 'add') return '新增任务'
@@ -52,13 +54,18 @@ const FC = (props) => {
   const save = async () => {
     try {
       const basicRows = await basicFormRef.current?.validate()
+      const scheduleRows = await scheduleFormRef.current?.validate()
 
+      console.log('scheduleRows', scheduleRows)
       setWaiting(true)
       if (type === 'add') {
         dispatch({
           type: 'datamodel.addCompareJob',
           payload: {
-            data: {...basicRows}
+            data: {
+              ...basicRows,
+              jobSchedule: scheduleRows,
+            }
           },
           callback: () => {
             close(true)
@@ -71,7 +78,11 @@ const FC = (props) => {
         dispatch({
           type: 'datamodel.updateCompareJob',
           payload: {
-            data: {...task, ...basicRows}
+            data: {
+              ...task, 
+              ...basicRows,
+              jobSchedule: scheduleRows,
+            }
           },
           callback: () => {
             close(true)
@@ -111,6 +122,8 @@ const FC = (props) => {
       <Spin spinning={loading || waiting}>
         <Header title='基本信息' />
         <BasicForm ref={basicFormRef} type={type} task={task} />
+        <Header title='调度配置' />
+        <ScheduleForm ref={scheduleFormRef} type={type} task={task} />
       </Spin>
     </Modal>
   )
@@ -287,3 +300,270 @@ const BasicForm = React.forwardRef(function ({ type, task }, ref) {
     </Form>
   )
 })
+
+const ScheduleForm = React.forwardRef(function ({ type, task }, ref) {
+  const [scheduleEnable, setScheduleEnable] = React.useState(false)
+
+  const [form] = Form.useForm()
+
+  React.useImperativeHandle(ref, () => ({
+    validate: async () => {
+      const rows = await form.validateFields()
+
+      rows.active = scheduleEnable
+      return rows
+    },
+  }), [form, scheduleEnable])
+
+  React.useEffect(() => {
+    if (task?.jobSchedule) {
+      setScheduleEnable(task?.jobSchedule?.active)
+    }
+  }, [task])
+
+  const marginBottom = React.useMemo(() => {
+    return (type === 'detail') ? 5 : 15
+  }, [type])
+
+  const cronCycleListStr = React.useMemo(() => {
+    let newCronCycleListStr = task?.jobSchedule?.jobScheduleDate?.name
+    const cycleNames = (task?.jobSchedule?.jobScheduleDate?.selectList??[]).map(item => item.name)
+    newCronCycleListStr = `${newCronCycleListStr} ${cycleNames.toString()}`
+    return newCronCycleListStr
+  }, [task])
+
+  const taskScheduleTimeStr = React.useMemo(() => {
+    return (task?.jobSchedule?.jobScheduleTime)?`${task?.jobSchedule?.jobScheduleTime?.hour}:${task?.jobSchedule?.jobScheduleTime?.minute}:${task?.jobSchedule?.jobScheduleTime?.second}`:''
+  }, [task])
+
+  const onValuesChange = (changedValues, allValues) => {
+
+  }
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      onValuesChange={onValuesChange}
+    >
+      <Row gutter={15}>
+        <Col span={12}>
+          <Form.Item 
+            label="开启"
+            style={{ marginBottom }}
+          >
+            <Switch 
+              checked={scheduleEnable}
+              onChange={(checked) => {
+                if (type === 'detail') return 
+
+                setScheduleEnable(checked)
+              }} 
+            />
+          </Form.Item>
+          <Form.Item 
+            label="调度名称"
+            name="scheduleName"
+            labelCol={{ 
+              offset: 6,
+              span: 4 
+            }} 
+            wrapperCol={{ 
+              span: 12
+            }} 
+            style={{ marginBottom }}
+            hidden={!scheduleEnable}
+            rules={[{ required: scheduleEnable, message: '请输入调度名称!' }]}
+          >
+            { type==='detail' ? <LabelItem title={task?.jobSchedule?.scheduleName} /> : <Input placeholder='请输入调度名称' /> }
+          </Form.Item>
+          <Form.Item 
+            label="描述"
+            name="scheduleDesc"
+            labelCol={{ 
+              offset: 6,
+              span: 4 
+            }} 
+            wrapperCol={{ 
+              span: 12
+            }} 
+            style={{ marginBottom }}
+            hidden={!scheduleEnable}
+          >
+            { type==='detail' ? <LabelItem title={task?.jobSchedule?.scheduleDesc} /> : <Input placeholder='请输入调度描述' /> }
+          </Form.Item>
+          <Form.Item 
+            label="执行日期"
+            name="jobScheduleDate"
+            labelCol={{ 
+              offset: 6,
+              span: 4 
+            }} 
+            wrapperCol={{ 
+              span: 12
+            }} 
+            style={{ marginBottom }}
+            hidden={!scheduleEnable}
+            rules={[{ required: scheduleEnable, message: '请选择执行日期!' }]}
+          >
+            { type==='detail' ? <LabelItem title={cronCycleListStr} /> : <CronItem />}
+          </Form.Item>
+          <Form.Item 
+            label="执行时间"
+            name="jobScheduleTime"
+            labelCol={{ 
+              offset: 6,
+              span: 4 
+            }} 
+            wrapperCol={{ 
+              span: 12
+            }} 
+            style={{ marginBottom }}
+            hidden={!scheduleEnable}
+            rules={[{ required: scheduleEnable, message: '请选择执行时间!' }]}
+          >
+            { type==='detail' ? <LabelItem title={taskScheduleTimeStr} /> : <CronTimeItem />}
+          </Form.Item>
+        </Col>
+      </Row>
+    </Form>
+  )
+})
+
+const CronItem = ({ value, onChange }) => {
+  const [loadingCycleTypes, setLoadingCycleTypes] = React.useState(false)
+  const [cycleTypes, setCycleTypes] = React.useState()
+  const [cycleKey, setCycleKey] = React.useState()
+  const [cronSelectedKeys, setCronSelectedKeys] = React.useState()
+
+  React.useEffect(() => {
+    if (value) {
+      setCycleKey(value?.cycleType)
+      setCronSelectedKeys((value?.list??[]).map(item => item.itemType))
+    } else {
+      setCycleKey()
+      setCronSelectedKeys()
+    }
+  }, [value])
+
+  React.useEffect(() => {
+    getCronCycleTypes()
+  }, [])
+
+  const cronOptions = React.useMemo(() => {
+    if (cycleKey) {
+      const index = (cycleTypes??[]).findIndex(item => item.cycleType === cycleKey)
+      if (index !== -1) {
+        return cycleTypes[index].list
+      }
+    }
+
+    return []
+  }, [cycleTypes, cycleKey])
+
+  const getCronCycleTypes = () => {
+    setLoadingCycleTypes(true)
+    dispatch({
+      type: 'datamodel.getCompareJobCronCycleTypes',
+      callback: data => {
+        setLoadingCycleTypes(false)
+        setCycleTypes(data)
+      },
+      error: () => {
+        setLoadingCycleTypes(false)
+      }
+    })
+  }
+
+  const triggerChange = () => {
+    setCycleKey(prevCycleKey => {
+      setCronSelectedKeys(prevCronSelectedKeys => {
+        const index = (cycleTypes??[]).findIndex(item => item.cycleType === prevCycleKey)
+
+        let newValue = null
+        if (index !== -1) {
+          newValue = cycleTypes[index]
+          newValue = {...newValue, list: (newValue.list??[]).filter(item => (prevCronSelectedKeys??[]).indexOf(item.itemType) !== -1) }
+        }
+    
+        onChange?.(newValue)
+        return prevCronSelectedKeys
+      })
+
+      return prevCycleKey
+    })
+  }
+
+  const onCycleChange = (val) => {
+    setCycleKey(val)
+    setCronSelectedKeys()
+    triggerChange()
+  }
+
+  const onCronChange = (val) => {
+    setCronSelectedKeys(val)
+    triggerChange()
+  }
+
+  return (
+    <Spin spinning={loadingCycleTypes}>
+      <Row gutter={10}>
+        <Col span={8}>
+          <Select
+            value={cycleKey}
+            onChange={onCycleChange}
+          >
+          {
+            (cycleTypes??[]).map(item => {
+              return <Select.Option key={item.cycleType} value={item.cycleType} >{item.name}</Select.Option>
+            })
+          }
+          </Select>
+        </Col>
+        <Col span={16}>
+          <Select
+            value={cronSelectedKeys}
+            mode='multiple'
+            onChange={onCronChange}
+          >
+          {
+            cronOptions?.map(item => {
+              return <Select.Option key={item.itemType} value={item.itemType} >{item.name}</Select.Option>
+            })
+          }
+          </Select>
+        </Col>
+      </Row>
+    </Spin>
+  )
+}
+
+const CronTimeItem = ({ value, onChange }) => {
+  React.useEffect(() => {
+    if (!value) {
+      onChange?.({
+        hour: undefined,
+        minute: undefined,
+        second: undefined,
+      })
+    }
+  }, [value])
+
+  return (
+    <TimePicker 
+      value={(value?.hour)?moment(`${value.hour}:${value.minute}:${value.second}`, 'HH:mm:ss'):undefined}
+      onChange={(time, timeString) => {
+        const tempTimes = (timeString??'').split(':')
+        if ((tempTimes??[]).length === 3) {
+          onChange?.({
+            hour: tempTimes[0],
+            minute: tempTimes[1],
+            second: tempTimes[2],
+          })
+        }
+      }} 
+    />
+  )
+}
\ No newline at end of file