ai-proj-demo/src/module/workmgmt/component/JobCreate.jsx

import {
  Button,
  Form,
  Input,
  Select,
  Radio,
  Space,
  Upload,
  Steps,
  message,
  Divider,
} from 'antd'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
import React, { useState, useEffect, useRef } from 'react'
import styled from 'styled-components'
import JobStepOne from './JobStepOne'
import JobStepTwo from './JobStepTwo'
import JobStepThree from './JobStepThree'
import { useNavigate, useLocation } from 'react-router-dom'
import {
  getConstantsTypes,
  createJob,
  getFileInfomation,
  getJobInfo,
  deleteTag,
  updateJobInfo,
  uploadFile,
  getFileUri,
} from '../services'

const JobCre = styled.div`
  padding: 20px;
`
const CreContent = styled.div`
  background-color: #ffffff;
  padding: 20px 10px;
  .creTitle {
    width: 120px;
    height: 60px;
    margin-left: 15px;
    display: flex;
  }
  .bluetTitle {
    background-color: rgba(24, 129, 218, 1);
    width: 3px;
    height: 16px;
    margin-top: 25px;
    line-height: 67px;
  }
  .creText {
    width: 105px;
    height: 20px;
    margin-left: 10px;
    overflow-wrap: break-word;
    color: rgba(74, 74, 74, 1);
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
    line-height: 67px;
    font-weight: 800;
  }
  .ant-form-item-control-input {
    width: 295px;
  }
  .JaPyInfo {
    .JaPySubmit {
      display: flex;
      .Submit {
        margin-left: 20px;
        .ant-btn {
          color: #1890ff;
          border-color: #1890ff;
        }
      }
      .Cancel {
        .ant-btn {
          color: #1890ff;
          border-color: #1890ff;
        }
      }
    }
  }
  .DagInfo {
    .ant-steps-item-icon {
      width: 42px;
      height: 42px;
      line-height: 42px;
    }
    .ant-steps-item-tail {
      font-size: 1px;
      margin-left: 67px;
    }
    .ant-steps-label-vertical .ant-steps-item-content {
      width: 220px;
    }
  }
`

const { Option } = Select
const FormItem = Form.Item
const RadioGroup = Radio.Group

const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 8,
  },
}

const tailLayout = {
  wrapperCol: {
    offset: 4,
    span: 8,
  },
}

