feat: 作业模块代码修改

src/module/workmgmt/component/JobCreate.jsx

@@ -1,21 +1,30 @@
-import { Button, Form, Input, Select, Radio, Space, Upload, Steps, message, Divider } from 'antd';
-import type { RadioChangeEvent} from 'antd';
-import type { UploadProps } from 'antd';
-import { UploadOutlined, PlusOutlined } from '@ant-design/icons';
-import React, { useState , Component, useEffect, useRef, props } from 'react';
-import styled from 'styled-components';
-import JobStepOne from './JobStepOne';
-import JobStepTwo from './JobStepTwo';
-import JobStepThree from './JobStepThree';
+import {
+  Button,
+  Form,
+  Input,
+  Select,
+  Radio,
+  Space,
+  Upload,
+  Steps,
+  message,
+  Divider,
+} from 'antd'
+import { UploadOutlined, PlusOutlined } from '@ant-design/icons'
+import React, { useState, Component, useEffect, useRef, props } from 'react'
+import styled from 'styled-components'
+import JobStepOne from './JobStepOne'
+import JobStepTwo from './JobStepTwo'
+import JobStepThree from './JobStepThree'
 import { useNavigate } from 'react-router'
 import bus from '../../../bus.js'
 import { getJobTypes, createJob } from '../services'
 
-
-const JobCre = styled.div``
+const JobCre = styled.div`
+  padding: 20px;
+`
 const CreContent = styled.div`
-  background-color: #FFFFFF;
-  height: 960px;
+  background-color: #ffffff;
   margin-left: 24px;
   .ant-form {
     display: flex;
@@ -34,7 +43,7 @@ const CreContent = styled.div`
     margin-left: 15px;
     display: flex;
   }
-  .bluetTitle { 
+  .bluetTitle {
     background-color: rgba(24, 129, 218, 1);
     width: 3px;
     height: 16px;
@@ -43,7 +52,7 @@ const CreContent = styled.div`
   }
   .creText {
     width: 105px;
-    height: 20px;    
+    height: 20px;
     margin-left: 10px;
     overflow-wrap: break-word;
     color: rgba(74, 74, 74, 1);
@@ -64,40 +73,41 @@ const CreContent = styled.div`
     top: 36%;
     padding-left: 7px;
     height: 20px;
-    border-left: 1px solid
+    border-left: 1px solid;
   }
   .ant-col {
     flex: unset;
   }
-   
+
   .ant-select {
     width: 295px;
     height: 32px;
   }
   .ant-form-item-control-input {
-    width:295px;
+    width: 295px;
   }
   .ant-row {
     margin-left: 60px;
   }
   .JaPyInfo {
-    width:464px;
+    width: 464px;
     .ant-form {
       align-content: end;
     }
     .choseJa {
       .ant-row {
         margin-left: 43px;
-      },
+      }
+      ,
       .ant-form-item-control-input {
-      left: 11px;
-    }
-    .upButton {
-      width: 88px;
-      height: 32px;
-      margin-left: 7px;
-      background-color: #4883FB;
-      color: white;
+        left: 11px;
+      }
+      .upButton {
+        width: 88px;
+        height: 32px;
+        margin-left: 7px;
+        background-color: #4883fb;
+        color: white;
       }
     }
     .JaPySubmit {
@@ -106,14 +116,14 @@ const CreContent = styled.div`
       .Submit {
         margin-left: 20px;
         .ant-btn {
-          color: #1881DA;
-          border-color: #1881DA;
+          color: #1881da;
+          border-color: #1881da;
         }
       }
       .Cancel {
         .ant-btn {
-          color: #1881DA;
-          border-color: #1881DA;
+          color: #1881da;
+          border-color: #1881da;
         }
       }
     }
@@ -139,14 +149,14 @@ const CreContent = styled.div`
       margin-left: 67px;
     }
     .ant-steps-label-vertical .ant-steps-item-content {
-      width:220px
+      width: 220px;
     }
   }
-  `
+`
 
-const { Option } = Select;
+const { Option } = Select
 const FormItem = Form.Item
