feat: 任务管理列表

src/module/taskmgmt/component/TaskCreaterView.jsx

@@ -1,7 +1,73 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { Form, Select } from 'antd'
+import TaskForm from './TaskForm'
+import styled from 'styled-components'
+
+const TaskCreater = styled.div`
+  margin: 20px;
+  background: #fff;
+  height: 100%;
+  padding: 15px 25px;
+  .tasktype_label {
+    padding-left: 12px;
+    border-left: 3px solid #1881da;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #4a4a4a;
+    line-height: 20px;
+    letter-spacing: 1px;
+  }
+  .tasktype_form {
+    margin-top: 20px;
+  }
+`
+
+const layout = {
+  labelCol: {
+    span: 2,
+  },
+  wrapperCol: {
+    span: 8,
+  },
+}
+
+const FormItem = Form.Item
+const { Option } = Select
 
 const TaskCreaterView = () => {
-  return <div>11</div>
+  const [taskType, setTaskType] = useState(null)
+  const [taskTypeForm] = Form.useForm()
+  const [singleTaskForm] = Form.useForm()
+  const onTaskTypeChange = value => {
+    setTaskType(value)
+    console.log(
+      value,
+      singleTaskForm.getFieldValue(),
+      taskTypeForm.getFieldValue()
+    )
+  }
+  return (
+    <TaskCreater>
+      <div className="tasktype_label">配置任务类型：</div>
+      <Form {...layout} form={taskTypeForm} className="tasktype_form">
+        <FormItem
+          name="taskType"
+          label="选择任务类型"
+          rules={[{ required: true, message: '请选择任务类型!' }]}>
+          <Select
+            placeholder="选择任务类型"
+            onChange={onTaskTypeChange}
+            allowClear>
+            <Option value="singleTask">单作业离线任务</Option>
+            <Option value="multitasking">多作业离线任务</Option>
+          </Select>
+        </FormItem>
+      </Form>
+      <div className="tasktype_label">配置任务信息：</div>
+      <TaskForm singleTaskForm={singleTaskForm} taskType={taskType} />
+    </TaskCreater>
+  )
 }
 
 export default TaskCreaterView

src/module/taskmgmt/component/TaskForm.jsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Form, Select, Input, Radio, Space } from 'antd'
+
+const FormWrapper = styled.div`
+  .singletask_form {
+    margin-top: 20px;
+  }
+  .form_executionCycle {
+    margin-left: 10px;
+  }
+`
+
+const FormItem = Form.Item
+
+const { Option } = Select
+
+const RadioGroup = Radio.Group
+
+const layout = {
+  labelCol: {
+    span: 2,
+  },
+  wrapperCol: {
+    span: 8,
+  },
+}
+
+const TaskForm = ({ taskForm, taskType }) => {
+  const [radioValue, setRadioValue] = useState(null)
+
+  const onRadioChange = e => {
+    setRadioValue(e.target.value)
+  }
+
+  return (
+    <FormWrapper>
+      <Form {...layout} form={taskForm} className="singletask_form">
+        <FormItem
+          name="taskName"
+          label="任务名称"
+          rules={[{ required: true, message: '请输入任务名称!' }]}>
+          <Input />
+        </FormItem>
+        <FormItem
+          name="taskTag"
+          label="任务分类"
+          rules={[{ required: true, message: '请选择任务分类!' }]}>
+          <Select placeholder="选择任务分类" allowClear>
+            <Option value="1">业务预测</Option>
+            <Option value="2">监测</Option>
+          </Select>
+        </FormItem>
+        {taskType !== 'multitasking' && (
+          <FormItem
+            name="job"
+            label="选择作业"
+            rules={[{ required: true, message: '请选择作业!' }]}>
+            <Select placeholder="选择作业" allowClear>
+              <Option value="1">作业1</Option>
+              <Option value="2">作业2</Option>
+            </Select>
+          </FormItem>
+        )}
+        <FormItem
+          name="executionCycle"
+          label="设置执行周期"
+          rules={[{ required: true, message: '请设置执行周期!' }]}>
+          <RadioGroup onChange={onRadioChange}>
+            <Space direction="vertical">
+              <Radio value={1}>只执行一次，下次手动执行</Radio>
+              <Radio value={2}>
+                执行周期
+                {radioValue === 2 ? (
+                  <Space className="form_executionCycle">
+                    <span>每</span>
+                    <input />
+                    <Select placeholder="选择数" allowClear>
+                      <Option value="min">分</Option>
+                      <Option value="hour">时</Option>
+                      <Option value="day">日</Option>
+                      <Option value="week">周</Option>
+                      <Option value="month">月</Option>
+                    </Select>
+                    <span>执行1次</span>
+                  </Space>
+                ) : null}
+              </Radio>
+            </Space>
+          </RadioGroup>
+        </FormItem>
+      </Form>
+    </FormWrapper>
+  )
+}
+
+export default TaskForm