export default function JobCreate() {
  const [WorkTypeForm] = Form.useForm()
  const { Step } = Steps
  // 路由导航
  const navigate = useNavigate()
  const { state } = useLocation()
  // 显示/隐藏配置Ja作业信息模块
  const [JaIsShow, setJaIsShow] = useState('none')

  // 显示/隐藏配置Python作业信息模块
  const [PyIsShow, setPyIsShow] = useState('none')

  // 显示/隐藏配置Dag作业信息模块
  const [DagIsShow, setDagIsShow] = useState('none')

  // 单选框动态传值
  const [radioValue, setRadioValue] = useState(null)

  // 脚本路径
  const [scriptFile, setSriptFile] = useState(null)

  // 步骤数
  const [currentStep, setCurrentStep] = useState(0)

  //作业类型
  const [jobTypeOptions, setJobTypeOptions] = useState([])

  //作业标签
  const [jobTags, setJobTags] = useState([])

  //dag第一步表单数据
  const [ConfigDataForm] = Form.useForm()
  //dag第二步表单数据
  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 [dagData, setDagData] = useState(null)

  const [syncState, setSyncState] = useState(false)

  const [fileList, setFileList] = useState([])

  const [javas, setJavas] = useState([])
  const [pythons, setPythons] = useState([])

  const [pythonImages, setPythonImages] = useState([])
  const [javaImages, setJavaImages] = useState([])

  useEffect(() => {
    if (state) {
      fetchJobInfo(state.id)
    }
  }, [state])

  useEffect(() => {
    fetchFileUri('java')
    fetchFileUri('python')
  }, [])

  const fetchFileUri = async type => {
    const params = {
      project_id: 'test',
      user_id: 'test',
      file_type: type,
    }
    const { data } = await getFileUri(params)
    if (data.code === 200) {
      console.log(type, data)
      type === 'java' ? setJavas(data.data) : setPythons(data.data)
    } else {
      message.error(data.msg)
    }
  }

  const fetchJobInfo = async id => {
    const { data } = await getJobInfo(id)
    if (data.code === 200) {
      WorkTypeForm.setFieldValue('type', data.data.type)
      onGenderChange(data.data.type)
      switch (data.data.type) {
        case 'Python':
          PythonDataForm.setFieldsValue({
            name: data.data.name,
            tag: data.data.tag,
            image_url: data.data.image_url,
            script_file: 'fromList',
            execute_command: data.data.execute_command,
          })
          setRadioValue('fromList')
          setSriptFile(data.data.script_file)
          break
        case 'Java':
          JavaDataForm.setFieldsValue({
            name: data.data.name,
            tag: data.data.tag,
            image_url: data.data.image_url,
            script_file: 'fromList',
            execute_command: data.data.execute_command,
          })
          setRadioValue('fromList')
          setSriptFile(data.data.script_file)
          break
        case 'Dag':
          ConfigDataForm.setFieldsValue({
            name: data.data.name,
            tag: data.data.tag,
            dag_url: data.data.dag_url,
          })
          setDagData(data.data.dag_url)
          const inputs = []
          const outputs = []
          data.data.hd_relation.forEach(item => {
            if (item.type === 'input') {
              inputs.push(item)
            } else {
              outputs.push(item)
            }
          })
          inputs.forEach((item, index) => {
            InputDataForm.setFieldValue(
              `datasource${index}`,
              item.datasource_id
            )
            InputDataForm.setFieldValue(`sourceTable${index}`, item.table)
          })
          outputs.forEach((item, index) => {
            OutputDataForm.setFieldValue(
              `datasource${index}`,
              item.datasource_id
            )
            OutputDataForm.setFieldValue(`sourceTable${index}`, item.table)
          })
          break
        default:
          break
      }
    } else {
      message.error(data.msg)
    }
  }

  //动态改变作业标签的值
  const onNameChange = event => {
    setTagName(event.target.value)
  }

  //添加自定义作业标签
  const addTagItem = e => {
    if (tagName) {
      e.preventDefault()
      if (!jobTags.find(item => item === tagName)) {
        setJobTags([...jobTags, tagName])
        currentForm.setFieldValue('tag', tagName)
        setTagName('')
        setTimeout(() => {
          JobTagInputRef.current?.focus()
        }, 0)
      } else {
        message.error('存在同名标签')
      }
    } else {
      message.error('请输入自定义作业标签名称')
    }
  }

  // 设置单选框value值
  const onChange = e => {
    setRadioValue(e.target.value)
  }

  //上传文件配置
  const UpProps = {
    onRemove: file => {
      const index = fileList.indexOf(file)
      const newFileList = fileList.slice()
      newFileList.splice(index, 1)
      setFileList(newFileList)
    },
    beforeUpload: file => {
      setFileList([...fileList, file])
      return false
    },
    fileList,
  }

  //根据作业类型做出判断
  const onGenderChange = value => {
    if (value === 'Java') {
      setJaIsShow('block')
      setDagIsShow('none')
      setPyIsShow('none')
      setCurrentJobType('Java')
      setCurrentForm(JavaDataForm)
    } else if (value === 'Python') {
      setJaIsShow('none')
      setDagIsShow('none')
      setPyIsShow('block')
      setCurrentJobType('Python')
      setCurrentForm(PythonDataForm)
    } else if (value === 'Dag') {
      setJaIsShow('none')
      setDagIsShow('block')
      setPyIsShow('none')
      setCurrentJobType('Dag')
      setCurrentForm(ConfigDataForm)
    }
  }

  //上一步/下一步
  const changeStep = num => {
    setCurrentStep(currentStep + num)
  }

  //提交DAG
  const DagSubmit = async () => {
    const { data } = await getFileInfomation(dagData)
    if (data.code === 200) {
      const innodes = data.data.nodes.filter(item => item.op === 'datasource')
      const outnodes = data.data.nodes.filter(
        item => item.op === 'outputsource'
      )
      const relation_list = []
      innodes.forEach((item, index) => {
        relation_list.push({
          type: 'input',
          datasource_id: InputDataForm.getFieldValue(`datasource${index}`),
          node_uuid: item.id,
          table: InputDataForm.getFieldValue(`sourceTable${index}`),
        })
      })
      outnodes.forEach((item, index) => {
        relation_list.push({
          type: 'output',
          datasource_id: OutputDataForm.getFieldValue(`datasource${index}`),
          node_uuid: item.id,
          table: OutputDataForm.getFieldValue(`sourceTable${index}`),
        })
      })
      const params = {
        ...ConfigDataForm.getFieldValue(),
        script_file: '',
        type: currentJobType,
        dag_uuid: 'test',
        user_id: 'test',
        project_id: 'test',
        // 镜像
        image_url: '',
        relation_list,
        execute_command: '',
      }
      let resp = {}
      if (state?.id) {
        resp = await updateJobInfo(state.id, params)
      } else {
        resp = await createJob(params)
      }
      if (resp.data.code === 200) {
        navigate(-1)
      } else {
        message.error(resp.data.msg)
      }
    }
  }

  //下一步
  const nextStep = () => {
    currentForm
      .validateFields()
      .then(() => {
        if (currentStep === 0 || syncState) {
          if (currentStep === 2) {
            DagSubmit()
          } else {
            changeStep(1)
          }
        } else {
          message.error('请检查字段对应关系')
        }
      })
      .catch(err => {
        message.error('请检查表单数据是否完整')
      })
  }

  useEffect(() => {
    switch (currentStep) {
      case 0:
        setCurrentForm(ConfigDataForm)
        break
      case 1:
        setCurrentForm(InputDataForm)
        break
      case 2:
        setCurrentForm(OutputDataForm)
        break
      default:
        break
    }
    getJobType()
    getJobTag()
    getPythonImages()
    getJavaImages()
  }, [currentStep])

  const getPythonImages = async () => {
    const JobTypes = await getConstantsTypes('pythonImage')
    if (JobTypes.data.length !== 0) {
      setPythonImages(
        JobTypes.data.data.map(item => {
          const strs = item.split('/')
          return {
            label: strs.pop(),
            value: item,
          }
        })
      )
    }
  }

  const getJavaImages = async () => {
    const JobTypes = await getConstantsTypes('javaImage')
    if (JobTypes.data.length !== 0) {
      setJavaImages(
        JobTypes.data.data.map(item => {
          const strs = item.split('/')
          return {
            label: strs.pop(),
            value: item,
          }
        })
      )
    }
  }

  //获取作业类型和分类
  const getJobType = async () => {
    const JobTypes = await getConstantsTypes('作业类型')
    if (JobTypes.data.length !== 0) {
      setJobTypeOptions(
        JobTypes.data.data.map(item => {
          return {
            label: item,
            value: item,
          }
        })
      )
    }
  }

  const getJobTag = async () => {
    const { data } = await getConstantsTypes('作业标签')
    if (data.code === 200) {
      setJobTags(data.data)
    } else {
      message.error(data.msg)
    }
  }

  const finishSubmit = async () => {
    const params = {
      ...currentForm.getFieldValue(),
      type: currentJobType,
      dag_uuid: '',
      user_id: 'test',
      project_id: 'test',
      dag_url: '',
      relation_list: [],
    }
    if (radioValue === 'fromList') {
      params['script_file'] = scriptFile
    } else {
      const file = new FormData()
      fileList.forEach(item => {
        file.append('file', item)
      })
      file.append('project_id', 'test')
      file.append('file_type', currentJobType === 'Java' ? 'java' : 'python')
      const { data } = await uploadFile(file)
      if (data.code === 200) {
        params['script_file'] = data.data
      } else {
        message.error(data.msg)
      }
    }
    let res = {}
    if (state?.id) {
      res = await updateJobInfo(state.id, params)
    } else {
      res = await createJob(params)
    }
    if (res.data.code === 200) {
      navigate(-1)
    } else {
      message.error(res.data.msg)
    }
  }

  //java or python提交
  const JaPySubmit = () => {
    currentForm
      .validateFields()
      .then(() => {
        if (scriptFile !== null || fileList.length > 0) {
          finishSubmit()
        } else {
          message.error('请选择脚本')
        }
      })
      .catch(err => {
        message.error('请检查表单数据是否完整')
      })
  }
  const cancel = () => {
    navigate(-1)
  }
  const onScriptFileChange = val => {
    setSriptFile(val)
  }
  const onDeleteTag = async val => {
    const { data } = await deleteTag({ type: '作业标签', val })
    if (data.code === 200) {
      currentForm.setFieldValue('tag', null)
      message.success('删除成功')
      getJobTag()
    } else {
      message.error(data.msg)
    }
  }
  return (
    <JobCre>
      <CreContent>
        <div>
          <div className="creTitle">
            <div className="bluetTitle" />
            <span className="creText">配置作业类型</span>
          </div>

          {/* 作业类型选择       */}
          <Form {...layout} form={WorkTypeForm} name="control-hooks">
            <FormItem
              name="type"
              label="选择作业类型"
              rules={[
                {
                  required: true,
                  message: '请选择作业类型',
                },
              ]}>
              <Select
                placeholder="请选择作业类型..."
                onSelect={onGenderChange}
                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}
              SelectDag={val => setDagData(val)}
            />
          )}

          {/* 第二步 */}
          {currentStep === 1 && (
            <JobStepTwo
              InputDataForm={InputDataForm}
              dagData={dagData}
              checkSync={val => setSyncState(val)}
            />
          )}

          {/* 第三步 */}
          {currentStep === 2 && (
            <JobStepThree
              OutputDataForm={OutputDataForm}
              dagData={dagData}
              checkSync={val => setSyncState(val)}
            />
          )}

          <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="作业名称"
              rules={[
                {
                  required: true,
                  message: '请输入作业名称',
                },
              ]}>
              <Input placeholder="请输入作业名称..." allowClear></Input>
            </FormItem>

            {/* 选择作业标签 */}
            <FormItem
              shouldUpdate
              name="tag"
              label="作业标签"
              rules={[
                {
                  required: true,
                  message: '请选择作业标签',
                },
              ]}>
              <Select
                showSearch
                optionFilterProp="label"
                placeholder="请选择作业标签..."
                allowClear
                optionLabelProp="label"
                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} value={item} label={item}>
                    <Space>
                      <DeleteOutlined onClick={() => onDeleteTag(item)} />
                      <span>{item}</span>
                    </Space>
                  </Option>
                ))}
              </Select>
            </FormItem>

            {/* 选择执行镜像 */}
            <FormItem
              name="image_url"
              label="配置执行的镜像"
              rules={[
                {
                  required: true,
                  message: '请选择配置执行的镜像',
                },
              ]}>
              <Select
                placeholder="请选择镜像..."
                allowClear
                showSearch
                optionFilterProp="label">
                {javaImages.map(item => (
                  <Option
                    key={item.value}
                    value={item.value}
                    label={item.label}>
                    {item.label}
                  </Option>
                ))}
              </Select>
            </FormItem>

            {/* 选择执行的Java脚本 */}
            <FormItem
              label="配置执行的Java脚本"
              name="script_file"
              rules={[
                {
                  required: true,
                  message: '请选择配置执行的Java脚本',
                },
              ]}>
              <RadioGroup onChange={onChange}>
                <Space direction="vertical" className="jsSel">
                  <Radio value={'fromList'}>
                    <span
                      onClick={e => {
                        e.preventDefault()
                        e.stopPropagation()
                      }}>
                      <Select
                        showSearch
                        optionFilterProp="label"
                        placeholder="在工作目录中选择"
                        allowClear
                        className="javaSelect"
                        value={scriptFile}
                        onChange={onScriptFileChange}
                        disabled={radioValue === 'fromList' ? false : true}>
                        {javas.map(item => (
                          <Option
                            key={item.uri}
                            value={item.name}
                            label={item.name}>
                            {item.name}
                          </Option>
                        ))}
                      </Select>
                    </span>
                  </Radio>

                  <Radio value={'fromLocal'}>
                    <Upload {...UpProps} accept=".jar">
                      <Button
                        disabled={radioValue === 'fromLocal' ? false : true}
                        type="primary"
                        className="upButton">
                        本地上传
                      </Button>
                    </Upload>
                  </Radio>
                </Space>
              </RadioGroup>
            </FormItem>
            <FormItem label="执行命令" name="execute_command">
              <Input placeholder="请输入执行命令..." allowClear></Input>
            </FormItem>
            <FormItem {...tailLayout}>
              <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="作业名称"
              rules={[
                {
                  required: true,
                  message: '请输入作业名称',
                },
              ]}>
              <Input placeholder="请输入作业名称..." allowClear></Input>
            </FormItem>
            {/* 选择作业标签 */}
            <FormItem
              name="tag"
              label="作业标签"
              rules={[
                {
                  required: true,
                  message: '请选则作业标签',
                },
              ]}>
              <Select
                showSearch
                optionFilterProp="label"
                placeholder="请选择作业标签..."
                allowClear
                optionLabelProp="label"
                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} value={item} label={item}>
                    <Space>
                      <DeleteOutlined onClick={() => onDeleteTag(item)} />
                      <span>{item}</span>
                    </Space>
                  </Option>
                ))}
              </Select>
            </FormItem>
            {/* 选择执行镜像 */}
            <FormItem
              name="image_url"
              label="配置执行的镜像"
              rules={[
                {
                  required: true,
                  message: '请配置执行的镜像',
                },
              ]}>
              <Select
                showSearch
                optionFilterProp="label"
                placeholder="请选择镜像..."
                allowClear>
                {pythonImages.map(item => (
                  <Option
                    key={item.value}
                    value={item.value}
                    label={item.label}>
                    {item.label}
                  </Option>
                ))}
              </Select>
            </FormItem>

            {/* 选择执行的Python脚本 */}
            <FormItem
              label="配置执行的Python脚本"
              name="script_file"
              rules={[
                {
                  required: true,
                  message: '请配置执行的Python脚本',
                },
              ]}>
              <RadioGroup onChange={onChange} className="PyScript_file">
                <Space direction="vertical">
                  <Radio value={'fromList'}>
                    <span
                      onClick={e => {
                        e.preventDefault()
                        e.stopPropagation()
                      }}>
                      <Select
                        showSearch
                        optionFilterProp="label"
                        placeholder="在工作目录中选择"
                        allowClear
                        className="javaSelect"
                        value={scriptFile}
                        onChange={onScriptFileChange}
                        disabled={radioValue === 'fromList' ? false : true}>
                        {pythons.map(item => (
                          <Option
                            key={item.uri}
                            value={item.name}
                            label={item.name}>
                            {item.name}
                          </Option>
                        ))}
                      </Select>
                    </span>
                  </Radio>
                  <Radio value={'fromLocal'}>
                    <Upload {...UpProps} accept=".py">
                      <Button
                        className="upButton"
                        type="primary"
                        disabled={radioValue === 'fromLocal' ? false : true}>
                        本地上传
                      </Button>
                    </Upload>
                  </Radio>
                </Space>
              </RadioGroup>
            </FormItem>
            <FormItem label="执行命令" name="execute_command">
              <Input placeholder="请输入执行命令..." allowClear></Input>
            </FormItem>
            <FormItem {...tailLayout}>
              <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>
  )
}