fix: 使用loadingbar

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

@@ -12,12 +12,6 @@ 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;
@@ -30,8 +24,5 @@ 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, LoadingBar } from 'ui';
+import { CenterAdapt, Label, Layout, Vtape, Loader } from 'ui';
 import { ListItemXtype } from './list_item/list_item';
 import { ConnectionListModel, ConnectionListModelXtype } from './list.model';
 import { Connection } from '../../../crud/crud.typings';
@@ -61,42 +61,17 @@ export class ConnectionList extends BI.LoadingPane {
         }
         
         return {
-            type: Vertical,
-            items: [{
-                type: ButtonGroup,
-                layouts: [{
-                    type: Vertical,
-                }],
-                items: this.renderList(),
-                ref: (_ref: any) => {
-                    this.groupWidget = _ref;
+            type: Loader,
+            itemsCreator: (options: {times: number}, populate) => {
+                populate(this.renderList((options.times - 1) * 50, options.times * 50));
             },
-            }, {
-                type: LoadingBar,
-                ref: (_ref: any) => {
-                    this.loadingBar = _ref;
-                },
-                handler: () => {
-                    this.loadingBar.setLoading();
-                    this.store.setItemNum(this.model.showItemNum + 50);
-                },
-            }],
+            hasNext: options => options.times * 50 < BI.size(this.model.connections),
             
         };
     }
 
-    created() {
-        if (this.model.showItemNum) {
-            BI.size(this.model.connections) > this.model.showItemNum ?
-                this.loadingBar.setLoaded() :
-                null;
-        }
-    }
-
-    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) => {
+    private renderList(start = 0, end = 0) {
+        return this.model.connections.slice(start, end).map((item: Connection) => {
             return {
                 type: ListItemXtype,
                 name: item.connectionName,

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 Loader = 'bi.loader';
 
 // 布局
 export const VerticalAdapt = 'bi.vertical_adapt';

webpack/webpack.dev.js

@@ -44,7 +44,7 @@ module.exports = merge(common, {
     },
     devServer: {
         contentBase: path.join(__dirname, '..'),
-        port: 10002,
+        port: 10003,
         liveReload: true,
         proxy: {
             '/webroot/decision/v10': {