feat: 更多数据连接

.eslintrc.js

@@ -30,7 +30,7 @@ module.exports = {
     // 最大回调深度为 3 层
     'max-nested-callbacks': [2, 3],
     // 禁止普通字符串中出现模板字符串语法
-    'no-template-curly-in-string': 2,
+    'no-template-curly-in-string': 0,
     // 禁止连等赋值
     'no-multi-assign': 2,
     // 禁止使用连续的空格

src/app/app.component.scss

@@ -153,6 +153,46 @@
     margin-left: 12px;
   }
 }
+.more-link{
+  .more-link-item{
+    width: 538px;
+    overflow: hidden auto;
+    left: -10px !important;
+    right: 0px;
+    top: 10px;
+    bottom: 0px;
+    position: absolute;
+    height: 380px;
+    .link-item{
+      margin-left: 10px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      border: solid 1px #fff;
+      &:hover{
+        border: solid 1px #3480f2;
+      }
+      .selected{
+        position: absolute !important;
+        right: -1px;
+        top: -1px;
+        height: 30px;
+        width: 30px;
+        background: url(../img/database-selected.png) center center no-repeat;
+        background-size: contain;
+      }
+      .text{
+        height: 27px;
+        line-height: 27px;
+        padding-left: 2px;
+        padding-right: 2px;
+        text-align: center;
+        white-space: nowrap;
+        background: #F0F3F7;
+      }
+    }
+    
+  }
+}
 .link-font .b-font:before {
   content: "\e759";
   color: inherit;

src/app/app.model.ts

@@ -4,13 +4,14 @@ import {LinkType} from '@ui/type';
 const linkList: LinkType[] = [];
 const Model: ModelType = {
     
-  childContext: ['tab', 'linkList', 'linkSelected', 'linkUpdate'],
+  childContext: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'moreLinkSelected'],
   state () {
     return {
       tab: '数据连接管理',
       linkList,
       linkSelected: {},
       linkUpdate: {},
+      moreLinkSelected:'',
     };
   },
   computed: {

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

@@ -10,7 +10,7 @@ export const getLinks = (linkList: LinkType[]): any => {
       title: item.connectionName,
       id: item.connectionId,
       creator: item.creator,
-      text: item.databaseType.toLocaleUpperCase().replace(' ', '-'),
+      text: item.text ? item.text : '默认',
     });
   });
   

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

