Skip to content

D
dlink
Commit 6faa43bb authored by godkaikai's avatar godkaikai
Browse files
Options

mysql

parent fe14f1dd
Show whitespace changes
Inline Side-by-side
Showing with 130 additions and 91 deletions
dlink-web/src/pages/DataBase/components/ChooseDB.tsx → dlink-web/src/pages/DataBase/components/DBForm.tsx
View file @ 6faa43bb
......@@ -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 {handleAddOrUpdate} from "@/components/Common/crud";
export type UpdateFormProps = {
onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
......@@ -29,12 +30,13 @@ const data = [
},
];
const ChooseDB: React.FC<UpdateFormProps> = (props) => {
const DBForm: React.FC<UpdateFormProps> = (props) => {
const {
// onSubmit: handleUpdate,
onSubmit: handleUpdate,
onCancel: handleChooseDBModalVisible,
modalVisible,
values
} = props;
const [dbType, setDbType] = useState<string>();
......@@ -51,12 +53,13 @@ const ChooseDB: React.FC<UpdateFormProps> = (props) => {
<Modal
width={800}
bodyStyle={{padding: '32px 40px 48px'}}
title={'选择数据源类型'}
title={'创建数据源'}
visible={modalVisible}
onCancel={() => handleChooseDBModalVisible()}
maskClosable = {false}
footer={null}
>
<List
>{
!dbType&&(<List
grid={{
gutter: 16,
xs: 1,
......@@ -79,13 +82,20 @@ const ChooseDB: React.FC<UpdateFormProps> = (props) => {
</Card>
</List.Item>
)}
/>
/>)
}
<MysqlForm
onCancel={() => setDbType(undefined)}
modalVisible={dbType=='MySql'}
values={{}}
onSubmit={()=>{
setDbType(undefined)
onSubmit={async (value) => {
console.log(value);
const success = await handleAddOrUpdate('/api/database', value);
if (success) {
handleChooseDBModalVisible();
setDbType(undefined);
handleUpdate(value);
}
}}
/>
</Modal>
......@@ -94,4 +104,4 @@ const ChooseDB: React.FC<UpdateFormProps> = (props) => {
export default connect(({Studio}: { Studio: StateType }) => ({
cluster: Studio.cluster,
}))(ChooseDB);
}))(DBForm);
dlink-web/src/pages/DataBase/components/MySqlForm.tsx
View file @ 6faa43bb
import React, {useEffect, useState} from 'react';
import { Form, Button, Input, Modal,Select } from 'antd';
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 MysqlFormProps = {
onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
onSubmit: (values: Partial<DataBaseItem>) => void;
modalVisible: boolean;
values: Partial<DataBaseItem>;
};
const FormItem = Form.Item;
const Option = Select.Option;
const formLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
labelCol: {span: 7},
wrapperCol: {span: 13},
};
const MysqlForm: React.FC<MysqlFormProps> = (props) => {
......@@ -23,95 +24,101 @@ const MysqlForm: React.FC<MysqlFormProps> = (props) => {
id: props.values.id,
name: props.values.name,
alias: props.values.alias,
type: props.values.type,
type: "Mysql",
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,
onCancel: handleUpdateModalVisible,
onCancel: handleModalVisible,
modalVisible,
values,
} = props;
const submitForm = async () => {
const fieldsValue = await form.validateFields();
setFormVals({ ...formVals, ...fieldsValue });
handleUpdate({ ...formVals, ...fieldsValue });
setFormVals({...formVals, ...fieldsValue});
handleUpdate({...formVals, ...fieldsValue});
};
const onReset = () => {
form.resetFields();
};
const renderContent = (formVals) => {
return (
<>
<FormItem
<Form.Item
name="name"
label="名称"
rules={[{ required: true, message: '请输入名称！' }]} >
<Input placeholder="请输入" />
</FormItem>
<FormItem
rules={[{required: true, message: '请输入名称！'}]}>
<Input placeholder="请输入唯一英文标识"/>
</Form.Item>
<Form.Item
name="alias"
label="别名"
>
<Input placeholder="请输入" />
</FormItem>
<FormItem
name="type"
label="类型"
<Input placeholder="请输入别名"/>
</Form.Item>
<Form.Item
name="groupName"
label="分组类型"
>
<Select defaultValue="Yarn" allowClear>
<Option value="Standalone">Standalone</Option>
<Option value="Yarn">Yarn</Option>
<Option value="Others">Others</Option>
<Select defaultValue="其他">
<Option value="来源">来源</Option>
<Option value="数仓">数仓</Option>
<Option value="应用">应用</Option>
<Option value="备份">备份</Option>
<Option value="其他">其他</Option>
</Select>
</FormItem>
<FormItem
name="hosts"
label="Hosts"
</Form.Item>
<Form.Item
name="url"
label="url"
>
<TextArea placeholder="jdbc:mysql://{host}:{port}/{database}" allowClear
autoSize={{minRows: 3, maxRows: 10}}/>
</Form.Item>
<Form.Item
name="username"
label="用户名"
>
<TextArea placeholder="添加 Flink Hosts...例如：127.0.0.1:8081,127.0.0.1:8091" allowClear autoSize={{ minRows: 3, maxRows: 10 }}/>
</FormItem>
<FormItem
<Input/>
</Form.Item>
<Form.Item
name="password"
label="密码"
>
<Input.Password/>
</Form.Item>
<Form.Item
name="note"
label="注释"
>
<Input placeholder="请输入" />
</FormItem>
<FormItem
<Input placeholder="请输入"/>
</Form.Item>
<Form.Item
name="enabled"
label="是否启用"
rules={[{ required: true, message: '请输入是否启用！' }]} >
>
<Switch checkedChildren="启用" unCheckedChildren="禁用"
defaultChecked={formVals.enabled}/>
</FormItem>
</Form.Item>
</>
);
};
const renderFooter = () => {
return (
<>{
modalVisible && (
<>
<Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
<Button type="primary" onClick={() => submitForm()}>
完成
</Button>
</>
);
};
return (
<Modal
width={640}
bodyStyle={{ padding: '32px 40px 48px' }}
destroyOnClose
title={formVals.id?'编辑':'创建 MySql 数据源'}
visible={modalVisible}
footer={renderFooter()}
onCancel={() => handleUpdateModalVisible()}
>
<Form
{...formLayout}
form={form}
......@@ -120,13 +127,37 @@ const MysqlForm: React.FC<MysqlFormProps> = (props) => {
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 htmlType="button">
测试
</Button>
<Button type="primary" htmlType="button" onClick={() => submitForm()}>
保存
</Button>
</Space>
</Form.Item>
</Form>
</Modal>
</>
)
}</>
);
};
......
dlink-web/src/pages/DataBase/data.d.ts
View file @ 6faa43bb
......@@ -4,8 +4,6 @@ export type DataBaseItem = {
alias: string,
groupName: string,
type: string,
ip: string,
port: number,
url: string,
username: string,
password: string,
......
dlink-web/src/pages/DataBase/index.tsx
View file @ 6faa43bb
import React, {useState} from "react";
import React, {useRef, useState} from "react";
import {PageContainer, FooterToolbar} from '@ant-design/pro-layout';
import {DownOutlined, HeartOutlined, PlusOutlined, UserOutlined} from '@ant-design/icons';
import {Progress, Tag, Button, Space, Badge, Typography, Image, Row, Col} from 'antd';
import ProList from '@ant-design/pro-list';
import {queryData} from "@/components/Common/crud";
import {getDBImage} from "@/pages/DataBase/DB";
import ChooseDB from "./components/ChooseDB";
import DBForm from "./components/DBForm";
import {ActionType} from "@ant-design/pro-table";
const {Text} = Typography;
......@@ -13,18 +14,15 @@ const url = '/api/database';
const DataBaseTableList: React.FC<{}> = (props: any) => {
const [chooseDBModalVisible, handleChooseDBModalVisible] = useState<boolean>(false);
const chooseDB = () =>{
};
const [chooseDBModalVisible, handleDBFormModalVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
return (
<PageContainer>
<ProList
actionRef={actionRef}
toolBarRender={() => {
return [
<Button type="primary" onClick={() => handleChooseDBModalVisible(true)}>
<Button type="primary" onClick={() => handleDBFormModalVisible(true)}>
<PlusOutlined/> 新建
</Button>,
];
......@@ -79,7 +77,9 @@ const DataBaseTableList: React.FC<{}> = (props: any) => {
}}
headerTitle="数据源"
/>
<ChooseDB onCancel={() => handleChooseDBModalVisible(false)} modalVisible={chooseDBModalVisible}/>
<DBForm onCancel={() => handleDBFormModalVisible(false)} modalVisible={chooseDBModalVisible}
onSubmit={()=>{actionRef.current?.reloadAndRest?.();}}
/>
</PageContainer>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment