feat:crud plugin和dataAppendTo属性

baidu · Feb 21, 2025 · bc00136 · bc00136
1 parent af38185
commit bc00136
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 8 deletions.
diff --git a/packages/amis-core/src/store/crud.ts b/packages/amis-core/src/store/crud.ts
@@ -229,6 +229,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
         filterOnAllColumns?: boolean; // 前端是否让所有字段参与过滤
         isTable2?: Boolean; // 是否是 CRUD2
         minLoadingTime?: number; // 最小加载时间
+        dataAppendTo?: 'top' | 'bottom';
       }
     ) => Promise<any> = flow(function* getInitData(
       api: Api,
@@ -336,8 +337,6 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
             throw new Error(self.__('CRUD.invalidData'));
           }
 
-          console.log('options.minLoadingTime', options.minLoadingTime);
-
           if (options.minLoadingTime) {
             const elapsedTime = Date.now() - startTime;
             const remainingTime = options.minLoadingTime - elapsedTime;
@@ -395,7 +394,11 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
           // 点击加载更多数据
           let rowsData: Array<any> = [];
           if (options.loadDataMode && Array.isArray(self.data.items)) {
-            rowsData = self.data.items.concat(items);
+            if (options.dataAppendTo === 'top') {
+              rowsData = items.concat(self.data.items);
+            } else {
+              rowsData = self.data.items.concat(items);
+            }
           } else {
             // 第一次的时候就是直接加载请求的数据
             rowsData = items;

diff --git a/packages/amis-editor/src/plugin/CRUD.tsx b/packages/amis-editor/src/plugin/CRUD.tsx
@@ -2045,7 +2045,69 @@ export class CRUDPlugin extends BasePlugin {
           getSchemaTpl('className', {
             name: 'bodyClassName',
             label: '内容 CSS 类名'
-          })
+          }),
+
+          {
+            type: 'container',
+            visibleOn: `this.headerToolbar && this.headerToolbar.some(item => item === 'load-more' || item.type === 'load-more') || 
+                      this.footerToolbar && this.footerToolbar.some(item => item === 'load-more' || item.type === 'load-more')`,
+            body: [
+              {
+                type: 'group',
+                body: [
+                  {
+                    name: 'loadMoreProps.showIcon',
+                    label: '显示图标',
+                    type: 'switch',
+                    value: true
+                  },
+                  {
+                    name: 'loadMoreProps.showText',
+                    label: '显示文本',
+                    type: 'switch',
+                    value: true
+                  }
+                ]
+              },
+              {
+                name: 'loadMoreProps.iconType',
+                label: '图标类型',
+                type: 'input-text',
+                value: 'loading-outline',
+                visibleOn: 'this.loadMoreProps && this.loadMoreProps.showIcon'
+              },
+              {
+                type: 'group',
+                label: '文本配置',
+                visibleOn: 'this.loadMoreProps && this.loadMoreProps.showText',
+                body: [
+                  {
+                    name: 'loadMoreProps.contentText.contentdown',
+                    label: '加载前',
+                    type: 'input-text',
+                    value: '点击加载更多'
+                  },
+                  {
+                    name: 'loadMoreProps.contentText.contentrefresh',
+                    label: '加载中',
+                    type: 'input-text',
+                    value: '加载中...'
+                  },
+                  {
+                    name: 'loadMoreProps.contentText.contentnomore',
+                    label: '加载完成',
+                    type: 'input-text',
+                    value: '没有更多数据了'
+                  }
+                ]
+              },
+              {
+                name: 'loadMoreProps.color',
+                label: '文字颜色',
+                type: 'input-color'
+              }
+            ]
+          }
         ]
       },
 

diff --git a/packages/amis/src/renderers/CRUD.tsx b/packages/amis/src/renderers/CRUD.tsx
@@ -82,6 +82,7 @@ interface LoadMoreConfig {
     contentnomore: string;
   };
   minLoadingTime?: number;
+  dataAppendTo?: 'top' | 'bottom';
 }
 
 export type CRUDBultinToolbarType =
@@ -1419,7 +1420,8 @@ export default class CRUD<T extends CRUDProps> extends React.Component<T, any> {
         columns: store.columns ?? columns,
         matchFunc,
         filterOnAllColumns: loadDataOnceFetchOnFilter === false,
-        minLoadingTime: values?.minLoadingTime
+        minLoadingTime: values?.minLoadingTime,
+        dataAppendTo: values?.dataAppendTo
       });
       if (!isAlive(store)) {
         return value;
@@ -2469,6 +2471,7 @@ export default class CRUD<T extends CRUDProps> extends React.Component<T, any> {
         contentnomore: '没有更多数据了'
       },
       minLoadingTime,
+      dataAppendTo,
       color
     } = loadMoreProps;
 
@@ -2493,7 +2496,8 @@ export default class CRUD<T extends CRUDProps> extends React.Component<T, any> {
           this.search({
             page: page + 1,
             loadDataMode: 'load-more',
-            minLoadingTime
+            minLoadingTime,
+            dataAppendTo
           });
         }}
       >

diff --git a/packages/amis/src/renderers/CRUD2.tsx b/packages/amis/src/renderers/CRUD2.tsx
@@ -264,7 +264,7 @@ export interface CRUD2CommonSchema extends BaseSchema, SpinnerExtraProps {
      * 新数据追加的位置
      * @default 'bottom'
      */
-    appendTo?: 'top' | 'bottom';
+    dataAppendTo?: 'top' | 'bottom';
 
     /**
      * 加载状态的最短显示时间(毫秒)
@@ -366,7 +366,7 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
       showText: true,
       iconType: 'auto',
       color: '#777777',
-      appendTo: 'bottom',
+      dataAppendTo: 'bottom',
       gestureDirection: 'up',
       minLoadingTime: 0,
       contentText: {
@@ -769,6 +769,7 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
         pageField,
         perPageField,
         loadDataMode,
+        dataAppendTo: pullRefresh?.dataAppendTo || 'bottom',
         syncResponse2Query,
         columns: store.columns ?? columns,
         isTable2: true,