From eb14b57b81037962f0805ab27a6918ddc0d2b60f Mon Sep 17 00:00:00 2001
From: zhf <1204297681@qq.com>
Date: Tue, 11 Jun 2024 20:20:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=97=E8=A1=A8=E3=80=81=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=92=8C=E8=A1=A8=E6=A0=BC=E6=94=AF=E6=8C=81=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E6=A8=A1=E5=BC=8F=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/control/data-view/data-view.scss       |  5 ++
 src/control/data-view/data-view.tsx        | 52 ++++++++++++++++-
 src/control/grid/grid/grid-control.util.ts |  4 +-
 src/control/grid/grid/grid.scss            |  5 ++
 src/control/grid/grid/grid.tsx             | 67 +++++++++++++++++++++-
 src/control/list/list.scss                 |  5 ++
 src/control/list/list.tsx                  | 45 ++++++++++++++-
 src/locale/en/index.ts                     |  1 +
 src/locale/zh-CN/index.ts                  |  1 +
 9 files changed, 177 insertions(+), 8 deletions(-)

diff --git a/src/control/data-view/data-view.scss b/src/control/data-view/data-view.scss
index 0f170273d..d02af4ed2 100644
--- a/src/control/data-view/data-view.scss
+++ b/src/control/data-view/data-view.scss
@@ -39,6 +39,11 @@ $control-dataview-group-item-content: (
   @include e(pagination) {
     flex-shrink: 0;
   }
+
+  @include e(load-more-button) {
+    width: calc(100% - getCssVar(spacing, base, tight));
+    text-align: center;
+  }
 }
 
 @include b(control-dataview-scroll) {
diff --git a/src/control/data-view/data-view.tsx b/src/control/data-view/data-view.tsx
index 109c11146..2e39b0344 100644
--- a/src/control/data-view/data-view.tsx
+++ b/src/control/data-view/data-view.tsx
@@ -1,5 +1,5 @@
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
-import { computed, defineComponent, PropType, VNode } from 'vue';
+import { computed, defineComponent, PropType, ref, VNode, watch } from 'vue';
 import {
   IDEDataView,
   ILayoutPanel,
@@ -11,6 +11,7 @@ import {
   IMDControlGroupState,
   ISortItem,
 } from '@ibiz-template/runtime';
+import { createUUID } from 'qx-util';
 import './data-view.scss';
 import { usePagination } from '../../util';
 
@@ -48,6 +49,9 @@ export const DataViewControl = defineComponent({
       if (c.model.enablePagingBar === true) {
         return true;
       }
+      if (c.model.pagingMode !== 2) {
+        return true;
+      }
       return (
         c.state.items.length >= c.state.total ||
         c.state.isLoading ||
@@ -55,6 +59,29 @@ export const DataViewControl = defineComponent({
       );
     });
 
+    // 无限滚动元素
+    const infiniteScroll = ref<IData>();
+    // 无限滚动元素标识
+    const infiniteScrollKey = ref<string>(createUUID());
+
+    watch(
+      () => c.state.curPage,
+      () => {
+        if (
+          c.state.curPage === 1 &&
+          (c.model.pagingMode === 2 || c.model.pagingMode === 3)
+        ) {
+          infiniteScrollKey.value = createUUID();
+          const containerEl =
+            infiniteScroll.value?.ElInfiniteScroll?.containerEl;
+          if (containerEl) {
+            containerEl.lastScrollTop = 0;
+            containerEl.scrollTop = 0;
+          }
+        }
+      },
+    );
+
     const { onPageChange, onPageRefresh, onPageSizeChange } = usePagination(c);
 
     // 行单击事件
@@ -283,8 +310,22 @@ export const DataViewControl = defineComponent({
           v-infinite-scroll={(): Promise<void> => c.loadMore()}
           infinite-scroll-distance={10}
           infinite-scroll-disabled={isLodeMoreDisabled.value}
+          ref={'infiniteScroll'}
+          key={infiniteScrollKey.value}
         >
           {renderDataViewContent()}
+          {c.model.pagingMode === 3 &&
+            !(
+              c.state.items.length >= c.state.total ||
+              c.state.isLoading ||
+              c.state.total <= c.state.size
+            ) && (
+              <div class={ns.e('load-more-button')}>
+                <el-button text onClick={() => c.loadMore()}>
+                  {ibiz.i18n.t('control.common.loadMore')}
+                </el-button>
+              </div>
+            )}
         </div>
       );
     };
@@ -309,6 +350,7 @@ export const DataViewControl = defineComponent({
       c,
       ns,
       classNames,
+      infiniteScroll,
       renderHasData,
       renderNoData,
       onPageChange,
@@ -326,13 +368,17 @@ export const DataViewControl = defineComponent({
           <iBizSortBar
             onSortChange={(item: ISortItem, order: 'asc' | 'desc') => {
               this.c.setSort(item.key, order);
-              this.c.load();
+              this.c.load({
+                isInitialLoad:
+                  this.c.model.pagingMode === 2 ||
+                  this.c.model.pagingMode === 3,
+              });
             }}
             sortItems={this.c.state.sortItems}
           ></iBizSortBar>
         ),
         items.length > 0 ? this.renderHasData() : this.renderNoData(),
-        this.c.state.enablePagingBar ? (
+        this.c.state.enablePagingBar && this.c.model.pagingMode === 1 ? (
           <iBizPagination
             class={this.ns.e('pagination')}
             total={this.c.state.total}
diff --git a/src/control/grid/grid/grid-control.util.ts b/src/control/grid/grid/grid-control.util.ts
index 59e9dd2d2..fe7240f89 100644
--- a/src/control/grid/grid/grid-control.util.ts
+++ b/src/control/grid/grid/grid-control.util.ts
@@ -180,7 +180,9 @@ export function useITableEvent(c: GridController): {
       return;
     }
     c.setSort(fieldName, order1);
-    c.load();
+    c.load({
+      isInitialLoad: c.model.pagingMode === 2 || c.model.pagingMode === 3,
+    });
   }
 
   // todo 用自己的ns类名去压制，把element原来的样式清除
diff --git a/src/control/grid/grid/grid.scss b/src/control/grid/grid/grid.scss
index 67535da90..7b934ea5c 100644
--- a/src/control/grid/grid/grid.scss
+++ b/src/control/grid/grid/grid.scss
@@ -292,6 +292,11 @@ font-weight: getCssVar(font-weight, bold),
 
   }
 
+  @include e(load-more-button) {
+    padding: getCssVar(control-grid, header, cell-padding);
+    text-align: center;
+  }
+
   // 去除底部border
   .el-table td.el-table__cell,
   .el-table th.el-table__cell.is-leaf {
diff --git a/src/control/grid/grid/grid.tsx b/src/control/grid/grid/grid.tsx
index 8f39ebaad..43b3637d4 100644
--- a/src/control/grid/grid/grid.tsx
+++ b/src/control/grid/grid/grid.tsx
@@ -12,6 +12,9 @@ import {
   VNode,
   renderSlot,
   VNodeArrayChildren,
+  computed,
+  ref,
+  watch,
 } from 'vue';
 import { IDEGrid, IDEGridColumn, IDEGridGroupColumn } from '@ibiz/model-core';
 import {
@@ -20,6 +23,7 @@ import {
   ScriptFactory,
 } from '@ibiz-template/runtime';
 import { NOOP } from '@ibiz-template/core';
+import { createUUID } from 'qx-util';
 import {
   IGridProps,
   useAppGridBase,
@@ -311,6 +315,41 @@ export const GridControl = defineComponent({
       }
     });
 
+    // 是否可以加载更多
+    const isLodeMoreDisabled = computed(() => {
+      if (c.model.pagingMode !== 2) {
+        return true;
+      }
+      return (
+        c.state.items.length >= c.state.total ||
+        c.state.isLoading ||
+        c.state.total <= c.state.size
+      );
+    });
+
+    // 无限滚动元素
+    const infiniteScroll = ref<IData>();
+    // 无限滚动元素标识
+    const infiniteScrollKey = ref<string>(createUUID());
+
+    watch(
+      () => c.state.curPage,
+      () => {
+        if (
+          c.state.curPage === 1 &&
+          (c.model.pagingMode === 2 || c.model.pagingMode === 3)
+        ) {
+          infiniteScrollKey.value = createUUID();
+          const containerEl =
+            infiniteScroll.value?.ElInfiniteScroll?.containerEl;
+          if (containerEl) {
+            containerEl.lastScrollTop = 0;
+            containerEl.scrollTop = 0;
+          }
+        }
+      },
+    );
+
     return {
       c,
       ns,
@@ -334,6 +373,9 @@ export const GridControl = defineComponent({
       renderBatchToolBar,
       headerCssVars,
       renderDragIconColumn,
+      isLodeMoreDisabled,
+      infiniteScroll,
+      infiniteScrollKey,
     };
   },
   render() {
@@ -393,12 +435,33 @@ export const GridControl = defineComponent({
                 ];
               },
               append: () => {
-                return this.renderPopover();
+                return [
+                  <div
+                    ref={'infiniteScroll'}
+                    key={this.infiniteScrollKey}
+                    v-infinite-scroll={() => this.c.loadMore()}
+                    infinite-scroll-distance={10}
+                    infinite-scroll-disabled={this.isLodeMoreDisabled}
+                  ></div>,
+                  this.c.model.pagingMode === 3 &&
+                    !(
+                      this.c.state.items.length >= this.c.state.total ||
+                      this.c.state.isLoading ||
+                      this.c.state.total <= this.c.state.size
+                    ) && (
+                      <div class={this.ns.e('load-more-button')}>
+                        <el-button text onClick={() => this.c.loadMore()}>
+                          {ibiz.i18n.t('control.common.loadMore')}
+                        </el-button>
+                      </div>
+                    ),
+                  this.renderPopover(),
+                ];
               },
             }}
           </el-table>
         }
-        {this.c.state.enablePagingBar && (
+        {this.c.state.enablePagingBar && this.c.model.pagingMode === 1 && (
           <iBizPagination
             total={state.total}
             curPage={state.curPage}
diff --git a/src/control/list/list.scss b/src/control/list/list.scss
index 120fdad3b..61846ddb6 100644
--- a/src/control/list/list.scss
+++ b/src/control/list/list.scss
@@ -37,6 +37,11 @@ $control-list: (text-color: getCssVar(color-text-0),
     cursor: pointer;
   }
 
+  @include e(load-more-button) {
+    padding: getCssVar(control-list, padding);
+    text-align: center;
+  }
+
   @include b(control-list-content) {
     flex-grow: 1;
   }
diff --git a/src/control/list/list.tsx b/src/control/list/list.tsx
index 8041a772a..a7eb1ceff 100644
--- a/src/control/list/list.tsx
+++ b/src/control/list/list.tsx
@@ -1,7 +1,8 @@
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
-import { defineComponent, PropType, computed, VNode } from 'vue';
+import { defineComponent, PropType, computed, VNode, ref, watch } from 'vue';
 import { IDEList, ILayoutPanel } from '@ibiz/model-core';
 import { isNil } from 'lodash-es';
+import { createUUID } from 'qx-util';
 import {
   IControlProvider,
   IMDControlGroupState,
@@ -49,6 +50,9 @@ export const ListControl = defineComponent({
       if (c.model.enablePagingBar === true) {
         return true;
       }
+      if (c.model.pagingMode !== 2) {
+        return true;
+      }
       return (
         c.state.items.length >= c.state.total ||
         c.state.isLoading ||
@@ -56,6 +60,29 @@ export const ListControl = defineComponent({
       );
     });
 
+    // 无限滚动元素
+    const infiniteScroll = ref<IData>();
+    // 无限滚动元素标识
+    const infiniteScrollKey = ref<string>(createUUID());
+
+    watch(
+      () => c.state.curPage,
+      () => {
+        if (
+          c.state.curPage === 1 &&
+          (c.model.pagingMode === 2 || c.model.pagingMode === 3)
+        ) {
+          infiniteScrollKey.value = createUUID();
+          const containerEl =
+            infiniteScroll.value?.ElInfiniteScroll?.containerEl;
+          if (containerEl) {
+            containerEl.lastScrollTop = 0;
+            containerEl.scrollTop = 0;
+          }
+        }
+      },
+    );
+
     // 绘制项布局面板
     const renderPanelItem = (item: IData, modelData: ILayoutPanel): VNode => {
       const { context, params } = c;
@@ -139,6 +166,8 @@ export const ListControl = defineComponent({
           v-infinite-scroll={(): Promise<void> => c.loadMore()}
           infinite-scroll-distance={10}
           infinite-scroll-disabled={isLodeMoreDisabled.value}
+          ref={'infiniteScroll'}
+          key={infiniteScrollKey.value}
         >
           {c.state.items.map((item: IData) => {
             return (
@@ -147,6 +176,18 @@ export const ListControl = defineComponent({
               </div>
             );
           })}
+          {c.model.pagingMode === 3 &&
+            !(
+              c.state.items.length >= c.state.total ||
+              c.state.isLoading ||
+              c.state.total <= c.state.size
+            ) && (
+              <div class={ns.e('load-more-button')}>
+                <el-button text onClick={() => c.loadMore()}>
+                  {ibiz.i18n.t('control.common.loadMore')}
+                </el-button>
+              </div>
+            )}
         </div>
       );
     };
@@ -225,7 +266,7 @@ export const ListControl = defineComponent({
           ? this.renderListContent()
           : this.renderNoData(),
         this.renderBatchToolBar(),
-        this.c.state.enablePagingBar ? (
+        this.c.state.enablePagingBar && this.c.model.pagingMode === 1 ? (
           <iBizPagination
             class={this.ns.e('pagination')}
             total={this.c.state.total}
diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts
index be313ada6..9c5b7e673 100644
--- a/src/locale/en/index.ts
+++ b/src/locale/en/index.ts
@@ -257,6 +257,7 @@ export default {
         gridRowSelectDesc:
           'Table row selected color, background color when a row is selected',
       },
+      loadMore: 'Load more',
     },
     menu: {
       noSupportAlign: 'The menu direction {align} is not supported temporarily',
diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts
index 624a2349e..41e72a2e8 100644
--- a/src/locale/zh-CN/index.ts
+++ b/src/locale/zh-CN/index.ts
@@ -235,6 +235,7 @@ export default {
         gridRowSelect: '表格行选中色',
         gridRowSelectDesc: '表格行选中色，当某一行选中时背景色',
       },
+      loadMore: '加载更多',
     },
     menu: {
       noSupportAlign: '暂未支持菜单方向为 {align}',
-- 
Gitee