Oracle 数据源注册、元数据、查询、执行

dlink-web/src/pages/DataBase/components/DBForm.tsx

@@ -6,6 +6,7 @@ import {connect} from "umi";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {getDBImage} from "@/pages/DataBase/DB";
 import MysqlForm from "@/pages/DataBase/components/MySqlForm";
+import OracleForm from "@/pages/DataBase/components/OracleForm";
 import SqlServerForm from "@/pages/DataBase/components/SqlServerForm";
 import DorisForm from "@/pages/DataBase/components/DorisForm";
 import ClickHouseForm from "@/pages/DataBase/components/ClickHouseForm";
@@ -121,6 +122,17 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
           onTest(value);
         }}
       />
+      <OracleForm
+        onCancel={() => setDbType(undefined)}
+        modalVisible={dbType=='Oracle'||values.type=='Oracle'}
+        values={values}
+        onSubmit={(value) => {
+          onSubmit(value);
+        }}
+        onTest={(value) => {
+          onTest(value);
+        }}
+      />
       <SqlServerForm
         onCancel={() => setDbType(undefined)}
         modalVisible={dbType=='SqlServer'||values.type=='SqlServer'}

dlink-web/src/pages/DataBase/components/OracleForm.tsx

+import React, {useEffect, useState} from 'react';
+import {Form, Button, Input, Space, Select} from 'antd';
+
+import Switch from "antd/es/switch";
+import TextArea from "antd/es/input/TextArea";
+import {DataBaseItem} from "@/pages/DataBase/data";
+
+
+export type OracleFormProps = {
+  onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
+  onSubmit: (values: Partial<DataBaseItem>) => void;
+  onTest: (values: Partial<DataBaseItem>) => void;
+  modalVisible: boolean;
+  values: Partial<DataBaseItem>;
+};
+const Option = Select.Option;
+
+const formLayout = {
+  labelCol: {span: 7},
+  wrapperCol: {span: 13},
+};
+
+const OracleForm: React.FC<OracleFormProps> = (props) => {
+  const [formVals, setFormVals] = useState<Partial<DataBaseItem>>({
+    id: props.values.id,
+    name: props.values.name,
+    alias: props.values.alias,
+    type: "Oracle",
+    groupName: props.values.groupName,
+    url: props.values.url,
+    username: props.values.username,
+    password: props.values.password,
+    dbVersion: props.values.dbVersion,
+    note: props.values.note,
+    enabled: props.values.enabled,
+  });
+
+  const [form] = Form.useForm();
+  const {
+    onSubmit: handleUpdate,
+    onTest: handleTest,
+    onCancel: handleModalVisible,
+    modalVisible,
+    values,
+  } = props;
+
+  const submitForm = async () => {
+    const fieldsValue = await form.validateFields();
+    setFormVals({...formVals, ...fieldsValue});
+    handleUpdate({...formVals, ...fieldsValue});
+  };
+
+  const testForm = async () => {
+    const fieldsValue = await form.validateFields();
+    setFormVals({...formVals, ...fieldsValue});
+    handleTest({...formVals, ...fieldsValue});
+  };
+
+  const onReset = () => {
+    form.resetFields();
+  };
+
+  const renderContent = (formVals) => {
+    return (
+      <>
+        <Form.Item
+          name="name"
+          label="名称"
+          rules={[{required: true, message: '请输入名称！'}]}>
+          <Input placeholder="请输入唯一英文标识"/>
+        </Form.Item>
+        <Form.Item
+          name="alias"
+          label="别名"
+        >
+          <Input placeholder="请输入别名"/>
+        </Form.Item>
+        <Form.Item
+          name="groupName"
+          label="分组类型"
+        >
+          <Select >
+            <Option value="来源">来源</Option>
+            <Option value="数仓">数仓</Option>
+            <Option value="应用">应用</Option>
+            <Option value="备份">备份</Option>
+            <Option value="其他">其他</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="url"
+          label="url"
+        >
+          <TextArea placeholder="jdbc:oracle:thin:@{host}:{port}:{database}" allowClear
+                    autoSize={{minRows: 3, maxRows: 10}}/>
+        </Form.Item>
+        <Form.Item
+          name="username"
+          label="用户名"
+        >
+          <Input/>
+        </Form.Item>
+        <Form.Item
+          name="password"
+          label="密码"
+        >
+          <Input.Password/>
+        </Form.Item>
+        <Form.Item
+          name="note"
+          label="注释"
+        >
+          <Input placeholder="请输入"/>
+        </Form.Item>
+        <Form.Item
+          name="enabled"
+          label="是否启用"
+          >
+          <Switch checkedChildren="启用" unCheckedChildren="禁用"
+                  defaultChecked={formVals.enabled}/>
+        </Form.Item>
+      </>
+    );
+  };
+
+  return (
+    <>{
+        modalVisible && (
+          <>
+            <Form
+              {...formLayout}
+              form={form}
+              initialValues={{
+                id: formVals.id,
+                name: formVals.name,
+                alias: formVals.alias,
+                type: formVals.type,
+                groupName: formVals.groupName,
+                url: formVals.url,
+                username: formVals.username,
+                password: formVals.password,
+                note: formVals.note,
+                enabled: formVals.enabled,
+              }}
+            >
+              {renderContent(formVals)}
+              <Form.Item wrapperCol={{offset: 8, span: 16}}>
+                <Space>
+                  <Button htmlType="button" onClick={()=>{
+                    handleModalVisible(false)
+                  }}>
+                    返回
+                  </Button>
+                  <Button htmlType="button" onClick={onReset}>
+                    重置
+                  </Button>
+                  <Button type="primary" htmlType="button" onClick={testForm}>
+                    测试
+                  </Button>
+                  <Button type="primary" htmlType="button" onClick={submitForm}>
+                    保存
+                  </Button>
+                </Space>
+              </Form.Item>
+            </Form>
+          </>
+        )
+      }</>
+  );
+};
+
+export default OracleForm;

dlink-web/src/pages/Welcome.tsx

@@ -633,7 +633,7 @@ export default (): React.ReactNode => {
                   <Link>优化 sql美化</Link>
                 </li>
                 <li>
-                  <Link>扩展 Doris、SqlServer 数据源注册、元数据、查询和执行</Link>
+                  <Link>扩展 Doris、SqlServer、Oracle 数据源注册、元数据、查询和执行</Link>
                 </li>
               </ul>
             </Paragraph>