feat:cron表达式

src/component/CronSelect.jsx

@@ -1,4 +1,259 @@
-import React from 'react'
+import { Input, Radio, Select, Space } from 'antd'
+import React, {
+  useState,
+  useImperativeHandle,
+  forwardRef,
+  useEffect,
+} from 'react'
 import styled from 'styled-components'
 
-export const CronSelect = () => {}
+const CronWrapper = styled.div`
+  .time_select {
+    width: 58px;
+  }
+`
+
+const RadioGroup = Radio.Group
+
+const Option = Select.Option
+
+const CronSelect = ({ cron_data }, ref) => {
+  const [cronType, setCronType] = useState('0')
+  const [hourType, setHourType] = useState('hour')
+  const [hourMax, setHourMax] = useState(24)
+  const [minVal, setMinVal] = useState('')
+  const [hourVal, setHourVal] = useState('')
+  const [dayVal, setDayVal] = useState('')
+  const [weekVal, setWeekVal] = useState('')
+  const [monthVal, setMonthVal] = useState('')
+  const [cronVal, setCronVal] = useState('')
+  useImperativeHandle(ref, () => {
+    return {
+      getCronData: formatCronData(),
+    }
+  })
+
+  useEffect(() => {
+    if (cron_data?.cron_select_type === 0) {
+      setCronType(String(cron_data.cron_select_type))
+      const keys = Object.keys(cron_data)
+      if (keys.includes('hour')) {
+        setHourVal(cron_data['hour'])
+        onChangeHourType('hour')
+      } else {
+        setHourVal(cron_data['minute'])
+        onChangeHourType('min')
+      }
+    }
+  }, [cron_data])
+
+  const formatCronData = () => {
+    let obj = {}
+    switch (cronType) {
+      case '0':
+        if (hourType === 'hour') {
+          obj = { cron_select_type: Number(cronType), hour: hourVal }
+        } else {
+          obj = { cron_select_type: Number(cronType), minute: hourVal }
+        }
+        break
+      case '1':
+        obj = {
+          cron_select_type: Number(cronType),
+          hour: hourVal,
+          minute: minVal,
+        }
+        break
+      case '2':
+        obj = {
+          cron_select_type: Number(cronType),
+          week: weekVal,
+          hour: hourVal,
+          minute: minVal,
+        }
+        break
+      case '3':
+        obj = {
+          cron_select_type: Number(cronType),
+          month: monthVal,
+          week: weekVal,
+          hour: hourVal,
+          minute: minVal,
+        }
+        break
+      case '4':
+        obj = { cron_select_type: Number(cronType), cron_expression: cronVal }
+        break
+      default:
+        break
+    }
+    return obj
+  }
+
+  const onCronTypeChange = e => {
+    setCronType(e.target.value)
+    setMinVal('')
+    setHourVal('')
+    setDayVal('')
+    setWeekVal('')
+    setMonthVal('')
+  }
+  const onChangeHourType = val => {
+    setHourType(val)
+    setHourMax(val === 'hour' ? 24 : 60)
+  }
+
+  const onChangeHourVal = val => {
+    setHourVal(val)
+  }
+  const onChangeDayVal = val => {
+    setDayVal(val)
+  }
+  const onChangeWeekVal = val => {
+    setWeekVal(val)
+  }
+  const onChangeMonthVal = val => {
+    setMonthVal(val)
+  }
+  const onChangeMinVal = val => {
+    setMinVal(val)
+  }
+  const onChangeCronVal = e => {
+    setCronVal(e.target.value)
+  }
+
+  // 各时间段选项
+  const timeOptions = val => {
+    const options = []
+    for (let i = 1; i < val; i++) {
+      options.push(
+        <Option value={i} key={i}>
+          {i}
+        </Option>
+      )
+    }
+    return options
+  }
+
+  const hourSet = (
+    <Space>
+      <span>每</span>
+      <Select
+        onChange={onChangeHourVal}
+        value={hourVal}
+        className="time_select">
+        {timeOptions(hourMax)}
+      </Select>
+      <Select onChange={onChangeHourType} value={hourType}>
+        <Option value="min">分钟</Option>
+        <Option value="hour">小时</Option>
+      </Select>
+      <span>执行一次</span>
+    </Space>
+  )
+
+  const daySet = (
+    <Space>
+      <span>每天</span>
+      <Select
+        onChange={onChangeHourVal}
+        value={hourVal}
+        className="time_select">
+        {timeOptions(24)}
+      </Select>
+      <span>时</span>
+      <Select onChange={onChangeMinVal} value={minVal} className="time_select">
+        {timeOptions(60)}
+      </Select>
+      <span>分</span>
+      <span>执行一次</span>
+    </Space>
+  )
+
+  const weekSet = (
+    <Space>
+      <span>每周</span>
+      <Select
+        onChange={onChangeWeekVal}
+        value={weekVal}
+        className="time_select">
+        <Option value="1">一</Option>
+        <Option value="2">二</Option>
+        <Option value="3">三</Option>
+        <Option value="4">四</Option>
+        <Option value="5">五</Option>
+        <Option value="6">六</Option>
+        <Option value="7">七</Option>
+      </Select>
+      <span>，</span>
+      <Select
+        onChange={onChangeHourVal}
+        value={hourVal}
+        className="time_select">
+        {timeOptions(24)}
+      </Select>
+      <span>时</span>
+      <Select onChange={onChangeMinVal} value={minVal} className="time_select">
+        {timeOptions(60)}
+      </Select>
+      <span>分</span>
+      <span>执行一次</span>
+    </Space>
+  )
+
+  const monthSet = (
+    <Space>
+      <span>每</span>
+      <Select
+        onChange={onChangeMonthVal}
+        value={monthVal}
+        className="time_select">
+        {timeOptions(13)}
+      </Select>
+      <span>个月，</span>
+      <Select onChange={onChangeDayVal} value={dayVal} className="time_select">
+        {timeOptions(32)}
+      </Select>
+      <span>日，</span>
+      <Select
+        onChange={onChangeHourVal}
+        value={hourVal}
+        className="time_select">
+        {timeOptions(24)}
+      </Select>
+      <span>时</span>
+      <Select onChange={onChangeMinVal} value={minVal} className="time_select">
+        {timeOptions(60)}
+      </Select>
+      <span>分</span>
+      <span>执行一次</span>
+    </Space>
+  )
+
+  const cronSet = (
+    <Input
+      placeholder="cron表达式"
+      value={cronVal}
+      onChange={onChangeCronVal}
+    />
+  )
+
+  return (
+    <CronWrapper>
+      <RadioGroup onChange={onCronTypeChange} value={cronType}>
+        <Radio value="0">按小时</Radio>
+        <Radio value="1">按天</Radio>
+        <Radio value="2">按星期</Radio>
+        <Radio value="3">按月</Radio>
+        <Radio value="4">Cron表达式</Radio>
+      </RadioGroup>
+      {cronType === '0' && hourSet}
+      {cronType === '1' && daySet}
+      {cronType === '2' && weekSet}
+      {cronType === '3' && monthSet}
+      {cronType === '4' && cronSet}
+    </CronWrapper>
+  )
+}
+
+export default forwardRef(CronSelect)

