mysql

dlink-web/src/pages/DataBase/components/ChooseDB.tsx → 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 {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

 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,110 +24,140 @@ 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="用户名"
+        >
+          <Input/>
+        </Form.Item>
+        <Form.Item
+          name="password"
+          label="密码"
         >
-          <TextArea placeholder="添加 Flink Hosts...例如：127.0.0.1:8081,127.0.0.1:8091" allowClear autoSize={{ minRows: 3, maxRows: 10 }}/>
-        </FormItem>
-        <FormItem
+          <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>
-      </>
-    );
-  };
-
-  const renderFooter = () => {
-    return (
-      <>
-        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
-        <Button type="primary" onClick={() => submitForm()}>
-          完成
-        </Button>
+        </Form.Item>
       </>
     );
   };
 
   return (
-    <Modal
-      width={640}
-      bodyStyle={{ padding: '32px 40px 48px' }}
-      destroyOnClose
-      title={formVals.id?'编辑':'创建 MySql 数据源'}
-      visible={modalVisible}
-      footer={renderFooter()}
-      onCancel={() => handleUpdateModalVisible()}
-    >
-      <Form
-        {...formLayout}
-        form={form}
-        initialValues={{
-          id: formVals.id,
-          name: formVals.name,
-          alias: formVals.alias,
-          type: formVals.type,
-          note: formVals.note,
-          enabled: formVals.enabled,
-        }}
-      >
-        {renderContent(formVals)}
-      </Form>
-    </Modal>
+    <>{
+        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 htmlType="button">
+                    测试
+                  </Button>
+                  <Button type="primary" htmlType="button" onClick={() => submitForm()}>
+                    保存
+                  </Button>
+                </Space>
+              </Form.Item>
+            </Form>
+          </>
+        )
+      }</>
   );
 };
 

dlink-web/src/pages/DataBase/data.d.ts

@@ -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

-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>
   );
 };