@@ -120,13 +120,11 @@ const Model: ModelType = {
       }
     },
     setNewLink(value: string) {
-      console.log('%cvalue: ', 'color: MidnightBlue; background: Aquamarine;', value);
-      console.log(this.model.linkSelected);
       if (this.model.linkSelected && this.model.linkSelected.isSelected) {
         confirm('当前设置尚未保存，是否保存？', (isConfirm: boolean) => {
           if (isConfirm) {
             saveConnection(this.model.linkUpdate).then(() => {
-              this.setEdit(false);
+              this.setEdit(true);
             });
           } else {
             this.setCancel();
@@ -154,15 +152,16 @@ const Model: ModelType = {
         ...this.model.linkList,
       ];
       this.model.linkSelected = {
+        ...data,
         connectionName:name,
         isSelected: true,
-        ...data,
       };
       this.model.linkUpdate = {
-        connectionName:name,
         ...data,
+        connectionName:name,
       };
     },
+    
   },
 };
 BI.model(className, BI.inherit(Fix.Model, Model));

src/app/link_set/more/more.link.component.ts

@@ -0,0 +1,61 @@
+import {WidgetType, Vertical, SearchEditor, Left, Vtape} from '@ui/index';
+import {databaseTyle} from '../select/select.service';
+import MoreLinkItem from './more.link.item.component';
+const className = 'fr.component.linkSet.morelink';
+let morkLinkItem: any = null;
+const Widget: WidgetType = {
+  render() {
+    return {
+      type: Vtape,
+      cls: 'more-link',
+      items: [
+        {
+          el:{
+            type: Vertical,
+            items:[{
+              type: SearchEditor,
+              width: 300,
+              watermark: '搜索',
+            }],
+          },
+          height: 30,
+        },
+        {
+          type: Left,
+          cls:'more-link-item',
+          ref(ref: any) {
+            morkLinkItem = ref;
+          },
+        },
+      ],
+    };
+  },
+  mounted() {
+    this._renderItems();
+  },
+  _renderItems(text = '') {
+    const databaseLink = databaseTyle.slice(12, 12 + 33);
+    const items: any[] = [];
+    const that = this;
+    databaseLink.forEach(item => {
+      items.push({
+        type: MoreLinkItem,
+        text: item.text,
+        name: item.databaseType,
+        selected: text === item.text,
+        listeners: [
+          {
+            eventName: 'EVENT_SELECT',
+            action (text: string) {
+              that._renderItems(text);
+              that.fireEvent('EVENT_SELECT', text);
+            },
+          },
+        ],
+      });
+    });
+    morkLinkItem.populate(BI.createItems(items));
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/link_set/more/more.link.item.component.ts

@@ -0,0 +1,40 @@
+import {WidgetType, Vertical, Img, Label, Layout} from '@ui/index';
+const className = 'fr.component.linkSet.morelink.item';
+const Widget: WidgetType = {
+  render() {
+    const {text, name, selected} = this.options;
+    
+    return {
+      type: Vertical,
+      cls:'link-item',
+      width: 120,
+      height: 117,
+      items:[
+        {
+          type: Img,
+          width: 120,
+          height: 90,
+          src:`./img/${name}.jpg`,
+        }, {
+          type: Layout,
+          cls: 'selected',
+          invisible: !selected,
+          width:30,
+          height: 30,
+        }, {
+          type: Label,
+          cls:'text',
+          text,
+        },
+      ],
+    };
+  },
+  mounted() {
+    const {text} = this.options;
+    this.element.on('click', () => {
+      this.fireEvent('EVENT_SELECT', text);
+    });
+  },
+};
+BI.shortcut(className, BI.inherit(BI.Widget, Widget));
+export default className;

src/app/link_set/more/more.link.service.ts

@@ -0,0 +1,54 @@
+import MoreLink from './more.link.component';
+let SubbitButton: any = null;
+let selectKey = '';
+export const moreLink = (onConfirm?: Function): void => {
+  const id = BI.UUID();
+  let Popovers: any = null;
+  BI.Popovers.create(id, {
+    type: 'bi.bar_popover',
+    size: 'normal',
+    header: '更多数据连接',
+    width: 550,
+    height: 500,
+    body: {
+      type: MoreLink,
+      listeners: [
+        {
+          eventName: 'EVENT_SELECT',
+          action (text: string) {
+            selectKey = text;
+            SubbitButton.setEnable(true);
+          },
+        },
+      ],
+    },
+    footer:{
+      type: 'bi.right_vertical_adapt',
+      lgap: 10,
+      items: [{
+        type: 'bi.button',
+        text: '取消',
+        value: 1,
+        level: 'ignore',
+        handler (v: any) {
+          Popovers.close(v);
+        },
+      }, {
+        type: 'bi.button',
+        text: '确定',
+        disabled: true,
+        value: 0,
+        ref(ref: any) {
+          SubbitButton = ref;
+        },
+        handler (v: any) {
+          Popovers.close(v);
+          onConfirm ? onConfirm(selectKey) : null;
+        },
+      }],
+    },
+    ref(ref: any) {
+      Popovers = ref;
+    },
+  }).open(id);
+};

src/app/link_set/right/right_detail/right.detail.component.ts

@@ -36,14 +36,16 @@ const Widget: WidgetType = {
     };
   },
   mounted() {
+    const linkSelected: LinkType = this.model.linkSelected;
+    const typeEdit = linkSelected.databaseType === 'mysql' ? RightEditMysql : RightEdit;
     rightDetail.populate(BI.createItems([
       {
         type: Title,
-        isEdit: false,
+        isEdit: linkSelected.isSelected,
-        linkSelected:false,
+        linkSelected,
       }, {
-        type: RightShow,
+        type: linkSelected.isSelected ? typeEdit : RightShow,
-        linkSelected:false,
+        linkSelected,
       },
     ]));
   },

src/app/link_set/right/right_title/right.title.component.ts

@@ -20,7 +20,7 @@ const Widget: WidgetType = {
         {
           type: Label,
           cls: 'right-title-text',
-          text: `数据连接(${linkSelected.databaseType.toLocaleUpperCase().replace('-', ' ')})`,
+          text: `数据连接(${linkSelected.text ? linkSelected.text : '默认'})`,
         },
         {
           type: Button,

src/app/link_set/select/select.component.ts

@@ -1,5 +1,6 @@
 import {WidgetType, Combo, ButtonGroup, TextItem, Vertical} from '@ui';
 import selectModel from '../link-set.model';
+import {moreLink} from '../more/more.link.service';
 const linkList = [
   'APACHE KYLIN', 'DERBY', 'HP Vertica', 'IBM DB2', 'INFORMIX', 'Microsoft SQL Server', 'MySQL', 'Oracle', 'Privotal Greenplum Database', 'Postgresql', 'GaussDB 200',
 ];
@@ -49,7 +50,7 @@ const Widget: WidgetType = {
             width: 152,
             text: '其他',
             title:'其他',
-            value: 'other',
+            value: '其他',
           }],
           layouts: [{
             type: Vertical,
@@ -60,7 +61,13 @@ const Widget: WidgetType = {
       listeners:[{
         eventName: 'EVENT_CHANGE',
         action: (v: string) => {
+          if (v === 'more') {
+            moreLink((text: string) => {
+              this.store.setNewLink(text);
+            });
+          } else {
             this.store.setNewLink(v);
+          }
           combo.hideView();
         },
       }],

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

@@ -67,6 +67,195 @@ export const databaseTyle = [
     driver: 'com.mysql.jdbc.Driver',
     url: 'jdbc:mysql://localhost/dbname',
   },
+  {
+    text:'其他',
+    databaseType: 'other',
+    driver: 'org.h2.Driver',
+    url: 'jdbc:h2://${ENV_HOME}/../databaseName',
+  },
+  {
+    text:'ADS',
+    databaseType:'ads',
+    driver:'com.mysql.jdbc.Driver',
+    url:'jdbc:mysql://hostname:port/my_ads_db',
+  },
+  {
+    text:'Amazon Redshift',
+    databaseType:'amazon-redshift',
+    driver: 'com.amazon.redshift.jdbc4.Driver',
+    drivers:['com.amazon.redshift.jdbc4.Driver', 'com.amazon.redshift.jdbc41.Driver'],
+    url:'jdbc:redshift://endpoint:port/database',
+  },
+  {
+    text:'APACHE IMPALA',
+    databaseType:'apache-impala',
+    driver:'com.cloudera.impala.jdbc41.Driver',
+    url:'jdbc:impala://hostname:port/_impala_builtins',
+  },
+  {
+    text:'APACHE KYLIN',
+    databaseType:'apache-kylin',
+    driver:'org.apache.kylin.jdbc.Driver',
+    url:'jdbc:kylin://<hostname>:<port>/<kylin_project_name>',
+  },
+  {
+    text:'APACHE Phoenix',
+    databaseType: 'apache-phoenix',
+    driver: 'org.apache.phoenix.jdbc.PhoenixDriver',
+    url: 'jdbc:phoenix:hostname:port/dbname',
+  },
+  {
+    text:'DERBY',
+    databaseType: 'derby',
+    driver: 'org.apache.derby.jdbc.ClientDriver',
+    url: 'jdbc:derby://localhost:1527/',
+  },
+  {
+    text:'Gbase 8A',
+    databaseType: 'gbase-8a',
+    driver: 'com.gbase.jdbc.Driver',
+    url: 'jdbc:gbase://hostname:port/dbname',
+  },
+  {
+    text:'Gbase 8S',
+    databaseType: 'gbase-8s',
+    driver: 'com.gbasedbt.jdbc.IfxDriver',
+    url: 'jdbc:gbasedbt-sqli://{host}:{port}/{database}',
+  },
+  {
+    text:'Gbase 8T',
+    databaseType: 'gbase-8t',
+    driver: 'com.informix.jdbc.IfxDriver',
+    url: 'jdbc:informix-sqli://{host}:{port}/{database}:INFORMIXSERVER={server}',
+  },
+  {
+    text:'H2',
+    databaseType: 'h2',
+    driver: 'org.h2.Driver',
+    url: 'jdbc:h2://${ENV_HOME}/../databaseName',
+  },
+  {
+    text:'华为云DWS',
+    databaseType: 'hw-dws',
+    driver: 'org.postgresql.Driver',
+    url: 'jdbc:postgresql://hostname:port/dbname',
+  },
+  {
+    text:'FusionInsight elk',
+    databaseType: 'hw-elk',
+    driver: 'org.postgresql.Driver',
+    url: 'jdbc:postgresql://hostname:port/dbname',
+  },
+  {
+    text:'FusionInsight HD',
+    databaseType: 'hw-fusioninsight-hd',
+    driver: 'org.apache.hive.jdbc.HiveDriver',
+    url: 'jdbc:hive2://10.135.0.110:24002,10.135.0.67:24002,10.135.0.66:24002/;serviceDiscoveryMode=zooKeeper;zooKeeperNamespace=hiveserver2;sasl.qop=auth-conf;auth=KERBEROS;zk.principal=zookeeper/hadoop;principal=hive/hadoop.hadoop.com@HADOOP.COM;',
+  },
+  {
+    text:'GaussDB 200',
+    databaseType: 'hw-libr-a',
+    driver: 'org.postgresql.Driver',
+    url: 'jdbc:postgresql://hostname:port/dbname',
+  }, {
+    text:'Hadoop Hive',
+    databaseType: 'hadoop-hive',
+    driver: 'org.apache.hive.jdbc.HiveDriver',
+    url: 'jdbc:hive2://hostname:port/databasename',
+  }, {
+    text:'Hbase',
+    databaseType: 'hbase',
+    driver: 'org.apache.phoenix.jdbc.PhoenixDriver',
+    url: 'jdbc:phoenix:hostname:port/dbname',
+  }, {
+    text:'HP Vertica',
+    databaseType: 'hp-vertica',
+    driver: 'com.vertica.jdbc.Driver',
+    url: 'jdbc:vertica://ip:port/databaseName',
+  }, {
+    text:'Hsql',
+    databaseType: 'hsql',
+    driver: 'com.fr.third.org.hsqldb.jdbcDriver',
+    url: 'jdbc:hsqldb:file:[PATH_TO_DB_FILES]',
+  }, {
+    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:'KINGBASE',
+    databaseType: 'kingbase',
+    driver: 'com.kingbase.Driver',
+    url: 'jdbc:kingbase://hostname:port',
+  }, {
+    text:'Microsoft SQL Server',
+    databaseType: 'sql-server',
+    driver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver',
+    url: 'jdbc:sqlserver://localhost:1433;databaseName=',
+  }, {
+    text:'MySQL',
+    databaseType: 'mysql',
+    driver: 'com.mysql.jdbc.Driver',
+    drivers:['com.mysql.jdbc.Driver', 'org.gjt.mm.mysql.Driver'],
+    url: 'jdbc:mysql://localhost/dbname',
+  },
+  {
+    text:'Oracle',
+    databaseType: 'oracle',
+    driver: 'oracle.jdbc.driver.OracleDriver',
+    url: 'jdbc:oracle:thin:@localhost:1521:databaseName',
+  },
+  {
+    text:'Pivotal 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:'Presto',
+    databaseType: 'presto',
+    driver: 'com.facebook.presto.jdbc.PrestoDriver',
+    url: 'jdbc:presto://host:port/catalog',
+  }, {
+    text:'SAP HANA',
+    databaseType: 'sap-hana',
+    driver: 'com.sap.db.jdbc.Driver',
+    url: 'jdbc:sap://hostname:port?reconnect=true',
+  }, {
+    text:'SAP Sybase',
+    databaseType: 'sap-sybase',
+    driver: 'com.sybase.jdbc4.jdbc.SybDriver',
+    url: 'jdbc:sybase:Tds:hostname:2638/databasename',
+  }, {
+    text:'SPARK',
+    databaseType: 'spark',
+    driver: 'org.apache.hive.jdbc.HiveDriver',
+    url: 'jdbc:hive2://hostname:port/databasename',
+  }, {
+    text:'Sqlite',
+    databaseType: 'sqlite',
+    driver: 'org.sqlite.JDBC',
+    url: 'jdbc:sqlite:[PATH_TO_DB_FILES]',
+  }, {
+    text:'TeraData',
+    databaseType: 'teradata',
+    driver: 'com.ncr.teradata.TeraDriver',
+    url: 'jdbc:teradata://localhost/CLIENT_CHARSET=EUC_CN,TMODE=TERA,CHARSET=ASCII,LOB_SUPPORT',
+  }, {
+    text:'TRANSWARP INCEPTOR',
+    databaseType: 'transwarp-inceptor',
+    driver: 'org.apache.hive.jdbc.HiveDriver',
+    url: 'jdbc:hive2://hostname:port/databasename',
+  },
 ];
 
 export const getCnnectionName = (links: LinkType[]): string => {

src/ui/fineui.ts

@@ -32,6 +32,8 @@ export const Combo = 'bi.combo';
 export const TextValueCombo = 'bi.text_value_combo';
 export const TextBubblePopupBarView = 'bi.text_bubble_bar_popup_view';
 export const BubbleCombo = 'bi.bubble_combo';
+export const SearchEditor = 'bi.search_editor';
+export const Img = 'bi.img';
 
 // 布局
 export const VerticalAdapt = 'bi.vertical_adapt';

src/ui/index.ts

@@ -1,5 +1,6 @@
 export * from './fineui';
 export interface WidgetType{
+  [key: string]: any;
   _store?: Function;
   watch?: object;
   props?: object;

webpack.config.js

@@ -27,7 +27,8 @@ module.exports = env => {
       }
     },
     plugins: [htmlWebpackPlugin, new MiniCssExtractPlugin({filename: `style.css`}), new CopyPlugin([
-      { from: 'src/lib', to: 'lib' }
+      { from: 'src/lib', to: 'lib' },
+      { from: 'src/img', to: 'img' }
     ])], 
     module: {
       rules: [
@@ -50,7 +51,7 @@ module.exports = env => {
             'css-loader','sass-loader'
           ]
         },{
-          test:/(\.png|\.gif|\.svg)$/,
+          test:/(\.jpg|\.png|\.gif|\.svg)$/,
           exclude: /node_modules/,
           use:[{
             loader: 'file-loader',