fix: KERNEL-1395 数据连接列表分页显示

src/modules/pages/connection/list/list.model.ts

@@ -12,6 +12,12 @@ export class ConnectionListModel extends Model<{
 }> {
     context = ['connections', 'connectionSelected'];
 
+    state() {
+        return {
+            showItemNum: 50,
+        };
+    }
+
     actions = {
         setConnections: ():Promise<void> => api.getConnectionlist().then(data => {
             this.model.connections = data.data;
@@ -24,5 +30,8 @@ export class ConnectionListModel extends Model<{
                 resolve();
             });
         }),
+        setItemNum: (num: number) => {
+            this.model.showItemNum = num;
+        },
     }
 }

src/modules/pages/connection/list/list.ts

@@ -1,5 +1,5 @@
 import { shortcut, store } from '@core/core';
-import { ButtonGroup, Vertical, CenterAdapt, Label, Layout, Vtape } from 'ui';
+import { ButtonGroup, Vertical, CenterAdapt, Label, Layout, Vtape, LoadingBar } from 'ui';
 import { ListItemXtype } from './list_item/list_item';
 import { ConnectionListModel, ConnectionListModelXtype } from './list.model';
 import { Connection } from '../../../crud/crud.typings';
@@ -12,6 +12,7 @@ export class ConnectionList extends BI.LoadingPane {
     model: ConnectionListModel['model'];
 
     groupWidget: any;
+    loadingBar: any;
 
     beforeInit(cb: Function) {
         this.store.setConnections().then(() => {
@@ -20,13 +21,20 @@ export class ConnectionList extends BI.LoadingPane {
     }
 
     watch = {
-        connections() {
+        connections: () => {
             this.groupWidget.populate(this.renderList());
         },
+        showItemNum: () => {
+            this.groupWidget.addItems(this.renderList(this.model.showItemNum - 50));
+            BI.size(this.model.connections) > this.model.showItemNum ?
+                this.loadingBar.setLoaded() :
+                this.loadingBar.setEnd();
+        },
     }
 
     render() {
-        if (this.model.connections.length === 0) {
+        const connectionLength = BI.size(this.model.connections);
+        if (connectionLength === 0) {
             return {
                 type: CenterAdapt,
                 items: [
@@ -54,19 +62,37 @@ export class ConnectionList extends BI.LoadingPane {
         }
         
         return {
-            type: ButtonGroup,
-            layouts: [{
-                type: Vertical,
+            type: Vertical,
+            items: [{
+                type: ButtonGroup,
+                layouts: [{
+                    type: Vertical,
+                }],
+                items: this.renderList(),
+                ref: (_ref: any) => {
+                    this.groupWidget = _ref;
+                },
+            }, {
+                type: LoadingBar,
+                ref: (_ref: any) => {
+                    this.loadingBar = _ref;
+                    connectionLength > this.model.showItemNum ?
+                        this.loadingBar.setLoaded() :
+                        null;
+                },
+                handler: () => {
+                    this.loadingBar.setLoading();
+                    this.store.setItemNum(this.model.showItemNum + 50);
+                },
             }],
-            items: this.renderList(),
-            ref: (_ref: any) => {
-                this.groupWidget = _ref;
-            },
+            
         };
     }
 
-    private renderList() {
-        return this.model.connections.map((item: Connection) => {
+    private renderList(start = 0) {
+        const itemNum = Math.min(this.model.connections.length, this.model.showItemNum);
+        
+        return this.model.connections.slice(start, itemNum).map((item: Connection) => {
             return {
                 type: ListItemXtype,
                 name: item.connectionName,

src/modules/pages/connection/list/list_item/list_item.model.ts

@@ -76,7 +76,7 @@ export class ListItemModel extends Model<{
             
             return api.updateConnection(connection).then(re => {
                 if (!re.errorCode) {
-                    this.store.setIsEdit(false, oldName);
+                    this.setIsEdit(false, oldName);
                     this.model.connections = this.model.connections.map(item => {
                         return {
                             ...item,

src/ui/fineui.ts

@@ -50,7 +50,7 @@ export const Img = 'bi.img';
 export const BubbleCombo = 'bi.bubble_combo';
 export const TextBubblePopupBarView = 'bi.text_bubble_bar_popup_view';
 export const TextValueCombo = 'bi.text_value_combo';
-
+export const LoadingBar = 'bi.loading_bar';
 
 // 布局
 export const VerticalAdapt = 'bi.vertical_adapt';