数据源表单字段调整

packages/jldbq-extenison/src/DataViewWidget.tsx

@@ -52,8 +52,8 @@ class DataViewWidget extends ReactWidget {
       <div
         style={{
           height: '100%',
-          display: 'flex',
-          flexDirection: 'column'
+          display: 'flex'
+          // flexDirection: 'column'
         }}
       >
         <DataView

packages/jldbq-extenison/src/DatasourceForm.tsx

@@ -4,20 +4,11 @@ import { IDatasourceForm, textDatasource } from './api/datasource';
 import { Widget } from '@lumino/widgets';
 import { Input, message, Select } from 'antd';
 
-interface IDatasourceItem {
-  address: string;
-  username: string;
-  password: string;
-  databasename: string;
-  datasourcename: string;
-  type: 'mysql' | 'hive';
-}
-
 interface IProps {
-  value: Partial<IDatasourceItem>;
-  error: keyof IDatasourceItem | null;
-  onChange: (v: Partial<IDatasourceItem>) => void;
-  onConnection: (v: Partial<IDatasourceItem>) => void;
+  value: Partial<IDatasourceForm>;
+  error: keyof IDatasourceForm | null;
+  onChange: (v: Partial<IDatasourceForm>) => void;
+  onConnection: (v: Partial<IDatasourceForm>) => void;
 }
 
 const DatasourceForm: React.FunctionComponent<IProps> = ({
@@ -28,61 +19,63 @@ const DatasourceForm: React.FunctionComponent<IProps> = ({
 }) => {
   return (
     <form className="jldbq-form">
-      <label className={error === 'type' ? 'jldbq-form-error' : ''}>
+      <label className={error === 'datasource' ? 'jldbq-form-error' : ''}>
         <span className="jldbq-form-label">数据源类型:</span>
         <Select
           className="jldbq-form-select"
           placeholder="请选择数据源类型"
-          onChange={(val: any) => onChange({ type: val })}
+          onChange={(val: any) => onChange({ datasource: val })}
         >
           <Select.Option value="mysql">MySQL</Select.Option>
           <Select.Option value="hive">Hive</Select.Option>
         </Select>
       </label>
-      <label className={error === 'datasourcename' ? 'jldbq-form-error' : ''}>
+      <label className={error === 'datasource_name' ? '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 })}
+          value={value.datasource_name || ''}
+          onChange={evt => onChange({ datasource_name: evt.target.value })}
         />
       </label>
-      <label className={error === 'address' ? 'jldbq-form-error' : ''}>
-        <span className="jldbq-form-label">数据源地址:</span>
+      <label className={error === 'jdbc_url' ? 'jldbq-form-error' : ''}>
+        <span className="jldbq-form-label">数据库地址:</span>
         <Input
           className="jldbq-form-input"
           placeholder="示例：host:port"
-          value={value.address || ''}
-          onChange={evt => onChange({ address: evt.target.value })}
+          value={value.jdbc_url || ''}
+          onChange={evt => onChange({ jdbc_url: evt.target.value })}
         />
       </label>
-      <label className={error === 'databasename' ? 'jldbq-form-error' : ''}>
+      <label className={error === 'database_name' ? 'jldbq-form-error' : ''}>
         <span className="jldbq-form-label">数据库名称:</span>
         <Input
           className="jldbq-form-input"
-          placeholder={value.type === 'hive' ? '选填' : '请输入数据库名称'}
-          value={value.databasename || ''}
-          onChange={evt => onChange({ databasename: evt.target.value })}
+          placeholder={
+            value.datasource === 'hive' ? '选填' : '请输入数据库名称'
+          }
+          value={value.database_name || ''}
+          onChange={evt => onChange({ database_name: evt.target.value })}
         />
       </label>
-      <label className={error === 'username' ? 'jldbq-form-error' : ''}>
+      <label className={error === 'jdbc_username' ? 'jldbq-form-error' : ''}>
         <span className="jldbq-form-label">用户名:</span>
         <Input
           className="jldbq-form-input"
           placeholder="请输入用户名"
-          value={value.username || ''}
-          onChange={evt => onChange({ username: evt.target.value })}
+          value={value.jdbc_username || ''}
+          onChange={evt => onChange({ jdbc_username: evt.target.value })}
         />
       </label>
 
-      <label className={error === 'password' ? 'jldbq-form-error' : ''}>
+      <label className={error === 'jdbc_password' ? 'jldbq-form-error' : ''}>
         <span className="jldbq-form-label">密码:</span>
         <Input.Password
           className="jldbq-form-input"
           placeholder="请输入密码"
-          value={value.password || ''}
-          onChange={evt => onChange({ password: evt.target.value })}
+          value={value.jdbc_password || ''}
+          onChange={evt => onChange({ jdbc_password: evt.target.value })}
         />
       </label>
       <span className="jldbq-form-link" onClick={() => onConnection(value)}>
@@ -110,15 +103,7 @@ export class DatasourceFormDialogBody
           this.update();
         }}
         onConnection={async v => {
-          const params = {
-            jdbc_url: v.address,
-            jdbc_username: v.username,
-            jdbc_password: v.password,
-            database_name: v.databasename,
-            datasource_name: v.datasourcename,
-            datasource: v.type
-          } as IDatasourceForm;
-          const res = await textDatasource(params);
+          const res = await textDatasource({ ...v } as IDatasourceForm);
           if (res && res !== 'error') {
             void message.success('测试成功');
           } else {
@@ -131,30 +116,30 @@ export class DatasourceFormDialogBody
 
   getValue(): IDatasourceForm {
     const {
-      address: jdbc_url,
-      username: jdbc_username,
-      password: jdbc_password,
-      databasename: database_name,
-      datasourcename: datasource_name,
-      type: datasource
+      jdbc_url,
+      jdbc_username,
+      jdbc_password,
+      database_name,
+      datasource_name,
+      datasource
     } = this._datasourceItem;
     if (!datasource) {
-      this._setError('type');
+      this._setError('datasource');
     }
     if (!jdbc_url || !validateIpAndPort(jdbc_url)) {
-      this._setError('address');
+      this._setError('jdbc_url');
     }
     if (!jdbc_username) {
-      this._setError('username');
+      this._setError('jdbc_username');
     }
     if (!jdbc_password) {
-      this._setError('password');
+      this._setError('jdbc_password');
     }
     if (!database_name && datasource === 'mysql') {
-      this._setError('databasename');
+      this._setError('database_name');
     }
     if (!datasource_name) {
-      this._setError('datasourcename');
+      this._setError('datasource_name');
     }
     return {
       jdbc_url,
@@ -167,13 +152,13 @@ export class DatasourceFormDialogBody
     };
   }
 
-  private _setError(error: keyof IDatasourceItem): never {
+  private _setError(error: keyof IDatasourceForm): never {
     this._error = error;
     this.update();
     throw new Error(error);
   }
 
-  private _datasourceItem: Partial<IDatasourceItem> = {};
+  private _datasourceItem: Partial<IDatasourceForm> = {};
   private _error: IProps['error'] = null;
   // private _manager: string;
 }

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

@@ -169,8 +169,18 @@ export const fetchTableSchema = async (
       return 'error';
     }
     const formatData = {} as ITableData;
-    formatData['序号'] = data.data.map((item: any, index: number) => index + 1);
-    formatData['字段'] = data.data.map((item: any) => item);
+    const orders = [] as number[];
+    const fields = [] as string[];
+    const attributes = [] as string[];
+    data.data.forEach((item: any, index: number) => {
+      const [field, attribute] = item.split(':');
+      orders.push(index + 1);
+      fields.push(field);
+      attributes.push(attribute);
+    });
+    formatData['序号'] = orders;
+    formatData['字段'] = fields;
+    formatData['属性'] = attributes;
     return formatData;
   } catch (e) {
     console.error(e);