feat: 任务模块

src/module/taskmgmt/component/TaskChartEditor.jsx

@@ -159,6 +159,15 @@ export default class TaskChartEditor extends React.Component {
       contextMenu: null,
     }
   }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.json !== this.props.json) {
+      this.state.taskGraph.fromJSON(JSON.parse(nextProps.json))
+    }
+    if (nextProps.jmWorkList !== this.props.jmWorkList) {
+      this.handleWorkNodes(nextProps.jmWorkList)
+    }
+  }
   //挂载
   componentDidMount() {
     this.props.onRef(this)

src/module/taskmgmt/component/TaskCreaterView.jsx

@@ -3,8 +3,13 @@ import { Form, Select, Button, Space, message } from 'antd'
 import TaskForm from './TaskForm'
 import TaskChartEditor from './TaskChartEditor'
 import styled from 'styled-components'
-import { useNavigate } from 'react-router'
-import { getJmHomeworkList, createJmJob } from '../services'
+import { useNavigate, useLocation } from 'react-router'
+import {
+  getJmHomeworkList,
+  createJmJob,
+  getJmJobInfo,
+  updateJmJobInfo,
+} from '../services'
 
 const TaskCreater = styled.div`
   margin: 20px;
@@ -44,17 +49,56 @@ const { Option } = Select
 const TaskCreaterView = () => {
   // 路由导航
   const navigate = useNavigate()
+  const { state } = useLocation()
+
   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()
+
+  useEffect(() => {
+    if (state) {
+      fetchJmJobInfo(state.id)
+    }
+  }, [state])
+
+  //初始化作业列表
+  useEffect(() => {
+    fetchJmWorkList()
+  }, [])
+
+  const fetchJmJobInfo = async id => {
+    const { data } = await getJmJobInfo(id)
+    if (data.code === 200) {
+      const { type } = data.data
+      taskTypeForm.setFieldValue('taskType', type)
+      setTaskType(type === '单作业离线任务' ? 'singleTask' : 'multitasking')
+      setTaskInfo(data.data)
+    }
+  }
+
   const onTaskTypeChange = value => {
     setTaskType(value)
   }
+
+  const onGraphRef = ref => {
+    setGraphRef(ref)
+  }
+
+  const fetchJmWorkList = async () => {
+    const { data } = await getJmHomeworkList('test')
+    if (data.code === 200) {
+      setJmWorkList(data.data)
+    } else {
+      message.error(data.msg)
+    }
+  }
+
   const onSubmit = () => {
     const taskFormData = taskForm.getFieldsValue()
     taskTypeForm
@@ -100,13 +144,21 @@ const TaskCreaterView = () => {
                 graphRef?.state.taskGraph.toJSON()
               )
             }
-            if (taskFormData.executionCycle === '2') {
+            if (taskFormData.executionCycle === 2) {
               params['cron_num'] = cronNum
               params['cron_unit'] = cronUnit
             }
-            createJmJob(params).then(() => {
-              navigate(-1)
-            })
+
+            if (state !== null) {
+              params['id'] = state.id
+              updateJmJobInfo(params).then(() => {
+                navigate(-1)
+              })
+            } else {
+              createJmJob(params).then(() => {
+                navigate(-1)
+              })
+            }
           })
           .catch(err => {
             message.error('请检查表单数据是否完整')
@@ -137,23 +189,6 @@ const TaskCreaterView = () => {
     return { nodes, edges }
   }
 
-  const onGraphRef = ref => {
-    setGraphRef(ref)
-  }
-
-  const fetchJmWorkList = async () => {
-    const { data } = await getJmHomeworkList('test')
-    if (data.code === 200) {
-      setJmWorkList(data.data)
-    } else {
-      message.error(data.msg)
-    }
-  }
-  //初始化作业列表
-  useEffect(() => {
-    fetchJmWorkList()
-  }, [])
-
   return (
     <TaskCreater>
       <div className="tasktype_label">配置任务类型：</div>
@@ -176,6 +211,7 @@ const TaskCreaterView = () => {
         taskForm={taskForm}
         taskType={taskType}
         jmWorkList={jmWorkList}
+        taskInfo={taskInfo}
         setCronNum={cron_num => setCronNum(cron_num)}
         setCronUnit={cron_unit => setCronUnit(cron_unit)}
       />
@@ -183,7 +219,11 @@ const TaskCreaterView = () => {
         <div className="tasktype_label">作业编排：</div>
       )}
       {taskType === 'multitasking' && (
-        <TaskChartEditor onRef={onGraphRef} jmWorkList={jmWorkList} />
+        <TaskChartEditor
+          onRef={onGraphRef}
+          jmWorkList={jmWorkList}
+          json={taskInfo?.json_str}
+        />
       )}
       <Space className="tasktype_btns">
         <Button onClick={() => navigate(-1)}>取消</Button>

src/module/taskmgmt/component/TaskForm.jsx

@@ -1,7 +1,18 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import styled from 'styled-components'
-import { Form, Select, Input, Radio, Space, message } from 'antd'
+import {
+  Form,
+  Select,
+  Input,
+  Radio,
+  Space,
+  message,
+  Divider,
+  Button,
+} from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
 import { getTagList } from '../services'
+import { months } from 'moment'
 
 const FormWrapper = styled.div`
   .singletask_form {
@@ -27,26 +38,57 @@ const layout = {
   },
 }
 
+const units = {
+  分: 'min',
+  时: 'hour',
+  日: 'day',
+  周: 'week',
+  月: 'month',
+}
+
 const TaskForm = ({
   taskForm,
   taskType,
+  taskInfo,
   jmWorkList,
   setCronNum,
   setCronUnit,
 }) => {
   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 inputRef = useRef(null)
+
+  const onNameChange = event => {
+    setTag(event.target.value)
+  }
+
+  const addItem = e => {
+    e.preventDefault()
+    if (tag !== null) {
+      setTagOptions([...tagOptions, tag])
+      setTag(null)
+    }
+    setTimeout(() => {
+      inputRef.current?.focus()
+    }, 0)
+  }
 
   const onRadioChange = e => {
     setRadioValue(e.target.value)
   }
 
   const onCronNumChange = e => {
+    setCronNumValue(e.target.value)
     setCronNum(e.target.value)
   }
 
   const onCronUnitChange = params => {
+    console.log(params)
+    setCronUnitValue(params)
     setCronUnit(params?.label)
   }
 
@@ -59,6 +101,26 @@ const TaskForm = ({
     }
   }
 
+  const handleInitTask = taskInfo => {
+    console.log(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)
+    }
+    taskForm.setFieldsValue({
+      taskName: taskInfo.name,
+      taskTag: taskInfo.tag,
+      job: taskInfo.nodes[0].homework_id,
+      executionCycle: taskInfo.cron_type,
+    })
+  }
+
   //初始化tag列表
   useEffect(() => {
     fetchTagList()
@@ -69,6 +131,10 @@ const TaskForm = ({
     setJmWorkOptions(jmWorkList)
   }, [jmWorkList])
 
+  useEffect(() => {
+    if (taskInfo !== null) handleInitTask(taskInfo)
+  }, [taskInfo])
+
   return (
     <FormWrapper>
       <Form {...layout} form={taskForm} className="singletask_form">
@@ -82,7 +148,33 @@ const TaskForm = ({
           name="taskTag"
           label="任务分类"
           rules={[{ required: true, message: '请选择任务分类!' }]}>
-          <Select placeholder="选择任务分类" allowClear>
+          <Select
+            placeholder="选择任务分类"
+            allowClear
+            dropdownRender={menu => (
+              <>
+                {menu}
+                <Divider
+                  style={{
+                    margin: '8px 0',
+                  }}
+                />
+                <Space
+                  style={{
+                    padding: '0 8px 4px',
+                  }}>
+                  <Input
+                    placeholder="请输入"
+                    ref={inputRef}
+                    value={tag}
+                    onChange={onNameChange}
+                  />
+                  <Button type="text" icon={<PlusOutlined />} onClick={addItem}>
+                    添加新分类
+                  </Button>
+                </Space>
+              </>
+            )}>
             {tagOptions.map((item, index) => (
               <Option key={index} value={item}>
                 {item}
@@ -110,20 +202,22 @@ const TaskForm = ({
           rules={[{ required: true, message: '请设置执行周期!' }]}>
           <RadioGroup onChange={onRadioChange}>
             <Space direction="vertical">
-              <Radio value='1'>只执行一次，下次手动执行</Radio>
-              <Radio value='2'>
+              <Radio value={1}>只执行一次，下次手动执行</Radio>
+              <Radio value={2}>
                 执行周期
-                {radioValue === '2' ? (
+                {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>

src/module/taskmgmt/page/TaskMgmtView.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router'
 import { Table, Switch, Space, Button, message } from 'antd'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
@@ -30,6 +31,8 @@ const TaskMgmtView = () => {
   // 初始化列表
   const [jobList, setJogList] = useState([])
 
+  const navigate = useNavigate()
+
   // 切换状态
   const changeTaskState = (checked, id) => {
     updateJmJobStatus({ id, status: checked ? 1 : 0 })
@@ -60,7 +63,7 @@ const TaskMgmtView = () => {
   }
   //编辑
   const editTask = id => {
-    console.log('edit', id)
+    navigate('/task-mgmt/task-view', { state: { id } })
   }
 
   //获取列表
@@ -188,7 +191,7 @@ const TaskMgmtView = () => {
   return (
     <TaskMgmtWrapper>
       <div className="link_btn">
-        <Link to="/task-mgmt/create-task">
+        <Link to="/task-mgmt/task-view">
           <Button type="primary">创建离线任务</Button>
         </Link>
       </div>

src/module/taskmgmt/services/index.js

@@ -40,7 +40,7 @@ export const deleteJmJob = id =>
 //获取单个任务信息
 export const getJmJobInfo = id =>
   request({
-    url: `/jpt/jm_job_info/?jm_job_id=${id}`,
+    url: `/jpt/jm_job_info/info?jm_job_id=${id}`,
     method: 'get',
   })
 

src/routes/index.js

@@ -1,43 +1,48 @@
 import DatasourceView from '../module/datasource/page/DatasourceView.jsx'
 import SyncTaskAdd from '../module/datasource/component/SyncTaskAdd.jsx'
 import LogWatcher from '../module/datasource/component/LogWatcher.jsx'
-import TaskLog from '../module/tasklog/page/TaskLog.jsx';
-import TaskMgmtView from '../module/taskmgmt/page/TaskMgmtView.jsx';
-import TaskCreaterView from '../module/taskmgmt/component/TaskCreaterView.jsx';
-import TaskLogWatcher from '../module/tasklog/component/TaskLogWatcher.jsx';
+import TaskLog from '../module/tasklog/page/TaskLog.jsx'
+import TaskMgmtView from '../module/taskmgmt/page/TaskMgmtView.jsx'
+import TaskCreaterView from '../module/taskmgmt/component/TaskCreaterView.jsx'
+import TaskLogWatcher from '../module/tasklog/component/TaskLogWatcher.jsx'
 
 export const routes = [
-    {
-        path: '/datasource',
-        title: '数据源管理',
-        // exact: true,
-        component: DatasourceView,
-        children: [{
-            path: '/datasource/sync-task',
-            component: SyncTaskAdd,
-        }, {
-            path: '/datasource/log-watcher',
-            component: LogWatcher,
-        }]
-    },
-    {
-        path: '/task-mgmt',
-        title: '任务管理',
-        component: TaskMgmtView,
-        children: [{
-            path: '/task-mgmt/create-task',
-            component: TaskCreaterView,
-        }]
-    },
-    {
-        path: '/task-log',
-        title: '任务日志',
-        component: TaskLog,
-        children: [
-          {
-            path: '/task-log/log-watcher',
-            component: TaskLogWatcher
-          }
-        ]
-    }
-]
+  {
+    path: '/datasource',
+    title: '数据源管理',
+    // exact: true,
+    component: DatasourceView,
+    children: [
+      {
+        path: '/datasource/sync-task',
+        component: SyncTaskAdd,
+      },
+      {
+        path: '/datasource/log-watcher',
+        component: LogWatcher,
+      },
+    ],
+  },
+  {
+    path: '/task-mgmt',
+    title: '任务管理',
+    component: TaskMgmtView,
+    children: [
+      {
+        path: '/task-mgmt/task-view',
+        component: TaskCreaterView,
+      },
+    ],
+  },
+  {
+    path: '/task-log',
+    title: '任务日志',
+    component: TaskLog,
+    children: [
+      {
+        path: '/task-log/log-watcher',
+        component: TaskLogWatcher,
+      },
+    ],
+  },
+]