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

import { Button, Form, Input, Select, Space, Divider, message } from 'antd'
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'
import React, { useState, useEffect, useRef } from 'react'
import {
  getConstantsTypes,
  getFileUri,
  deleteTag,
  deleteFile,
} from '../services'
const { Option } = Select
const FormItem = Form.Item

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

export default function JobStepOne({ ConfigDataForm, SelectDag }) {
  const JobTagInputRef = useRef(null)
  //自定义作业标签名称
  const [tagName, setTagName] = useState('')
  //作业标签
  const [jobTags, setJobTags] = useState([])

  const [dags, setDags] = useState([])

  useEffect(() => {
    const DJName = ConfigDataForm.getFieldValue('DagJobName')
    if (DJName) {
      ConfigDataForm.setFieldValue('DagJobName', DJName)
    }
    getJobTag()
    getDags()
  }, [])

  //获取作业标签
  const getJobTag = async () => {
    const JobTags = await getConstantsTypes('作业标签')
    if (JobTags.data.code === 200) {
      setJobTags(JobTags.data.data)
    }
  }

  //获取DAG
  const getDags = async () => {
    const params = {
      project_id: 'test',
      user_id: 'test',
      file_type: 'dag',
    }
    const { data } = await getFileUri(params)
    if (data.code === 200) {
      setDags(data.data)
    } 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])
        ConfigDataForm.setFieldValue('tag', tagName)
        setTagName('')
        setTimeout(() => {
          JobTagInputRef.current?.focus()
        }, 0)
      } else {
        message.error('存在同名标签')
      }
    } else {
      message.error('请输入自定义作业标签名称')
    }
  }

  const onDeleteTag = async val => {
    const { data } = await deleteTag({ type: '作业标签', val })
    if (data.code === 200) {
      ConfigDataForm.setFieldValue('tag', null)
      message.success('删除成功')
      getJobTag()
    } else {
      message.error(data.msg)
    }
  }

  const onDeleteDag = async val => {
    const { data } = await deleteFile(val)
    if (data.code === 200) {
      ConfigDataForm.setFieldValue('dag_url', null)
      message.success('删除成功')
      getDags()
    } else {
      message.error(data.msg)
    }
  }

  return (
    <>
      <Form {...layout} form={ConfigDataForm} name="control-hooks">
        <FormItem
          name="name"
          label="作业名称"
          rules={[
            {
              required: true,
            },
          ]}>
          <Input
            placeholder="请输入作业名称..."
            allowClear
            // onChange={}
          ></Input>
        </FormItem>

        {/* 作业标签选择 */}
        <FormItem
          name="tag"
          label="作业标签"
          rules={[
            {
              required: true,
            },
          ]}>
          <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}>
                <Space>
                  <DeleteOutlined onClick={() => onDeleteTag(item)} />
                  <span>{item}</span>
                </Space>
              </Option>
            ))}
          </Select>
        </FormItem>

        {/* 选择执行镜像 */}
        <FormItem
          className="mirrorLeft"
          name="dag_url"
          label="选择DAG算子"
          rules={[
            {
              required: true,
              message: '请选择DAG算子',
            },
          ]}>
          <Select
            showSearch
            optionFilterProp="label"
            placeholder="请选择DAG算子"
            allowClear
            optionLabelProp="label"
            onSelect={val => SelectDag(val)}>
            {dags.map(item => (
              <Option key={item.uri} value={item.uri} label={item.name}>
                <Space>
                  <DeleteOutlined onClick={() => onDeleteDag(item.uri)} />
                  <span>{item.name}</span>
                </Space>
              </Option>
            ))}
          </Select>
        </FormItem>
      </Form>
    </>
  )
}