feat: 完成数据库连接列表的显示

.eslintignore

@@ -2,3 +2,4 @@ dist/*.js
 src/assets/*
 src/lib/*
 webpack.config.js
+curd.mock.ts

.eslintrc.js

@@ -276,7 +276,6 @@ module.exports = {
     "no-extra-boolean-cast": "error", // 禁止不必要的布尔类型转换
     // 其他最佳实践或规范
     "strict": "error", // 使用强制模式开关use strict;
-    "no-extra-parens": "error", // 禁止冗余的括号
     // "@typescript-eslint/no-extra-parens": ["error"],
     "no-eval": "error", // 禁用 eval()
     "no-with": "error", // 禁用 with 语句

src/app/app.component.scss

@@ -46,4 +46,48 @@
       }
     }
   }
+  .left-list{
+    margin: 10px;
+    .left-item{
+      height: 24px;
+      line-height: 24px;
+      cursor: pointer;
+      &:hover{
+        background-color: rgba(54,133,242,.05);
+        .icons{
+          display: inline;
+        }
+      }
+      .icons{
+        float: right !important;
+        display: none;
+        .b-font{
+          font-size: 16px;
+        }
+      }
+    }
+    .left-item-selected{
+      background-color: rgba(54,133,242,.05);
+      .bi-text{
+        color: #3685f2;
+      }
+    }
+  }
+}
+
+.link-font .b-font:before {
+  content: "\e759";
+  color: inherit;
+}
+.link-text-font .b-font:before {
+  content: "\e763";
+  color: inherit;
+}
+.info-font .b-font:before {
+  content: "\e63c";
+  color: inherit;
+}
+.delete-font .b-font:before {
+  content: "\e6c4";
+  color: inherit;
 }

src/app/app.component.ts

@@ -1,8 +1,10 @@
 import {Vtape} from '../ui/index';
+import {LinkType} from '@ui/type';
 import appModel from './app.model';
 import title from './title/title.component';
 import linkSet from './link_set/link-set.component';
 import linkStatus from './link_status/link_status.component';
+import {fetchLinkList} from '../shared/crud/crud.request';
 import './app.component.scss';
 
 const className = 'fr.main';
@@ -30,6 +32,12 @@ const Widget = BI.inherit(BI.Widget, {
     };
   },
   mounted() {
+    /**
+     * 获取数据连接列表
+     */
+    fetchLinkList((linkList: LinkType[]) => {
+      this.store.setLinkList(linkList);
+    });
   },
 });
 BI.shortcut(className, Widget);

src/app/app.model.ts

@@ -1,12 +1,15 @@
 const className = 'fr.model.main';
 import {ModelType} from '@ui';