-const RadioGroup = Radio.Group;
+const RadioGroup = Radio.Group
 
 const layout = {
   labelCol: {
@@ -155,35 +165,33 @@ const layout = {
   wrapperCol: {
     span: 16,
   },
-};
+}
 const tailLayout = {
   wrapperCol: {
     offset: 8,
     span: 16,
   },
-};
-export default function JobCreate (props) {
-  // 设置背景颜色
-  document.body.style.background = '#F0F2F5'
-  const [form] = Form.useForm();
-  const { Step } = Steps 
+}
+export default function JobCreate(props) {
+  const [form] = Form.useForm()
+  const { Step } = Steps
   // 路由导航
   const navigate = useNavigate()
   // 显示/隐藏配置Ja作业信息模块
-  const [JaIsShow,setJaIsShow]=useState('none')
+  const [JaIsShow, setJaIsShow] = useState('none')
 
   // 显示/隐藏配置Python作业信息模块
-  const [PyIsShow,setPyIsShow]=useState('none')
+  const [PyIsShow, setPyIsShow] = useState('none')
 
   // 显示/隐藏配置Dag作业信息模块
-  const [DagIsShow,setDagIsShow]=useState('none')
+  const [DagIsShow, setDagIsShow] = useState('none')
 
   // 单选框动态传值
-  const [value, setValue] = useState(1);
+  const [value, setValue] = useState(1)
 
   // 步骤数
   const [currentStep, setCurrentStep] = useState(0)
-  
+
   //作业类型
   const [jobTypeOptions, setJobTypeOptions] = useState()
 
@@ -196,52 +204,52 @@ export default function JobCreate (props) {
   const [InputDataForm] = Form.useForm()
   //dag第三步表单数据
   const [OutputDataForm] = Form.useForm()
- 
+
   //当前表单数据
   const [currentForm, setCurrentForm] = useState(ConfigDataForm)
-  
+
   //java表单数据
   const [JavaDataForm] = Form.useForm()
   //python表单数据
   const [PythonDataForm] = Form.useForm()
-  
+
   //当前选择的作业类型
   const [currentJobType, setCurrentJobType] = useState('')
-  
-  const JobTagInputRef = useRef(null);
 
-  const [tagName, setTagName] = useState('');
-  
+  const JobTagInputRef = useRef(null)
+
+  const [tagName, setTagName] = useState('')
+
   const [dagData, setDagData] = useState()
 
   //动态改变作业分类的值
-  const onNameChange = (event) => {
-    setTagName(event.target.value);
-  };
+  const onNameChange = event => {
+    setTagName(event.target.value)
+  }
 
   //添加自定义作业分类
-  const addTagItem = (e) => {
+  const addTagItem = e => {
     if (tagName) {
-      console.log(tagName);
-      e.preventDefault();
-      setJobTags([...jobTags,tagName])
+      console.log(tagName)
+      e.preventDefault()
+      setJobTags([...jobTags, tagName])
       setTagName('')
       setTimeout(() => {
-        JobTagInputRef.current?.focus();
-      }, 0);
+        JobTagInputRef.current?.focus()
+      }, 0)
     } else {
       message.error('请输入自定义作业分类名称')
     }
-  };
+  }
 
   // 设置单选框value值
-  const onChange = (e) => {
-    console.log('radio checked', e.target.value);
-    setValue(e.target.value);
-  };
-  
+  const onChange = e => {
+    console.log('radio checked', e.target.value)
+    setValue(e.target.value)
+  }
+
   //上传文件配置
-  const UpProps: UploadProps = {
+  const UpProps = {
     name: 'file',
     action: '',
     headers: {
@@ -251,34 +259,31 @@ export default function JobCreate (props) {
     // 上传文件提交状态
     onChange(info) {
       if (info.file.status !== 'uploading') {
-        console.log(info.file, info.fileList);
+        console.log(info.file, info.fileList)
       }
       if (info.file.status === 'done') {
-        message.success(`${info.file.name} file uploaded successfully`);
+        message.success(`${info.file.name} file uploaded successfully`)
       } else if (info.file.status === 'error') {
-        message.error(`${info.file.name} file upload failed.`);
+        message.error(`${info.file.name} file upload failed.`)
       }
     },
-  };
+  }
 
   //根据作业类型做出判断
-  const onGenderChange = (value) => {
-    if (value === "java") {
+  const onGenderChange = value => {
+    if (value === 'java') {
       setJaIsShow('block')
       setDagIsShow('none')
-      setPyIsShow('none') 
+      setPyIsShow('none')
       setCurrentJobType('Java')
       setCurrentForm(JavaDataForm)
-    }
-    else if (value === "python") {
+    } else if (value === 'python') {
       setJaIsShow('none')
       setDagIsShow('none')
       setPyIsShow('block')
       setCurrentJobType('Python')
       setCurrentForm(PythonDataForm)
-
-    }
-    else if (value === "DAG") {
+    } else if (value === 'DAG') {
       setJaIsShow('none')
       setDagIsShow('block')
       setPyIsShow('none')
@@ -294,32 +299,42 @@ export default function JobCreate (props) {
 
   //提交DAG
   const DagSubmit = async () => {
-    const data =  await createJob({...ConfigDataForm.getFieldValue(),'script_file': '', 'type': currentJobType, 'dag_uuid': 'test', 'user_id': 'test', 'project_id': 'test', 'image_url': 'test', 'relation_list': []})
+    const data = await createJob({
+      ...ConfigDataForm.getFieldValue(),
+      script_file: '',
+      type: currentJobType,
+      dag_uuid: 'test',
+      user_id: 'test',
+      project_id: 'test',
+      image_url: 'test',
+      relation_list: [],
+    })
   }
 
   //下一步
   const nextStep = () => {
-    currentForm.validateFields().then(() => {
+    currentForm
+      .validateFields()
+      .then(() => {
         // finishSubmit()
         changeStep(1)
-        console.log('Successfully');
-
+        console.log('Successfully')
       })
-      .catch(err => { 
-        console.log(err,currentForm.getFieldValue());
+      .catch(err => {
+        console.log(err, currentForm.getFieldValue())
         message.error('请检查表单数据是否完整')
       })
     if (currentStep === 2) {
       DagSubmit()
       navigate(-1)
-    } 
+    }
   }
 
   useEffect(() => {
     switch (currentStep) {
       case 0:
         setCurrentForm(ConfigDataForm)
-        console.log(ConfigDataForm.getFieldValue());
+        console.log(ConfigDataForm.getFieldValue())
         break
       case 1:
         setCurrentForm(InputDataForm)
@@ -331,441 +346,411 @@ export default function JobCreate (props) {
         break
     }
     getJobType()
-      bus.on('DAGSend', data => {
-      console.log('-----------09090---------------------');
-      console.log(data);
+    bus.on('DAGSend', data => {
+      console.log('-----------09090---------------------')
+      console.log(data)
       setDagData(data)
     })
-    bus.emit('DAGSend',dagData)
-  },[currentStep])
-  
+    bus.emit('DAGSend', dagData)
+  }, [currentStep])
+
   //获取作业类型和分类
   const getJobType = async () => {
-      const JobTypes = await getJobTypes('作业类型')
-      const JobTags = await getJobTypes('作业分类')
-      if (JobTypes.data.length !== 0) {
-      setJobTypeOptions(JobTypes.data.data.map(item => {
-        return {
-          label: item,
-          value: item
-        }
-      }))
+    const JobTypes = await getJobTypes('作业类型')
+    const JobTags = await getJobTypes('作业分类')
+    if (JobTypes.data.length !== 0) {
+      setJobTypeOptions(
+        JobTypes.data.data.map(item => {
+          return {
+            label: item,
+            value: item,
+          }
+        })
+      )
       setJobTags(JobTags.data.data)
     }
-    }
+  }
 
-    const finishSubmit = async () => {
-      console.log(currentForm.getFieldValue());
-      const params = {...currentForm.getFieldValue(), 'type': currentJobType, 'dag_uuid': 'test', 'user_id': 'test', 'project_id': 'test', 'dag_url': 'test', 'image_url': 'test', 'relation_list': []}
-      console.log(params);
-      await createJob(params)
-      navigate(-1)
+  const finishSubmit = async () => {
+    console.log(currentForm.getFieldValue())
+    const params = {
+      ...currentForm.getFieldValue(),
+      type: currentJobType,
+      dag_uuid: 'test',
+      user_id: 'test',
+      project_id: 'test',
+      dag_url: 'test',
+      image_url: 'test',
+      relation_list: [],
     }
+    console.log(params)
+    await createJob(params)
+    navigate(-1)
+  }
 
-    //java or python提交
-    const JaPySubmit = () => {
-      console.log(currentJobType)
-      const Jay = JavaDataForm.getFieldValue()
-      currentForm.validateFields().then(() => {
-        console.log(currentForm.getFieldValue());
+  //java or python提交
+  const JaPySubmit = () => {
+    console.log(currentJobType)
+    const Jay = JavaDataForm.getFieldValue()
+    currentForm
+      .validateFields()
+      .then(() => {
+        console.log(currentForm.getFieldValue())
         finishSubmit()
-        console.log('Successfully');
-
+        console.log('Successfully')
       })
-      .catch(err => { 
+      .catch(err => {
         message.error('请检查表单数据是否完整')
-        console.log(err);
+        console.log(err)
       })
-      // bus.emit('sendDataForm',{
-      //   Jay,
-      // })
-    }
+    // bus.emit('sendDataForm',{
+    //   Jay,
+    // })
+  }
   const cancel = () => {
     navigate(-1)
   }
   return (
     <JobCre>
-      <div>
-        <header  style={{ 
-        height: '40px', 
-        fontSize: '14px',
-        paddingLeft: '24px',
-        lineHeight: '40px',
-        backgroundColor: 'white',
-        marginBottom: '16px',
-        }}>
-          <span>
-            作业列表
-          </span>
-        </header>
-      </div>
-    <CreContent>
-    <div className="choseJob">
-      <div className='creTitle'>
-        <div className='bluetTitle' />
-        <span className='creText'>配置作业类型</span>
-      </div>
-
-      {/* 作业类型选择       */}
-      <Form {...layout} form={form} name="control-hooks" >
-      <FormItem
-        name="type
+      <CreContent>
+        <div className="choseJob">
+          <div className="creTitle">
+            <div className="bluetTitle" />
+            <span className="creText">配置作业类型</span>
+          </div>
+
+          {/* 作业类型选择       */}
+          <Form {...layout} form={form} name="control-hooks">
+            <FormItem
+              name="type
         "
-        label="选择作业类型"
-        rules={[
-          {
-            required: true,
-          },
-        ]}
-      >
-        <Select
-          placeholder="请选择作业类型..."
-          onSelect={onGenderChange}
-          value = {value}
-          options={jobTypeOptions}
-        />
-      </FormItem>
-    </Form>   
-    </div>
-    <div className="DagInfo" style={{display: DagIsShow}}>
-      <Steps labelPlacement="vertical" size="small" current={currentStep}>
-        <Step title="步骤1: 配置作业信息" />
-        <Step title="步骤2: 定义输入数据源" />
-        <Step title="步骤3: 定义输出数据源" />
-      </Steps>
-      <div className='creTitle'>
-        <div className='bluetTitle' />
-        <span className='creText'>配置作业信息</span>
-      </div>  
-
-      {/* 配置Dag作业信息 */}
-
-      {/* 第一步 */}
-      {currentStep === 0 && (
-        <JobStepOne
-          ConfigDataForm={ConfigDataForm}
-        />
-      )}
-
-      {/* 第二步 */}
-      {currentStep === 1 && (
-        <JobStepTwo
-          InputDataForm={InputDataForm}
-        />
-      )}
-
-      {/* 第三步 */}
-      {currentStep === 2 && (
-        <JobStepThree
-          OutputDataForm={OutputDataForm}
-        />
-      )}
-
-    <Space style={{ margin: '20px' }}>
-      <Button onClick={
-        () => {
-          if (currentStep !== 0) {
-            changeStep(-1)
-          } else {
-            navigate(-1)
-          }
-        }}
-        >{currentStep === 0 ? '取消' : '上一步'}</Button>
-      <Button type="primary" onClick={nextStep}>{currentStep === 2 ? '提交' : '下一步'}</Button>
-    </Space>
-    </div>
-    
-
-    {/* 配置Java作业信息 */}
-    <div className="JaPyInfo" style={{display: JaIsShow}}>
-      <div className='creTitle'>
-        <div className='bluetTitle' />
-        <span className='creText'>配置作业信息</span>
-      </div>  
-
-      {/* 输入作业名称 */}
-      <Form {...layout} form={JavaDataForm} name="control-hooks" >
-      <FormItem
-        name="name"
-        label="作业名称"
-        className="JobName"
-        rules={[
-          {
-            required: true,
-            message: '请输入作业名称'
-          },
-        ]}
-      >
-        <Input
-          placeholder="请输入作业名称..."
-          allowClear
-        >
-        </Input>
-      </FormItem>
-
-    {/* 选择作业分类 */}
-      <FormItem
-        shouldUpdate
-        name="tag"
-        label="作业分类"
-        className="JobName"
-        rules={[
-          {
-            required: true,
-            message: '请选择作业分类',
-          },
-        ]}
-      >
-        <Select
-          placeholder="请选择作业分类..."
-          allowClear
-          dropdownRender={(menu) => (
-        <>
-          {menu}
-          <Divider
-            style={{
-              margin: '8px 0',
-            }}
-          />
-          <Space
-            style={{
-              padding: '0 8px 4px',
-            }}
-          >
-            <Input
-              placeholder="添加作业分类"
-              ref={JobTagInputRef}
-              value={tagName}
-              onChange={onNameChange}
-            />
-            <Button type="text" icon={<PlusOutlined />} onClick={addTagItem}>
-              添加分类
+              label="选择作业类型"
+              rules={[
+                {
+                  required: true,
+                },
+              ]}>
+              <Select
+                placeholder="请选择作业类型..."
+                onSelect={onGenderChange}
+                value={value}
+                options={jobTypeOptions}
+              />
+            </FormItem>
+          </Form>
+        </div>
+        <div className="DagInfo" style={{ display: DagIsShow }}>
+          <Steps labelPlacement="vertical" size="small" current={currentStep}>
+            <Step title="步骤1: 配置作业信息" />
+            <Step title="步骤2: 定义输入数据源" />
+            <Step title="步骤3: 定义输出数据源" />
+          </Steps>
+          <div className="creTitle">
+            <div className="bluetTitle" />
+            <span className="creText">配置作业信息</span>
+          </div>
+
+          {/* 配置Dag作业信息 */}
+
+          {/* 第一步 */}
+          {currentStep === 0 && <JobStepOne ConfigDataForm={ConfigDataForm} />}
+
+          {/* 第二步 */}
+          {currentStep === 1 && <JobStepTwo InputDataForm={InputDataForm} />}
+
+          {/* 第三步 */}
+          {currentStep === 2 && (
+            <JobStepThree OutputDataForm={OutputDataForm} />
+          )}
+
+          <Space style={{ margin: '20px' }}>
+            <Button
+              onClick={() => {
+                if (currentStep !== 0) {
+                  changeStep(-1)
+                } else {
+                  navigate(-1)
+                }
+              }}>
+              {currentStep === 0 ? '取消' : '上一步'}
             </Button>
-          </Space>
-        </>
-      )}
-        >
-        {jobTags.map((item) => (
-          <Option key={item}>{item}</Option>
-          ))
-        }
-        </Select>
-      </FormItem>
-
-    {/* 选择执行镜像 */}
-      <FormItem
-        className='mirrorLeft MMir'
-        name="dag_url"
-        label="配置执行的镜像"
-        rules={[
-          {
-            required: true,
-            message: '请选择配置执行的镜像',
-          },
-        ]}
-      >
-        <Select
-          placeholder="请选择镜像..."
-          allowClear
-        >
-          <Option value="/test/images/example">/test/images/example</Option>
-        </Select>
-      </FormItem>
-
-    {/* 选择执行的Java脚本 */}
-      <FormItem
-        className='mirrorLeft choseJa script_file'
-        label="配置执行的Java脚本"
-        name="script_file"
-        rules={[
-          {
-            required: true,
-            message: '请选择配置执行的Java脚本',
-          },
-        ]}
-      >
-      <RadioGroup onChange={onChange} value={value}>
-      <Space direction="vertical" className='jsSel'>
-        <Radio value={'fromList'}>
-        <Select
-          placeholder="在工作目录中选择"
-          allowClear
-          className='javaSelect'
-          disabled={value === 'fromList' ? false : true}
-        >
-          <Option value="/test/scripts/example">/test/scripts/example</Option>
-        </Select>
-        </Radio>
-        
-        <Radio value={'fromLocal'}>
-          <Upload {...UpProps}>
-            <Button 
-            disabled={value === 'fromLocal' ? false : true}
-            className='upButton'>
-            本地上传
-            </Button>
-          </Upload>
-        </Radio>
-      </Space>
-    </RadioGroup>
-    </FormItem>
-    <FormItem>
-    <div className="JaPySubmit">
-      <div className="Cancel">
-        <Button onClick={cancel}>取消</Button>
-      </div>
-      <div className="Submit">
-        <Button onClick={JaPySubmit}>提交</Button>
-      </div>
-    </div>
-    </FormItem>
-    </Form>
-    
-    
-    </div>
-    
-    {/* 配置Python作业信息 */}
-    <div className="JaPyInfo" style={{display: PyIsShow}}>
-      <div className='creTitle'>
-        <div className='bluetTitle' />
-        <span className='creText'>配置作业信息</span>
-      </div>  
-
-      {/* 输入作业名称 */}
-      <Form {...layout} form={PythonDataForm} name="control-hooks" >
-      <FormItem
-        name="name"
-        label="作业名称"
-        className="JobName"
-        rules={[
-          {
-            required: true,
-            message: '请输入作业名称'
-          },
-        ]}
-      >
-        <Input
-          placeholder="请输入作业名称..."
-          allowClear
-        >
-        </Input>
-      </FormItem>
-    {/* 选择作业分类 */}
-      <FormItem
-        name="tag"
-        label="作业分类"
-        className='JobName'
-        rules={[
-          {
-            required: true,
-            message: '请选则作业分类'
-          },
-        ]}
-      >
-        <Select
-          placeholder="请选择作业分类..."
-          allowClear
-          dropdownRender={(menu) => (
-        <>
-        {menu}
-          <Divider
-            style={{
-              margin: '8px 0',
-            }}
-          />
-          <Space
-            style={{
-              padding: '0 8px 4px',
-            }}
-          >
-            <Input
-              placeholder="添加作业分类"
-              ref={JobTagInputRef}
-              value={tagName}
-              onChange={onNameChange}
-            />
-            <Button type="text" icon={<PlusOutlined />} onClick={addTagItem}>
-              添加分类
+            <Button type="primary" onClick={nextStep}>
+              {currentStep === 2 ? '提交' : '下一步'}
             </Button>
           </Space>
-        </>
-      )}
-        >
-        {jobTags.map((item) => (
-          <Option key={item}>{item}</Option>
-          ))
-        }
-        </Select>
-      </FormItem>
-    {/* 选择执行镜像 */}
-      <FormItem
-        className='mirrorLeft MMir'
-        name="dag_url "
-        label="配置执行的镜像"
-        rules={[
-          {
-            required: true,
-            message: '请配置执行的镜像'
-          },
-        ]}
-      >
-        <Select
-          placeholder="请选择镜像..."
-          allowClear
-        >
-          <Option value="test">test</Option>
-        </Select>
-      </FormItem>
-
-    {/* 选择执行的Java脚本 */}
-      <FormItem
-        className='mirrorLeft choseJa script_file'
-        label="配置执行的Java脚本"
-        name="script_file"
-        rules={[
-          {
-            required: true,
-            message: '请配置执行的Java脚本'
-          },
-        ]}
-      >
-      <RadioGroup onChange={onChange} value={value} className='PyScript_file'>
-      <Space direction="vertical">
-        <Radio value={'fromList'}>
-        <Select
-          placeholder="在工作目录中选择"
-          allowClear
-          className='javaSelect'
-          disabled={value === 'fromList' ? false : true}
-        >
-          <Option value="test">test</Option>
-        </Select>
-        </Radio>
-        <Radio value={'fromLocal'}>
-          <Upload {...UpProps}>
-            <Button  
-            className='upButton'
-            disabled={value === 'fromLocal' ? false : true}>
-            本地上传
-            </Button>
-          </Upload>
-        </Radio>
-      </Space>
-      </RadioGroup>
-      </FormItem>
-      <FormItem>
-    <div className="JaPySubmit">
-      <div className="Cancel">
-        <Button onClick={cancel}>取消</Button>
-      </div>
-      <div className="Submit">
-        <Button onClick={JaPySubmit}>提交</Button>
-      </div>
-    </div>
-    </FormItem>
-    </Form>
-    </div>     
-    </CreContent>
-  </JobCre>
-  );
-};
+        </div>
+
+        {/* 配置Java作业信息 */}
+        <div className="JaPyInfo" style={{ display: JaIsShow }}>
+          <div className="creTitle">
+            <div className="bluetTitle" />
+            <span className="creText">配置作业信息</span>
+          </div>
+
+          {/* 输入作业名称 */}
+          <Form {...layout} form={JavaDataForm} name="control-hooks">
+            <FormItem
+              name="name"
+              label="作业名称"
+              className="JobName"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入作业名称',
+                },
+              ]}>
+              <Input placeholder="请输入作业名称..." allowClear></Input>
+            </FormItem>
+
+            {/* 选择作业分类 */}
+            <FormItem
+              shouldUpdate
+              name="tag"
+              label="作业分类"
+              className="JobName"
+              rules={[
+                {
+                  required: true,
+                  message: '请选择作业分类',
+                },
+              ]}>
+              <Select
+                placeholder="请选择作业分类..."
+                allowClear
+                dropdownRender={menu => (
+                  <>
+                    {menu}
+                    <Divider
+                      style={{
+                        margin: '8px 0',
+                      }}
+                    />
+                    <Space
+                      style={{
+                        padding: '0 8px 4px',
+                      }}>
+                      <Input
+                        placeholder="添加作业分类"
+                        ref={JobTagInputRef}
+                        value={tagName}
+                        onChange={onNameChange}
+                      />
+                      <Button
+                        type="text"
+                        icon={<PlusOutlined />}
+                        onClick={addTagItem}>
+                        添加分类
+                      </Button>
+                    </Space>
+                  </>
+                )}>
+                {jobTags.map(item => (
+                  <Option key={item}>{item}</Option>
+                ))}
+              </Select>
+            </FormItem>
+
+            {/* 选择执行镜像 */}
+            <FormItem
+              className="mirrorLeft MMir"
+              name="dag_url"
+              label="配置执行的镜像"
+              rules={[
+                {
+                  required: true,
+                  message: '请选择配置执行的镜像',
+                },
+              ]}>
+              <Select placeholder="请选择镜像..." allowClear>
+                <Option value="/test/images/example">
+                  /test/images/example
+                </Option>
+              </Select>
+            </FormItem>
+
+            {/* 选择执行的Java脚本 */}
+            <FormItem
+              className="mirrorLeft choseJa script_file"
+              label="配置执行的Java脚本"
+              name="script_file"
+              rules={[
+                {
+                  required: true,
+                  message: '请选择配置执行的Java脚本',
+                },
+              ]}>
+              <RadioGroup onChange={onChange} value={value}>
+                <Space direction="vertical" className="jsSel">
+                  <Radio value={'fromList'}>
+                    <Select
+                      placeholder="在工作目录中选择"
+                      allowClear
+                      className="javaSelect"
+                      disabled={value === 'fromList' ? false : true}>
+                      <Option value="/test/scripts/example">
+                        /test/scripts/example
+                      </Option>
+                    </Select>
+                  </Radio>
+
+                  <Radio value={'fromLocal'}>
+                    <Upload {...UpProps}>
+                      <Button
+                        disabled={value === 'fromLocal' ? false : true}
+                        className="upButton">
+                        本地上传
+                      </Button>
+                    </Upload>
+                  </Radio>
+                </Space>
+              </RadioGroup>
+            </FormItem>
+            <FormItem>
+              <div className="JaPySubmit">
+                <div className="Cancel">
+                  <Button onClick={cancel}>取消</Button>
+                </div>
+                <div className="Submit">
+                  <Button onClick={JaPySubmit}>提交</Button>
+                </div>
+              </div>
+            </FormItem>
+          </Form>
+        </div>
+
+        {/* 配置Python作业信息 */}
+        <div className="JaPyInfo" style={{ display: PyIsShow }}>
+          <div className="creTitle">
+            <div className="bluetTitle" />
+            <span className="creText">配置作业信息</span>
+          </div>
+
+          {/* 输入作业名称 */}
+          <Form {...layout} form={PythonDataForm} name="control-hooks">
+            <FormItem
+              name="name"
+              label="作业名称"
+              className="JobName"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入作业名称',
+                },
+              ]}>
+              <Input placeholder="请输入作业名称..." allowClear></Input>
+            </FormItem>
+            {/* 选择作业分类 */}
+            <FormItem
+              name="tag"
+              label="作业分类"
+              className="JobName"
+              rules={[
+                {
+                  required: true,
+                  message: '请选则作业分类',
+                },
+              ]}>
+              <Select
+                placeholder="请选择作业分类..."
+                allowClear
+                dropdownRender={menu => (
+                  <>
+                    {menu}
+                    <Divider
+                      style={{
+                        margin: '8px 0',
+                      }}
+                    />
+                    <Space
+                      style={{
+                        padding: '0 8px 4px',
+                      }}>
+                      <Input
+                        placeholder="添加作业分类"
+                        ref={JobTagInputRef}
+                        value={tagName}
+                        onChange={onNameChange}
+                      />
+                      <Button
+                        type="text"
+                        icon={<PlusOutlined />}
+                        onClick={addTagItem}>
+                        添加分类
+                      </Button>
+                    </Space>
+                  </>
+                )}>
+                {jobTags.map(item => (
+                  <Option key={item}>{item}</Option>
+                ))}
+              </Select>
+            </FormItem>
+            {/* 选择执行镜像 */}
+            <FormItem
+              className="mirrorLeft MMir"
+              name="dag_url "
+              label="配置执行的镜像"
+              rules={[
+                {
+                  required: true,
+                  message: '请配置执行的镜像',
+                },
+              ]}>
+              <Select placeholder="请选择镜像..." allowClear>
+                <Option value="test">test</Option>
+              </Select>
+            </FormItem>
+
+            {/* 选择执行的Java脚本 */}
+            <FormItem
+              className="mirrorLeft choseJa script_file"
+              label="配置执行的Java脚本"
+              name="script_file"
+              rules={[
+                {
+                  required: true,
+                  message: '请配置执行的Java脚本',
+                },
+              ]}>
+              <RadioGroup
+                onChange={onChange}
+                value={value}
+                className="PyScript_file">
+                <Space direction="vertical">
+                  <Radio value={'fromList'}>
+                    <Select
+                      placeholder="在工作目录中选择"
+                      allowClear
+                      className="javaSelect"
+                      disabled={value === 'fromList' ? false : true}>
+                      <Option value="test">test</Option>
+                    </Select>
+                  </Radio>
+                  <Radio value={'fromLocal'}>
+                    <Upload {...UpProps}>
+                      <Button
+                        className="upButton"
+                        disabled={value === 'fromLocal' ? false : true}>
+                        本地上传
+                      </Button>
+                    </Upload>
+                  </Radio>
+                </Space>
+              </RadioGroup>
+            </FormItem>
+            <FormItem>
+              <div className="JaPySubmit">
+                <div className="Cancel">
+                  <Button onClick={cancel}>取消</Button>
+                </div>
+                <div className="Submit">
+                  <Button onClick={JaPySubmit}>提交</Button>
+                </div>
+              </div>
+            </FormItem>
+          </Form>
+        </div>
+      </CreContent>
+    </JobCre>
+  )
+}

src/module/workmgmt/component/JobItems.jsx

@@ -1,39 +1,43 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { Button, Form, Input, message, Popconfirm, Table } from 'antd';
-import React, { useContext, useEffect, useRef, useState, props, useRoutes } from 'react';
+import { Button, Form, Input, message, Popconfirm, Table } from 'antd'
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  props,
+  useRoutes,
+} from 'react'
 import styled from 'styled-components'
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom'
 import bus from '../../../bus.js'
-import { getJobDataList, deleteJob, getJobInfo  } from '../services'
-import {routes} from '../../../routes/index.js'
-const EditableContext = React.createContext(null);
+import { getJobDataList, deleteJob, getJobInfo } from '../services'
+import { routes } from '../../../routes/index.js'
+const EditableContext = React.createContext(null)
 const FormItem = Form.Item
 
 const JobItems = styled.div`
-  background-color: #FFFFFF;
-  height: 45vw;
-  margin-left: 24px;
+  background-color: #ffffff;
   .delButton {
-  margin-left: 40px;
+    margin-left: 40px;
   }
   .ant-table-wrapper {
-  margin-right: 12px;
-  .ant-table {
-  margin-left: 16px;
+    margin-right: 12px;
+    .ant-table {
+      margin-left: 16px;
     }
   }
-  
-  `
+`
 const EditableRow = ({ index, ...props }) => {
-  const [form] = Form.useForm();
+  const [form] = Form.useForm()
   return (
     <Form form={form} component={false}>
       <EditableContext.Provider value={form}>
         <tr {...props} />
       </EditableContext.Provider>
     </Form>
-  );
-};
+  )
+}
 
 const EditableCell = ({
   title,
@@ -44,33 +48,33 @@ const EditableCell = ({
   handleSave,
   ...restProps
 }) => {
-  const [editing, setEditing] = useState(false);
-  const inputRef = useRef(null);
-  const form = useContext(EditableContext);
+  const [editing, setEditing] = useState(false)
+  const inputRef = useRef(null)
+  const form = useContext(EditableContext)
   useEffect(() => {
     if (editing) {
-      inputRef.current.focus();
+      inputRef.current.focus()
     }
-  }, [editing]);
+  }, [editing])
 
   const toggleEdit = () => {
-    setEditing(!editing);
+    setEditing(!editing)
     form.setFieldsValue({
       [dataIndex]: record[dataIndex],
-    });
-  };
+    })
+  }
 
   const save = async () => {
     try {
-      const values = await form.validateFields();
-      toggleEdit();
-      handleSave({ ...record, ...values });
+      const values = await form.validateFields()
+      toggleEdit()
+      handleSave({ ...record, ...values })
     } catch (errInfo) {
-      console.log('Save failed:', errInfo);
+      console.log('Save failed:', errInfo)
     }
-  };
+  }
 
-  let childNode = children;
+  let childNode = children
 
   if (editable) {
     childNode = editing ? (
@@ -84,8 +88,7 @@ const EditableCell = ({
             required: true,
             message: `${title} is required.`,
           },
-        ]}
-      >
+        ]}>
         <Input ref={inputRef} onPressEnter={save} onBlur={save} />
       </FormItem>
     ) : (
@@ -94,15 +97,14 @@ const EditableCell = ({
         style={{
           paddingRight: 24,
         }}
-        onClick={toggleEdit}
-      >
+        onClick={toggleEdit}>
         {children}
       </div>
-    );
+    )
   }
 
-  return <td {...restProps}>{childNode}</td>;
-};
+  return <td {...restProps}>{childNode}</td>
+}
 
 const App = () => {
   //获取作业列表数据
@@ -123,14 +125,12 @@ const App = () => {
       setDataSource(list)
     }
   }
-  
-
 
   // componentDidMount
   useEffect(() => {
     getJobTables()
-  },[])
-  const [dataSource, setDataSource] = useState();
+  }, [])
+  const [dataSource, setDataSource] = useState()
   //   [
   //   {
   //     key: '0',
@@ -149,24 +149,23 @@ const App = () => {
   //     updTime: '2022.8.18 12:00:00',
   //   },
   // ]
-  const [count, setCount] = useState(2);
-  
-  const [JobData, setJobData] =useState()
+  const [count, setCount] = useState(2)
+
+  const [JobData, setJobData] = useState()
 
   //删除作业
-  const handleDelete = async (key) => {
+  const handleDelete = async key => {
     const { data } = await deleteJob(key)
     if (data.code === 200) {
-      const newData = dataSource.filter((item) => item.key !== key);
-      setDataSource(newData);
-      message.success('删除成功');
+      const newData = dataSource.filter(item => item.key !== key)
+      setDataSource(newData)
+      message.success('删除成功')
     } else {
       message.error('删除失败')
     }
-    
-  };
-  
-  const editJobitem = async(key) => {
+  }
+
+  const editJobitem = async key => {
     const data = await getJobInfo(key)
     setJobData(data)
   }
@@ -203,7 +202,6 @@ const App = () => {
       title: '作业分类',
       dataIndex: 'tag',
       width: '16.6%',
-
     },
     {
       title: '创建时间',
@@ -226,78 +224,71 @@ const App = () => {
         dataSource.length >= 1 ? (
           <>
             <Link to={'/work-management/cre?data=' + JobData}>
-              <Button onClick={() => editJobitem(record.key)}>
-                编辑
-              </Button>
+              <Button onClick={() => editJobitem(record.key)}>编辑</Button>
             </Link>
-            
-            <Popconfirm 
-            title="确认删除？" 
-            okText="确认"
-            cancelText="取消"
-            onConfirm={() => handleDelete(record.key)}
-            >
-              <a className='delButton'>删除</a>
+
+            <Popconfirm
+              title="确认删除？"
+              okText="确认"
+              cancelText="取消"
+              onConfirm={() => handleDelete(record.key)}>
+              <a className="delButton">删除</a>
             </Popconfirm>
           </>
         ) : null,
-          
     },
-  ];
-//创建作业
+  ]
+  //创建作业
 
-  const handleSave = (row) => {
-    const newData = [...dataSource];
-    const index = newData.findIndex((item) => row.key === item.key);
-    const item = newData[index];
-    newData.splice(index, 1, { ...item, ...row });
-    setDataSource(newData);
-  };
+  const handleSave = row => {
+    const newData = [...dataSource]
+    const index = newData.findIndex(item => row.key === item.key)
+    const item = newData[index]
+    newData.splice(index, 1, { ...item, ...row })
+    setDataSource(newData)
+  }
 
   const components = {
     body: {
       row: EditableRow,
       cell: EditableCell,
     },
-  };
-  const columns = defaultColumns.map((col) => {
+  }
+  const columns = defaultColumns.map(col => {
     if (!col.editable) {
-      return col;
+      return col
     }
 
     return {
       ...col,
-      onCell: (record) => ({
+      onCell: record => ({
         record,
         editable: col.editable,
         dataIndex: col.dataIndex,
         title: col.title,
         handleSave,
       }),
-    };
-  });
-  useEffect (() => {
-    bus.on('sendDataForm',data => {
-      
-    })
-  },[])
+    }
+  })
+  useEffect(() => {
+    bus.on('sendDataForm', data => {})
+  }, [])
   return (
     <JobItems>
       <Link to="/work-management/cre">
         <Button
-        type="primary"
-        style={{
-          float: 'right',
-          marginBottom: 16,
-          marginTop: '18px',
-          marginRight: '16px',
-          fontSize: '12px',
-        }}
-      >
-        创建作业
-      </Button>
+          type="primary"
+          style={{
+            float: 'right',
+            marginBottom: 16,
+            marginTop: '18px',
+            marginRight: '16px',
+            fontSize: '12px',
+          }}>
+          创建作业
+        </Button>
       </Link>
-      
+
       <Table
         components={components}
         rowClassName={() => 'editable-row'}
@@ -306,7 +297,7 @@ const App = () => {
         columns={columns}
       />
     </JobItems>
-  );
-};
+  )
+}
 
-export default App;
+export default App

src/module/workmgmt/page/JobManagement.jsx

@@ -1,28 +1,14 @@
-import React from 'react';
+import React from 'react'
 import JobItems from '../component/JobItems'
 import styled from 'styled-components'
-const JobManage = styled.div``
+const JobManage = styled.div`
+  padding: 20px;
+`
 
-export default function JobManagement() {  
-      document.body.style.background = '#F0F2F5'
-      return (
-        <JobManage>
-          <div>
-          <header  style={{ 
-          height: '40px', 
-          fontSize: '14px',
-          paddingLeft: '24px',
-          lineHeight: '40px',
-          backgroundColor: 'white',
-          marginBottom: '16px',
-          }}>
-          <span>
-            作业列表
-          </span>
-          </header>
-          </div>
-         <JobItems/>
-        </JobManage>
-    )
+export default function JobManagement() {
+  return (
+    <JobManage>
+      <JobItems />
+    </JobManage>
+  )
 }
-