feat: 添加数据源表单新增字段

packages/jldbq-extenison/src/DatasourceForm.tsx

@@ -9,6 +9,7 @@ interface IDatasourceItem {
   username: string;
   password: string;
   databasename: string;
+  datasourcename: string;
   type: 'mysql' | 'hive';
 }
 
@@ -16,12 +17,14 @@ interface IProps {
   value: Partial<IDatasourceItem>;
   error: keyof IDatasourceItem | null;
   onChange: (v: Partial<IDatasourceItem>) => void;
+  onConnection: (v: Partial<IDatasourceItem>) => void;
 }
 
 const DatasourceForm: React.FunctionComponent<IProps> = ({
   value,
   error,
-  onChange
+  onChange,
+  onConnection
 }) => {
   return (
     <form className="jldbq-form">
@@ -30,12 +33,21 @@ const DatasourceForm: React.FunctionComponent<IProps> = ({
         <Select
           className="jldbq-form-select"
           placeholder="请选择数据源类型"
-          onChange={(value: any) => onChange({ type: value })}
+          onChange={(val: any) => onChange({ type: val })}
         >
           <Select.Option value="mysql">MySQL</Select.Option>
           <Select.Option value="hive">Hive</Select.Option>
         </Select>
       </label>
+      <label className={error === 'datasourcename' ? 'jldbq-form-error' : ''}>
+        <span className="jldbq-form-label">名称:</span>
+        <Input
+          className="jldbq-form-input"
+          placeholder="请输入名称"
+          value={value.datasourcename || ''}
+          onChange={evt => onChange({ datasourcename: evt.target.value })}
+        />
+      </label>
       <label className={error === 'address' ? 'jldbq-form-error' : ''}>
         <span className="jldbq-form-label">数据源地址:</span>
         <Input
@@ -45,6 +57,18 @@ const DatasourceForm: React.FunctionComponent<IProps> = ({
           onChange={evt => onChange({ address: evt.target.value })}
         />
       </label>
+
+      {value.type === 'mysql' && (
+        <label className={error === 'databasename' ? 'jldbq-form-error' : ''}>
+          <span className="jldbq-form-label">数据库名称:</span>
+          <Input
+            className="jldbq-form-input"
+            placeholder="请输入数据库名称"
+            value={value.databasename || ''}
+            onChange={evt => onChange({ databasename: evt.target.value })}
+          />
+        </label>
+      )}
       <label className={error === 'username' ? 'jldbq-form-error' : ''}>
         <span className="jldbq-form-label">用户名:</span>
         <Input
@@ -54,6 +78,7 @@ const DatasourceForm: React.FunctionComponent<IProps> = ({
           onChange={evt => onChange({ username: evt.target.value })}
         />
       </label>
+
       <label className={error === 'password' ? 'jldbq-form-error' : ''}>
         <span className="jldbq-form-label">密码:</span>
         <Input.Password
@@ -63,15 +88,9 @@ const DatasourceForm: React.FunctionComponent<IProps> = ({
           onChange={evt => onChange({ password: evt.target.value })}
         />
       </label>
-      <label className={error === 'databasename' ? 'jldbq-form-error' : ''}>
-        <span className="jldbq-form-label">数据库名称:</span>
-        <Input
-          className="jldbq-form-input"
-          placeholder="请输入数据库名称"
-          value={value.databasename || ''}
-          onChange={evt => onChange({ databasename: evt.target.value })}
-        />
-      </label>
+      <span className="jldbq-form-link" onClick={() => onConnection(value)}>
+        测试连接
+      </span>
     </form>
   );
 };
@@ -93,6 +112,7 @@ export class DatasourceFormDialogBody
           this._error = null;
           this.update();
         }}
+        onConnection={v => console.log('val', v)}
       />
     );
   }
@@ -103,6 +123,7 @@ export class DatasourceFormDialogBody
       username: user,
       password,
       databasename,
+      datasourcename,
       type: source
     } = this._datasourceItem;
     if (!source) {
@@ -119,9 +140,12 @@ export class DatasourceFormDialogBody
     if (!password) {
       this._setError('password');
     }
-    if (!databasename) {
+    if (!databasename && source === 'mysql') {
       this._setError('databasename');
     }
+    if (!datasourcename) {
+      this._setError('datasourcename');
+    }
     return {
       host,
       user,
@@ -129,8 +153,9 @@ export class DatasourceFormDialogBody
       password,
       charset: 'utf8',
       source,
-      databasename,
-      sourcename: databasename,
+      databasename: databasename as string,
+      datasourcename,
+      sourcename: databasename as string,
       manager: this._manager
     };
   }

packages/jldbq-extenison/src/DatasyncView.tsx

@@ -68,6 +68,7 @@ class DatasyncFormDialogBody extends ReactWidget {
             manager: 'manager',
             source: 'mysql',
             databasename: 'default',
+            datasourcename: 'default',
             sourcename: 'default'
           }
         ]}

packages/jldbq-extenison/src/api/datasource.ts

@@ -13,6 +13,7 @@ export interface IDatasource {
   manager: string;
   source: DbType;
   databasename: string;
+  datasourcename: string;
   sourcename: string;
 }
 

packages/jldbq-extenison/style/dsform.css

@@ -33,3 +33,9 @@
   margin-left: 15px;
   font-size: 12px;
 }
+
+.jldbq-form .jldbq-form-link {
+  text-align: end;
+  color: #4883fb;
+  cursor: pointer;
+}