feat: 数据处理

src/module/taskmgmt/component/AlgoNode.jsx

@@ -14,12 +14,15 @@ const NodeWrapper = styled.div`
     height: 100%;
     background-color: #fff;
     border: 1px solid #c2c8d5;
-    border-left: 4px solid #5f95ff;
-    border-radius: 4px;
+    border-right: 10px solid #5f95ff;
+    border-radius: 8px;
     box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
   }
   .node .label {
     display: inline-block;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
     flex-shrink: 0;
     margin-left: 8px;
     color: #666;
@@ -28,6 +31,11 @@ const NodeWrapper = styled.div`
   .node .status {
     flex-shrink: 0;
   }
+  .node .uri {
+    padding: 0 5px;
+    color: #1881da;
+    background: rgba(24, 129, 218, 0.17);
+  }
 `
 
 export class AlgoNode extends React.Component {
@@ -44,13 +52,13 @@ export class AlgoNode extends React.Component {
   render() {
     const { node } = this.props
     const data = node?.getData()
-    const { label, status = 'default', type, uri } = data
+    const { label, status = 'default' } = data
 
     return (
       <NodeWrapper>
         <div className={`node ${status}`}>
           <span className="label">{label}</span>
-          {type === 'work' && <span className="label">{uri}</span>}
+          {/* {type === 'work' && <span className="label uri">{uri}</span>} */}
         </div>
       </NodeWrapper>
     )

src/module/taskmgmt/component/TaskChartEditor.jsx

@@ -21,6 +21,7 @@ const EditorWrapper = styled.div`
   .task-stencil {
     width: 200px;
     position: relative;
+    border-right: 1px solid #c8d3e9;
   }
 
   .task-content {
@@ -44,11 +45,11 @@ const EditorWrapper = styled.div`
 
 const beginNodes = [
   {
-    id: '0',
     shape: 'task-node',
     height: 50,
     width: 180,
     data: {
+      id: '0',
       label: '开始',
       type: 'begin',
     },
@@ -61,12 +62,11 @@ const beginNodes = [
 // 作业节点
 const workNodes = [
   {
-    id: '1',
     shape: 'task-node',
     data: {
+      id: '1',
       label: '每日供应商销量预测作业',
       type: 'work',
-      uri: 'xxx.com:get_data',
     },
     ports: {
       items: [
@@ -76,12 +76,11 @@ const workNodes = [
     },
   },
   {
-    id: '2',
     shape: 'task-node',
     data: {
+      id: '2',
       label: 'HR材料周更新作业',
       type: 'work',
-      uri: 'xxx.com:update_data',
     },
     ports: {
       items: [
@@ -98,7 +97,7 @@ Graph.registerNode(
   {
     inherit: 'react-shape',
     width: 180,
-    height: 40,
+    height: 50,
     component: <AlgoNode />,
     ports: {
       groups: {
@@ -190,6 +189,7 @@ export default class TaskChartEditor extends React.Component {
   }
   //挂载
   componentDidMount() {
+    this.props.onRef(this)
     //创建图
     const graph = new Graph({
       //容器
@@ -358,7 +358,6 @@ export default class TaskChartEditor extends React.Component {
     })
     // 设置图
     this.setState({ taskGraph: graph })
-    console.log('2222', graph, this.state.taskGraph)
   }
 
   // 卸载

src/module/taskmgmt/component/TaskCreaterView.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Form, Select, Button, Space } from 'antd'
+import { Form, Select, Button, Space, message } from 'antd'
 import TaskForm from './TaskForm'
 import TaskChartEditor from './TaskChartEditor'
 import styled from 'styled-components'
@@ -43,16 +43,40 @@ const { Option } = Select
 const TaskCreaterView = () => {
   // 路由导航
   const navigate = useNavigate()
-
   const [taskType, setTaskType] = useState(null)
+  const [graphRef, setGraphRef] = useState(null)
   const [taskTypeForm] = Form.useForm()
   const [taskForm] = Form.useForm()
   const onTaskTypeChange = value => {
     setTaskType(value)
   }
   const onSubmit = () => {
-    navigate(-1)
+    const cells = graphRef?.state.taskGraph.getCells()
+    const taskFormData = taskForm.getFieldsValue()
+    taskForm
+      .validateFields()
+      .then(() => {
+        const params = {
+          name: taskFormData.taskName,
+          type: taskType === 'singleTask' ? '单作业离线任务' : '多作业离线任务',
+          tag: taskFormData.taskTag,
+          cron_type: taskFormData.executionCycle,
+          user_id: 'test',
+          user_name: 'test',
+          project_id: 'test',
+        }
+        console.log('###', cells, taskFormData, params)
+      })
+      .catch(err => {
+        message.error('请检查表单数据是否完整')
+      })
+    // navigate(-1)
+  }
+
+  const onGraphRef = ref => {
+    setGraphRef(ref)
   }
+
   return (
     <TaskCreater>
       <div className="tasktype_label">配置任务类型：</div>
@@ -75,7 +99,7 @@ const TaskCreaterView = () => {
       {taskType === 'multitasking' && (
         <div className="tasktype_label">作业编排：</div>
       )}
-      {taskType === 'multitasking' && <TaskChartEditor />}
+      {taskType === 'multitasking' && <TaskChartEditor onRef={onGraphRef} />}
       <Space className="tasktype_btns">
         <Button onClick={() => navigate(-1)}>取消</Button>
         <Button onClick={onSubmit}>提交</Button>

src/module/taskmgmt/component/TaskForm.jsx

@@ -33,6 +33,11 @@ const TaskForm = ({ taskForm, taskType }) => {
     setRadioValue(e.target.value)
   }
 
+  const onExecutionCycleNumChange = e => {
+    console.log(e.target.value, e)
+    taskForm.setFieldsValue({ ExecutionCycleNum: e.target.value })
+  }
+
   return (
     <FormWrapper>
       <Form {...layout} form={taskForm} className="singletask_form">
@@ -47,8 +52,8 @@ const TaskForm = ({ taskForm, taskType }) => {
           label="任务分类"
           rules={[{ required: true, message: '请选择任务分类!' }]}>
           <Select placeholder="选择任务分类" allowClear>
-            <Option value="1">业务预测</Option>
-            <Option value="2">监测</Option>
+            <Option value="业务预测">业务预测</Option>
+            <Option value="监测">监测</Option>
           </Select>
         </FormItem>
         {taskType !== 'multitasking' && (
@@ -74,7 +79,10 @@ const TaskForm = ({ taskForm, taskType }) => {
                 {radioValue === 2 ? (
                   <Space className="form_executionCycle">
                     <span>每</span>
-                    <input />
+                    <input
+                      style={{ width: '50px' }}
+                      onChange={onExecutionCycleNumChange}
+                    />
                     <Select placeholder="选择数" allowClear>
                       <Option value="min">分</Option>
                       <Option value="hour">时</Option>