From a975d2cddb840f8185059820a1203b7243c7e2aa Mon Sep 17 00:00:00 2001 From: coderTomato <570547651@qq.com> Date: Sun, 12 Dec 2021 23:10:58 +0800 Subject: [PATCH 01/15] =?UTF-8?q?=E6=B7=BB=E5=8A=A0clickhouse=E6=B3=A8?= =?UTF-8?q?=E5=86=8C=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DataBase/components/ClickHouseForm.tsx | 172 ++++++++++++++++++ .../src/pages/DataBase/components/DBForm.tsx | 18 +- 2 files changed, 187 insertions(+), 3 deletions(-) create mode 100644 dlink-web/src/pages/DataBase/components/ClickHouseForm.tsx diff --git a/dlink-web/src/pages/DataBase/components/ClickHouseForm.tsx b/dlink-web/src/pages/DataBase/components/ClickHouseForm.tsx new file mode 100644 index 0000000000..9e4ae17f74 --- /dev/null +++ b/dlink-web/src/pages/DataBase/components/ClickHouseForm.tsx @@ -0,0 +1,172 @@ +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 ClickHouseFormProps = { + onCancel: (flag?: boolean, formVals?: Partial) => void; + onSubmit: (values: Partial) => void; + onTest: (values: Partial) => void; + modalVisible: boolean; + values: Partial; +}; +const Option = Select.Option; + +const formLayout = { + labelCol: {span: 7}, + wrapperCol: {span: 13}, +}; + +const ClickHouseForm: React.FC = (props) => { + const [formVals, setFormVals] = useState>({ + id: props.values.id, + name: props.values.name, + alias: props.values.alias, + type: "ClickHouse", + 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 ( + <> + + + + + + + + + + +