ai-proj-demo/src/module/datasource/component/StepTwo.jsx

import React, { useState, useEffect } from 'react'
import { Form, Select, Input, message } from 'antd'
import { getTableNamesList } from '../services'

export default function LoadFormConfig({ loadDataForm, dataSourceList }) {
  const [datasourceType, setDatasourceType] = useState(null)

  const [datasources, setDatasources] = useState()

  const [tableList, setTableList] = useState([])

  // 获取数据源列表
  useEffect(() => {
    if (dataSourceList.length !== 0) {
      setDatasources(
        dataSourceList.map(item => {
          return {
            label: item.datasource_name,
            value: item.key,
          }
        })
      )
    }
  }, [dataSourceList])

  // 初始化表单类型
  useEffect(() => {
    if (loadDataForm.getFieldValue('datasource_name')) {
      const type = dataSourceList.find(
        item => item.key === loadDataForm.getFieldValue('datasource_name')
      ).datasource
      setDatasourceType(type)
    }
  }, [])

  // 选择数据源
  const selectDatasource = async val => {
    loadDataForm.setFieldValue('datasource_table', null)
    const type = dataSourceList.find(item => item.key === val).datasource
    setDatasourceType(type)
    console.log(val)
    const { data } = await getTableNamesList(val)
    if (data.code === 200) {
      const list = data.data.map(item => ({
        label: item,
        value: item,
      }))
      setTableList(list)
    } else {
      message.error('数据表加载失败')
    }
  }

  return (
    <>
      <p
        style={{
          fontWeight: 600,
          borderLeft: '3px solid #1881DA',
          paddingLeft: '12px',
        }}>
        配置加载源源
      </p>
      <Form
        name="drawForm"
        form={loadDataForm}
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 6,
        }}>
        <Form.Item
          label="选择数据源"
          name="datasource_name"
          rules={[
            {
              required: true,
              message: '请选择数据源!',
            },
          ]}>
          <Select
            options={datasources}
            onSelect={selectDatasource}
            allowClear
          />
        </Form.Item>
        <Form.Item
          label="选择表"
          name="datasource_table"
          rules={[
            {
              required: true,
              message: '请选择表',
            },
          ]}>
          <Select options={tableList} allowClear />
        </Form.Item>
        {datasourceType === 'mysql' ? (
          <>
            <Form.Item label="preSql" name="preSql" wrapperCol={{ span: 10 }}>
              <Input.TextArea rows={5} />
            </Form.Item>
          </>
        ) : (
          <>
            <Form.Item
              label="选择路径"
              name="dataRoute"
              wrapperCol={{ span: 10 }}
              rules={[
                {
                  required: true,
                  message: '请选择路径!',
                },
              ]}>
              <Input.TextArea rows={5} />
            </Form.Item>
            <Form.Item
              label="HDFS"
              name="datasource_hdfs"
              rules={[
                {
                  required: true,
                  message: '请输入HDFS',
                },
              ]}>
              <Input placeholder="hdfs namenode节点地址" />
            </Form.Item>
            <Form.Item
              label="文件类型"
              name="file_type"
              rules={[
                {
                  required: true,
                  message: '请选择文件类型',
                },
              ]}>
              <Select
                options={[
                  { label: 'txt', value: 'txt' },
                  { label: 'ocr', value: 'ocr' },
                ]}
                allowClear
                placeholder="文件的类型"
              />
            </Form.Item>
            <Form.Item label="分隔符" name="datasource_partition">
              <Input placeholder="读取字段的分隔符" />
            </Form.Item>
          </>
        )}
      </Form>
    </>
  )
}