From a9e36b3eafab7060c364e50792f75c019ad4bdc9 Mon Sep 17 00:00:00 2001
From: meerkat <kit_hack@outlook.com>
Date: Fri, 5 May 2023 16:14:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DCRUD=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E4=BC=A0=E9=80=92Pagination=E7=BB=84=E4=BB=B6=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=A2=E5=A4=B1total=E5=B1=9E=E6=80=A7=20(#6081)=20?=
 =?UTF-8?q?(#6087)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../amis/__tests__/renderers/CRUD.test.tsx    |  18 ++-
 .../__snapshots__/CRUD.test.tsx.snap          | 149 ++++++++++++++++++
 packages/amis/src/renderers/CRUD.tsx          |  12 +-
 3 files changed, 177 insertions(+), 2 deletions(-)

diff --git a/packages/amis/__tests__/renderers/CRUD.test.tsx b/packages/amis/__tests__/renderers/CRUD.test.tsx
index ce8364e9d..86f43c547 100644
--- a/packages/amis/__tests__/renderers/CRUD.test.tsx
+++ b/packages/amis/__tests__/renderers/CRUD.test.tsx
@@ -69,7 +69,23 @@ test('Renderer:crud basic interval headerToolbar footerToolbar', async () => {
           interval: 1000,
           perPage: 2,
           headerToolbar: ['export-excel', 'statistics'],
-          footerToolbar: ['pagination', 'export-excel'],
+          footerToolbar: [
+            'pagination',
+            {
+              type: 'pagination',
+              total: '${count}',
+              layout: 'total,perPage,pager,go',
+              mode: 'normal',
+              activePage: 2,
+              perPage: 10,
+              maxButtons: 7,
+              showPerPage: true,
+              perPageAvailable: [10, 20, 50, 100],
+              showPageInput: true,
+              disabled: false
+            },
+            'export-excel'
+          ],
           columns: [
             {
               name: '__id',
diff --git a/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
index f7233c332..546877f1f 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
@@ -2940,6 +2940,155 @@ exports[`Renderer:crud basic interval headerToolbar footerToolbar 1`] = `
                       </div>
                     </div>
                   </div>
+                  <div
+                    class="cxd-Crud-toolbar-item cxd-Crud-toolbar-item--right"
+                  >
+                    <div
+                      class="cxd-Crud-pager"
+                    >
+                      <div
+                        class="cxd-Pagination-wrap"
+                      >
+                        <div
+                          class="cxd-Pagination-total cxd-Pagination-item"
+                        >
+                          共 144 条
+                        </div>
+                        <div
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          aria-labelledby="downshift-0-label"
+                          class="cxd-Select cxd-Pagination-perpage cxd-Pagination-item"
+                          role="combobox"
+                          tabindex="0"
+                        >
+                          <div
+                            class="cxd-Select-valueWrap"
+                          >
+                            <div
+                              class="cxd-Select-placeholder"
+                            >
+                              请选择
+                            </div>
+                          </div>
+                          <span
+                            class="cxd-Select-arrow"
+                          >
+                            <icon-mock
+                              classname="icon icon-right-arrow-bold"
+                              icon="right-arrow-bold"
+                            />
+                          </span>
+                        </div>
+                        <ul
+                          class="cxd-Pagination cxd-Pagination--sm cxd-Pagination-item"
+                        >
+                          <li
+                            class="cxd-Pagination-prev is-disabled"
+                          >
+                            <span>
+                              <icon-mock
+                                classname="icon icon-left-arrow"
+                                icon="left-arrow"
+                              />
+                            </span>
+                          </li>
+                          <li
+                            class="cxd-Pagination-pager-item is-active"
+                          >
+                            <a
+                              role="button"
+                            >
+                              1
+                            </a>
+                          </li>
+                          <li
+                            class="cxd-Pagination-pager-item"
+                          >
+                            <a
+                              role="button"
+                            >
+                              2
+                            </a>
+                          </li>
+                          <li
+                            class="cxd-Pagination-pager-item"
+                          >
+                            <a
+                              role="button"
+                            >
+                              3
+                            </a>
+                          </li>
+                          <li
+                            class="cxd-Pagination-pager-item"
+                          >
+                            <a
+                              role="button"
+                            >
+                              4
+                            </a>
+                          </li>
+                          <li
+                            class="cxd-Pagination-pager-item"
+                          >
+                            <a
+                              role="button"
+                            >
+                              5
+                            </a>
+                          </li>
+                          <li
+                            class="ellipsis"
+                          >
+                            <a
+                              role="button"
+                            >
+                              ...
+                            </a>
+                          </li>
+                          <li
+                            class="cxd-Pagination-pager-item"
+                          >
+                            <a
+                              role="button"
+                            >
+                              72
+                            </a>
+                          </li>
+                          <li
+                            class="cxd-Pagination-next"
+                          >
+                            <span>
+                              <icon-mock
+                                classname="icon icon-right-arrow"
+                                icon="right-arrow"
+                              />
+                            </span>
+                          </li>
+                        </ul>
+                        <div
+                          class="cxd-Pagination-inputGroup cxd-Pagination-item"
+                        >
+                          <span
+                            class="cxd-Pagination-inputGroup-left"
+                          >
+                            跳转至
+                          </span>
+                          <input
+                            class="cxd-Pagination-inputGroup-input"
+                            type="text"
+                            value=""
+                          />
+                          <span
+                            class="cxd-Pagination-inputGroup-right"
+                          >
+                            GO
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                   <div
                     class="cxd-Crud-toolbar-item cxd-Crud-toolbar-item--left"
                   >
diff --git a/packages/amis/src/renderers/CRUD.tsx b/packages/amis/src/renderers/CRUD.tsx
index 55b35463d..0c2e6d33e 100644
--- a/packages/amis/src/renderers/CRUD.tsx
+++ b/packages/amis/src/renderers/CRUD.tsx
@@ -1795,7 +1795,12 @@ export default class CRUD extends React.Component<CRUDProps, any> {
 
     const extraProps: Pick<
       PaginationProps,
-      'showPageInput' | 'maxButtons' | 'layout' | 'popOverContainerSelector'
+      | 'showPageInput'
+      | 'maxButtons'
+      | 'layout'
+      | 'popOverContainerSelector'
+      | 'total'
+      | 'perPageAvailable'
     > = {};
 
     /** 优先级：showPageInput显性配置 > (lastPage > 9) */
@@ -1809,6 +1814,11 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       extraProps.popOverContainerSelector = (
         toolbar as Schema
       ).popOverContainerSelector;
+      extraProps.perPageAvailable = (toolbar as Schema).perPageAvailable;
+      extraProps.total = resolveVariableAndFilter(
+        (toolbar as Schema).total,
+        store.data
+      );
     } else {
       extraProps.showPageInput = lastPage > 9;
     }