+import {LinkType} from '@ui/type';
+const linkList: LinkType[] = [];
 const Model: ModelType = {
     
-  childContext: ['tab', 'newLink'],
+  childContext: ['tab', 'linkList', 'linkSelected'],
   state () {
     return {
       tab: '数据连接管理',
-      newLink: '',
+      linkList,
+      linkSelected: {},
     };
   },
   computed: {
@@ -14,7 +17,8 @@ const Model: ModelType = {
   },
 
   actions: {
-    initData() {
+    setLinkList(value: LinkType[]) {
+      this.model.linkList = value;
     },
   },
 };

src/app/link_set/left/left.component.ts

@@ -0,0 +1,26 @@
+import {WidgetType, Vertical} from '@ui';
+import leftModel from './left.model';
+import {LinkType} from '@ui/type';
+import {getLinks} from './left.service';
+const className = 'fr.component.linkset.left';
+let leftContent: any = null;
+const Widget: WidgetType = {
+  _store() {
+    return BI.Models.getModel(leftModel);
+  },
+  watch:{
+    linkList(linkList: LinkType[]) {
+      leftContent.populate(BI.createItems(getLinks(linkList)));
+    },
+  },
+  render() {
+    return {
+      type: Vertical,
+      ref(_ref: any) {
+        leftContent = _ref;
+      },
+    };
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/link_set/left/left.model.ts

@@ -0,0 +1,8 @@
+const className = 'fr.model.linkSet.left';
+const Model = BI.inherit(Fix.Model, {
+  context: ['linkList'],
+  actions: {
+  },
+});
+BI.model(className, Model);
+export default className;

src/app/link_set/left/left.service.ts

@@ -0,0 +1,17 @@
+import {LinkType} from '@ui/type';
+import LeftItem from './left_item/left.item.component';
+
+export const getLinks = (linkList: LinkType[]): any => {
+  const links: any[] = [];
+  linkList.forEach((item: LinkType) => {
+    links.push({
+      type: LeftItem,
+      extraCls: item.isSelected ? 'left-item-selected' : '',
+      title: item.connectionName,
+      id: item.connectionId,
+      creator: item.creator,
+    });
+  });
+  
+  return links;
+};

src/app/link_set/left/left_item/left.item.component.ts

@@ -0,0 +1,81 @@
+import {WidgetType, Left, Label, Icon} from '@ui';
+import LeftItemModel from './left.item.model';
+const className = 'fr.component.linkSet.left.item';
+const Widget: WidgetType = {
+  props: {
+    title:'',
+    id:'',
+    creator: '',
+  },
+  _store() {
+    return BI.Models.getModel(LeftItemModel);
+  },
+  render() {
+    const {title, extraCls} = this.options;
+    
+    return {
+      type: Left,
+      cls: 'left-item',
+      extraCls,
+      items: [
+        {
+          type: Icon,
+          cls: 'link-font',
+          height: 24,
+          width: 26,
+          text: '连接',
+          title,
+        },
+        {
+          type: Label,
+          textAlign: 'left',
+          text: title,
+          title,
+        },
+        {
+          type: Left,
+          cls: 'icons',
+          items: [
+            {
+              type: Icon,
+              cls: 'link-text-font',
+              height: 24,
+              width: 26,
+              title: '测试连接',
+            },
+            {
+              type: Icon,
+              cls: 'copy-font',
+              height: 24,
+              width: 26,
+              title: '复制',
+            },
+            {
+              type: Icon,
+              cls: 'info-font',
+              height: 24,
+              width: 26,
+              title: '提示',
+            },
+            {
+              type: Icon,
+              cls: 'delete-font',
+              height: 24,
+              width: 26,
+              title: '删除',
+            },
+          ],
+        },
+        
+      ],
+    };
+  },
+  mounted() {
+    const {title} = this.options;
+    this.element.on('click', () => {
+      this.store.setLinkSelected(title);
+    });
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/link_set/left/left_item/left.item.model.ts

@@ -0,0 +1,22 @@
+import {LinkType} from '@ui/type';
+
+const className = 'fr.model.linkSet.left.item';
+const Model = BI.inherit(Fix.Model, {
+  context: ['linkList', 'linkSelected'],
+  actions: {
+    setLinkSelected(name: string) {
+      this.model.linkList.forEach((item: LinkType) => {
+        item.isSelected = item.connectionName === name;
+        if (item.connectionName === name) {
+          this.model.linkSelected = {
+            ...item,
+            idEdit: false,
+          };
+        }
+      });
+      this.model.linkList = [...this.model.linkList];
+    },
+  },
+});
+BI.model(className, Model);
+export default className;

src/app/link_set/link-set.component.ts

@@ -1,4 +1,5 @@
 import {Htape, WidgetType, Vtape, Left} from '@ui';
+import LeftList from './left/left.component';
 import linkSetModel from './link-set.model';
 import Select from './select/select.component';
 const className = 'fr.linkset';
@@ -32,10 +33,8 @@ const Widget: WidgetType = {
               },
               height: 40,
             }, {
-              type: 'bi.label',
-              cls: 'layout-bg2',
-              textAlign: 'left',
-              text: '高度充满剩余空间',
+              type: LeftList,
+              cls: 'left-list',
             },
           ],
         },

src/app/link_set/select/select.model.ts

@@ -1,9 +1,28 @@
+import {LinkType} from '@ui/type';
+import {databaseTyle, getCnnectionName} from './select.service';
+
 const className = 'fr.model.linkset.select';
 const Model = BI.inherit(Fix.Model, {
-  context: ['newLink'],
+  context: ['linkList', 'linkSelected'],
   actions: {
     setNewLink(value: string) {
-      this.model.newLink = value;
+      const name = getCnnectionName(this.model.linkList);
+      let data = {};
+      databaseTyle.forEach(item => {
+        if (item.text === value) {
+          data = item;
+        }
+      });
+      this.model.linkList.push({
+        connectionName:name,
+        isSelected: true,
+        ...data,
+      });
+      this.model.linkSelected = {
+        connectionName:name,
+        idEdit: true,
+        ...data,
+      };
     },
   },
 });

src/app/link_set/select/select.service.ts

@@ -0,0 +1,86 @@
+import {LinkType} from '@ui/type';
+
+export const databaseTyle = [
+  {
+    text:'APACHE KYLIN',
+    databaseType: 'apache-kylin',
+    driver: 'org.apache.kylin.jdbc.Driver',
+    url: 'jdbc:kylin://<hostname>:<port>/<kylin_project_name>',
+  },
+  {
+    text:'DERBY',
+    databaseType: 'derby',
+    driver: 'org.apache.derby.jdbc.ClientDriver',
+    url: 'jdbc:derby://localhost:1527/',
+  },
+  {
+    text:'HP Vertica',
+    databaseType: 'hp-vertica',
+    driver: 'com.vertica.jdbc.Driver',
+    url: 'jdbc:vertica://ip:port/databaseName',
+  },
+  {
+    text:'IBM DB2',
+    databaseType: 'ibm-db2',
+    driver: 'com.ibm.db2.jcc.DB2Driver',
+    url: 'jdbc:db2://hostname:port/dbname',
+  },
+  {
+    text:'INFORMIX',
+    databaseType: 'informix',
+    driver: 'com.informix.jdbc.IfxDriver',
+    url: 'jdbc:informix-sqli://{host}:{port}/{database}:INFORMIXSERVER={server}',
+  },
+  {
+    text:'Microsoft SQL Server',
+    databaseType: 'sql-server',
+    driver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver',
+    url: 'jdbc:sqlserver://localhost:1433;databaseName=',
+  },
+  {
+    text:'Oracle',
+    databaseType: 'oracle',
+    driver: 'oracle.jdbc.driver.OracleDriver',
+    url: 'jdbc:oracle:thin:@localhost:1521:databaseName',
+  },
+  {
+    text:'Privotal Greenplum Database',
+    databaseType: 'pivotal-greenplum-database',
+    driver: 'org.postgresql.Driver',
+    url: 'jdbc:postgresql://hostname:port/dbname',
+  },
+  {
+    text:'Postgresql',
+    databaseType: 'postgresql',
+    driver: 'org.postgresql.Driver',
+    url: 'jdbc:postgresql://hostname:port/dbname',
+  },
+  {
+    text:'GaussDB 200',
+    databaseType: 'hw-libr-a',
+    driver: 'org.postgresql.Driver',
+    url: 'jdbc:postgresql://hostname:port/dbname',
+  },
+  {
+    text:'MySQL',
+    databaseType: 'mysql',
+    driver: 'com.mysql.jdbc.Driver',
+    url: 'jdbc:mysql://localhost/dbname',
+  },
+];
+
+export const getCnnectionName = (links: LinkType[]): string => {
+  let nameIndex = 0;
+  links.forEach(link => {
+    link.isSelected = false;
+    if (link.connectionName.startsWith('数据连接')) {
+      const name = link.connectionName.replace('数据连接', '0');
+      const index = parseInt(name, 10) + 1;
+      if (index > nameIndex) {
+        nameIndex = index;
+      }
+    }
+  });
+  
+  return `数据连接${nameIndex > 0 ? nameIndex : ''}`;
+};

src/shared/crud/crud.request.ts

@@ -0,0 +1,12 @@
+import {linkList} from './curd.mock';
+const Dec: any = (window as any).parent.Dec;
+
+export function fetchLinkList(callback: Function): void {
+  if (Dec) {
+    Dec.reqGet('/v10/config/connection/list', 'getInstalledPlugins', (res: any) => {
+      callback(res.data);
+    });
+  } else {
+    callback(linkList.data);
+  }
+}

src/shared/crud/curd.mock.ts

@@ -0,0 +1 @@
+export const linkList = {"data":[{"connectionId":"8c1c52f1-3d0a-429e-b35f-ee1e085a8b72","database":"","connectionName":"FRDemo","driver":"org.sqlite.JDBC","url":"jdbc:sqlite://${ENV_HOME}/../help/FRDemo.db","user":"","password":"","queryType":"","newCharsetName":'null',"originalCharsetName":'null',"validationQuery":"","schema":"","testOnBorrow":false,"maxActive":50,"options":'null',"port":0,"authType":"","creator":"designer","principal":"","keyPath":"","databaseType":"designer","privilegeDetailBeanList":'null'}]}

src/ui/fineui.ts

@@ -1,4 +1,5 @@
 export const TextItem = 'bi.text_item';
+export const Icon = 'bi.icon_label';
 export const IconTextItem = 'bi.icon_text_item';
 export const IconTextIconItem = 'bi.icon_text_icon_item';
 export const IconButton = 'bi.icon_button';

src/ui/index.ts

@@ -2,6 +2,7 @@ export * from './fineui';
 export interface WidgetType{
   _store?: Function;
   watch?: object;
+  props?: object;
   render: Function;
   mounted?: Function;
 }

src/ui/type.ts

@@ -0,0 +1,25 @@
+export interface LinkType{
+  connectionId?: string;
+  database?: string;
+  connectionName?: string;
+  driver?: string;
+  url?: string;
+  user?: string;
+  password?: string;
+  queryType?: string;
+  newCharsetName?: any;
+  originalCharsetName?: any;
+  validationQuery?: string;
+  schema?: string;
+  testOnBorrow?: boolean;
+  maxActive?: number;
+  options?: any;
+  port?: number;
+  authType?: string;
+  creator?: string;
+  principal?: string;
+  keyPath?: string;
+  databaseType?: string;
+  privilegeDetailBeanList?: any;
+  isSelected?: boolean;
+}

tsconfig.json

@@ -13,6 +13,8 @@
     "paths":{
       "@ui/*": ["src/ui/*"],
       "@ui": ["src/ui/index"],
+      "@types/*": ["types/*"],
+      "@types": ["src/ui/index"],
     }
   },
   "include": [

types/globals.d.ts

@@ -4,3 +4,4 @@ interface Obj {
 
 declare let BI: Obj;
 declare const Fix: Obj;
+declare const Dec: Obj;

webpack.config.js

@@ -22,6 +22,7 @@ module.exports = env => {
       extensions: [ '.ts', '.js' ],
       alias:{
         "@ui": path.resolve("src/ui"),
+        "@types": path.resolve("types"),
       }
     },
     plugins: [htmlWebpackPlugin, new MiniCssExtractPlugin({filename: `style.css`}), new CopyPlugin([