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

import {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormRadio,
  ProFormTextArea,
  ProFormUploadButton,
  ProForm
} from '@ant-design/pro-components';
import { Button, Col, message, Form } from 'antd';
import { useState } from 'react'

const DATA_TYPE_MYSQL = 'MySQL'
const KERBS_VALID_TRUE = true

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const DatasourceAdd = () => {
  const [dataType, setDataType] = useState(DATA_TYPE_MYSQL)
  const [kerbsValid, setKerbsValid] = useState(KERBS_VALID_TRUE)
  const [loading, setLoading] = useState(false)
  const [form] = Form.useForm()
  // 测试连接
  const testConnect = () => {
    setLoading(true)
    console.log(form.getFieldValue('username'));
    setTimeout(()=>{
      message.success('连接成功')
      setLoading(false)
    }, 3000)
  }
  const testConnectBtn = <Button onClick={testConnect} loading={loading}>测试连接</Button>
  return (
    <ModalForm
      form={form}
      trigger={
        <Button type="primary">添加数据源</Button>
      }
      onFinish={async (values: any) => {
        await waitTime(2000);
        message.success('提交成功');
        return true;
      }}
      initialValues={{
        dataType: DATA_TYPE_MYSQL,
        connectBtn: 'connectTest',
        kerbsValid: KERBS_VALID_TRUE
      }}
      title="添加数据源"
      modalProps={{
        destroyOnClose: true,
        width: '60%',
        afterClose: () => {
          setDataType(DATA_TYPE_MYSQL)
          setKerbsValid(KERBS_VALID_TRUE)
          form.resetFields()
        },
        okText: '确认添加'
      }}
      layout='horizontal'
      grid={true}
      labelCol={{span: 7}}
      colProps={{ span: 12 }}
      rowProps={{
        gutter: [45, 0],
      }}
    >
      <ProFormSelect
        label="选择数据源"
        name="dataType"
        fieldProps={{
          onChange: (val) => setDataType(val)
        }}
        valueEnum={{
          'MySQL': 'My SQL',
          'hive': 'hive',
        }}
        rules={[
          {
            required: true,
            message: '请选择数据源!',
          },
        ]}
      />
      <Col span={12}/>
      <ProFormText
        label="数据源名称"
        name="dataName"
        rules={[
          {
            required: true,
            message: '请输入数据源名称!',
          },
        ]}
      />
      <ProFormSelect
        label="数据源标签"
        name="dataTag"
        valueEnum={{
          'online': '线上',
          'test': '测试',
          'develop': '开发'
        }}
        rules={[
          {
            required: true,
            message: '请选择数据源标签!',
          },
        ]}
      />
      <ProFormText
        label="数据库地址"
        name="sqlAddress"
        rules={[
          {
            required: true,
            message: '请输入数据库地址!',
          },
        ]}
      />
      <ProFormText
        label="数据库名称"
        name="sqlName"
        rules={[
          {
            required: true,
            message: '请输入数据库名称!',
          },
        ]}
      />
      <ProFormText
        label="用户名"
        name="username"
        rules={[
          {
            required: true,
            message: '请输入用户名!',
          },
        ]}
      />
      <ProFormText.Password
        label="密码"
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码!',
          },
        ]}
      />
      <ProFormTextArea label="详情" name="dataDetails" fieldProps={{autoSize: true}}/> 
      {dataType === 'hive' ? <ProFormRadio.Group
        label="kerbs验证"
        name="kerbsValid"
        fieldProps={{
          onChange: (e) => setKerbsValid(e.target.value)
        }}
        options={[
          {
            label: '是',
            value: true,
          },
          {
            label: '否',
            value: false,
          },
        ]}
      /> : <></>}

      <Col span={12} style={{'paddingLeft':'22.5px','paddingRight': '22.5px'}}>
        <ProForm.Item label="测试连接" name='success'>
          {testConnectBtn}
        </ProForm.Item>
      </Col>
      

      {
        dataType === 'hive' && kerbsValid ? <>
        <ProFormUploadButton label="keytab" name="keytab" action="upload.do" title='上传keyTabPath' max={1}/>
        <Col span={12}/>
        <ProFormUploadButton label="krd5config" name="krd5config" action="upload.do" title='上传kard5config' max={1}/>
        <Col span={12}/>
        <ProFormText label="Principal" name='principal' placeholder='ylaiuser@EMR-56L6ZNTS'></ProFormText></> : <></>}
      
    </ModalForm>
  );
};

DatasourceAdd.propTypes = {}

export default DatasourceAdd