src/module/tasklog/component/LogTable.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Table, Space } from 'antd'
 import moment from 'moment'
 import { useNavigate } from 'react-router-dom'
+import { getLogList } from '../services/index'
 
 const LogTable = () => {
   // 初始化日志列表
@@ -86,31 +87,24 @@ const LogTable = () => {
 
   const fetchJoblog = async () => {
     setDataLoading(true)
-    // const { data } = await getJoblog()
-    // if (data.code === 200) {
-    //   const list = data.data.items.map(item => {
-    //     return {
-    //       key: item.id,
-    //       jobId: item.job_id,
-    //       triggerTime: moment(item.trigger_time).format('YYYY.MM.DD HH:MM'),
-    //       triggerResult: item.trigger_code,
-    //       handleTime: moment(item.handle_time).format('YYYY.MM.DD HH:MM'),
-    //       handleResult: item.handle_code,
-    //     }
-    //   })
-    //   setLogList(list)
-    // }
-    const data = [
-      {
-        key: 1,
-        jobName: '每日供应商销量预测任务2',
-        triggerTime: moment(1663576651000).format('YYYY.MM.DD HH:MM'),
-        triggerResult: 1,
-        handleTime: moment(1663576651000).format('YYYY.MM.DD HH:MM'),
-        handleResult: 0,
-      }
-    ]
-    setLogList(data)
+    const { data } = await getLogList()
+    if (data.code === 200) {
+      const list = data.data.map(item => {
+        return {
+          key: item.id,
+          jobName: item.job_name,
+          triggerTime: moment(item.trigger_time * 1000).format(
+            'YYYY.MM.DD HH:MM'
+          ),
+          triggerResult: item.trigger_result,
+          handleTime: moment(item.executor_time * 1000).format(
+            'YYYY.MM.DD HH:MM'
+          ),
+          handleResult: item.executor_result,
+        }
+      })
+      setLogList(list)
+    }
     setDataLoading(false)
   }
 

src/module/tasklog/services/index.js

@@ -0,0 +1,24 @@
+import request from '../../../utils/request'
+
+// 定时任务日志列表
+export const getLogList = () =>
+  request({
+    url: `/jpt/jm_job_log/`,
+    method: 'get',
+  })
+
+// 定时任务日志详情
+export const getLogInfo = id => {
+  request({
+    url: `/jpt/jm_job_log/logs?job_history_id=${id}`,
+    method: 'get',
+  })
+}
+
+// 日志文件
+export const getJobLog = uri => {
+  request({
+    url: `/jpt/files/jm_job_log/?uri=${uri}`,
+    method: 'get',
+  })
+}

src/module/taskmgmt/component/TaskCreaterView.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { Form, Select, Button, Space, message } from 'antd'
 import TaskForm from './TaskForm'
 import TaskChartEditor from './TaskChartEditor'
@@ -53,14 +53,14 @@ const TaskCreaterView = () => {
 
   const [taskType, setTaskType] = useState(null)
   const [graphRef, setGraphRef] = useState(null)
-  const [cronNum, setCronNum] = useState(null)
-  const [cronUnit, setCronUnit] = useState(null)
   const [jmWorkList, setJmWorkList] = useState([])
   const [taskInfo, setTaskInfo] = useState(null)
 
   const [taskTypeForm] = Form.useForm()
   const [taskForm] = Form.useForm()
 
+  const cronRef = useRef()
+
   useEffect(() => {
     if (state) {
       fetchJmJobInfo(state.id)
@@ -144,13 +144,20 @@ const TaskCreaterView = () => {
                 graphRef?.state.taskGraph.toJSON()
               )
             }
+            const cron_data = cronRef.current?.getCronData
             if (taskFormData.executionCycle === 2) {
-              params['cron_num'] = cronNum
-              params['cron_unit'] = cronUnit
+              params['cron_expression'] = cron_data
             }
 
             // 单位非空判断
-            if (taskFormData.executionCycle === 1 || (cronNum && cronUnit)) {
+            if (
+              taskFormData.executionCycle === 1 ||
+              cron_data?.minute ||
+              cron_data?.hour ||
+              cron_data?.week ||
+              cron_data?.month ||
+              cron_data?.cron_expression
+            ) {
               let res = {}
               if (state !== null) {
                 params['id'] = state.id
@@ -169,6 +176,7 @@ const TaskCreaterView = () => {
             }
           })
           .catch(err => {
+            console.log('$$$', err)
             message.error('请检查表单数据是否完整')
           })
       })
@@ -219,8 +227,7 @@ const TaskCreaterView = () => {
         taskType={taskType}
         jmWorkList={jmWorkList}
         taskInfo={taskInfo}
-        setCronNum={cron_num => setCronNum(cron_num)}
-        setCronUnit={cron_unit => setCronUnit(cron_unit)}
+        ref={cronRef}
       />
       {taskType === 'multitasking' && (
         <div className="tasktype_label">作业编排：</div>

src/module/taskmgmt/component/TaskForm.jsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+} from 'react'
 import styled from 'styled-components'
 import {
   Form,
@@ -12,6 +18,7 @@ import {
 } from 'antd'
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
 import { getTagList, deleteTag } from '../services'
+import CronSelect from '../../../component/CronSelect'
 
 const FormWrapper = styled.div`
   .singletask_form {
@@ -37,28 +44,12 @@ const layout = {
   },
 }
 
-const units = {
-  分: 'min',
-  时: 'hour',
-  日: 'day',
-  周: 'week',
-  月: 'month',
-}
-
-const TaskForm = ({
-  taskForm,
-  taskType,
-  taskInfo,
-  jmWorkList,
-  setCronNum,
-  setCronUnit,
-}) => {
+const TaskForm = ({ taskForm, taskType, taskInfo, jmWorkList }, ref) => {
   const [radioValue, setRadioValue] = useState(null)
-  const [cronNumValue, setCronNumValue] = useState('')
-  const [cronUnitValue, setCronUnitValue] = useState(null)
   const [tagOptions, setTagOptions] = useState([])
   const [jmWorkOptions, setJmWorkOptions] = useState([])
   const [tag, setTag] = useState(null)
+  const [cronData, setCronData] = useState(null)
   const inputRef = useRef(null)
 
   const onNameChange = event => {
@@ -98,16 +89,6 @@ const TaskForm = ({
     setRadioValue(e.target.value)
   }
 
-  const onCronNumChange = e => {
-    setCronNumValue(e.target.value)
-    setCronNum(e.target.value)
-  }
-
-  const onCronUnitChange = params => {
-    setCronUnitValue(params)
-    setCronUnit(params?.label)
-  }
-
   const fetchTagList = async () => {
     const { data } = await getTagList('任务标签')
     if (data.code === 200) {
@@ -120,13 +101,7 @@ const TaskForm = ({
   const handleInitTask = taskInfo => {
     setRadioValue(taskInfo.cron_type)
     if (taskInfo.cron_type === 2) {
-      setCronNumValue(taskInfo.cron_num)
-      setCronNum(taskInfo.cron_num)
-      setCronUnitValue({
-        value: units[taskInfo.cron_unit],
-        label: taskInfo.cron_unit,
-      })
-      setCronUnit(taskInfo.cron_unit)
+      setCronData(taskInfo.cron_expression_dict)
     }
     taskForm.setFieldsValue({
       taskName: taskInfo.name,
@@ -229,25 +204,7 @@ const TaskForm = ({
                 执行周期
                 {radioValue === 2 ? (
                   <Space className="form_executionCycle">
-                    <span>每</span>
-                    <input
-                      style={{ width: '50px' }}
-                      value={cronNumValue}
-                      onChange={onCronNumChange}
-                    />
-                    <Select
-                      placeholder="选择数"
-                      allowClear
-                      labelInValue
-                      value={cronUnitValue}
-                      onChange={onCronUnitChange}>
-                      <Option value="min">分</Option>
-                      <Option value="hour">时</Option>
-                      <Option value="day">日</Option>
-                      <Option value="week">周</Option>
-                      <Option value="month">月</Option>
-                    </Select>
-                    <span>执行1次</span>
+                    <CronSelect cron_data={cronData} ref={ref} />
                   </Space>
                 ) : null}
               </Radio>
@@ -259,4 +216,4 @@ const TaskForm = ({
   )
 }
 
-export default TaskForm
+export default forwardRef(TaskForm)

src/module/taskmgmt/page/TaskMgmtView.jsx

@@ -79,9 +79,7 @@ const TaskMgmtView = () => {
           taskType: item.type,
           taskTag: item.tag,
           executionCycle:
-            item.cron_type === 1
-              ? '执行一次'
-              : `循环触发，${item.cron_num}${item.cron_unit}`,
+            item.cron_type === 1 ? '执行一次' : item.cron_expression,
           historicalRuntime: item.history,
           taskState: item.status === 1,
         }