Merge pull request #868 from vusion/feature-v0.20.4/tableview

fix(TableView): loadTo方法清空数据&数据源是变量时处理
vusion · May 8, 2024 · bfe63e9 · bfe63e9
2 parents 4c51781 + f1f32e8
commit bfe63e9
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 30 deletions.
diff --git a/src/components/u-table-view.vue/api.ts b/src/components/u-table-view.vue/api.ts
@@ -49,6 +49,18 @@ namespace nasl.ui {
         })
         reload(): void {}
 
+        @Method({
+            title: '带页码刷新',
+            description: '保持页码，重新加载',
+        })
+        loadTo(
+            @Param({
+                title: '页数',
+                description: '要刷新的页数',
+            })
+            page?: nasl.core.Integer,
+        ): void {}
+
         @Method({
             title: 'undefined',
             description: '获取所有表格列的 field',
@@ -109,19 +121,6 @@ namespace nasl.ui {
             item?: object,
         ): void {}
         constructor(options?: Partial<UTableViewOptions<T, V, P, M>>) { super(); }
-
-        @Method({
-            title: '带页码刷新',
-            description: '保持页码，重新加载',
-        })
-        loadTo(
-            @Param({
-                title: '页数',
-                description: '要刷新的页数',
-            })
-            page?: nasl.core.Integer,
-        ): void {}
-
     }
 
     export class UTableViewOptions<T, V, P extends nasl.core.Boolean, M extends nasl.core.Boolean> extends ViewComponentOptions {

diff --git a/src/components/u-table-view.vue/docs/cases.md b/src/components/u-table-view.vue/docs/cases.md
@@ -2637,16 +2637,34 @@ export default {
 ``` vue
 <template>
 <u-linear-layout direction="vertical">
-    <u-linear-layout>
-        <u-button @click="reload">刷新</u-button>
-        <u-button @click="resetPageSizeAndNumber">重置页码和页数</u-button>
+    <u-linear-layout direction="vertical">
+        <u-linear-layout>
+            <u-text>后端分页</u-text>
+            <u-button @click="reload">刷新</u-button>
+            <u-number-input v-model="pageTo"></u-number-input>
+            <u-button @click="loadTo">loadTo刷新</u-button>
+            <u-button @click="resetPageSizeAndNumber">重置页码和页数</u-button>
+        </u-linear-layout>
+        <u-table-view :data-source="load" pagination :page-size="pageSize" :page-number="pageNumber" ref="tableview" @page="onPage">
+            <u-table-view-column title="用户名" field="name" width="15%"></u-table-view-column>
+            <u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
+            <u-table-view-column title="地址" field="address"></u-table-view-column>
+            <u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
+        </u-table-view>
+    </u-linear-layout>
+    <u-linear-layout direction="vertical">
+        <u-linear-layout>
+            <u-text>前端分页绑定变量</u-text>
+            <u-number-input v-model="pageTo"></u-number-input>
+            <u-button @click="loadTo1">loadTo刷新</u-button>
+        </u-linear-layout>
+        <u-table-view striped :data="data" pagination :page-size="10" ref="tableview1">
+            <u-table-view-column title="用户名" field="name" width="15%"></u-table-view-column>
+            <u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
+            <u-table-view-column title="地址" field="address"></u-table-view-column>
+            <u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
+        </u-table-view>
     </u-linear-layout>
-    <u-table-view :data-source="load" pagination :page-size="pageSize" :page-number="pageNumber" ref="tableview" @page="onPage">
-        <u-table-view-column title="用户名" field="name" width="15%"></u-table-view-column>
-        <u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
-        <u-table-view-column title="地址" field="address"></u-table-view-column>
-        <u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
-    </u-table-view>
 </u-linear-layout>
 </template>
 <script>
@@ -2691,10 +2709,13 @@ export default {
             result: undefined,
             pageSize: 10,
             pageNumber: 1,
+            pageTo: null,
+            data: mockData,
         };
     },
     methods: {
         load({ paging }) {
+            console.log('paging', paging);
             return mockService.loadList(paging.offset, paging.limit)
                 .then((result) => this.result = result); // 这句只是在 Demo 中打印一下数据，方便查看
         },
@@ -2708,7 +2729,15 @@ export default {
         resetPageSizeAndNumber() {
             this.pageSize = 20;
             this.pageNumber = 1;    
-        }
+        },
+        loadTo() {
+            console.log('loadTo');
+            this.$refs.tableview.loadTo(this.pageTo);
+        },
+        loadTo1() {
+            console.log('loadTo1');
+            this.$refs.tableview1.loadTo(this.pageTo);
+        },
     },
 };
 </script>

diff --git a/src/components/u-table-view.vue/index.vue b/src/components/u-table-view.vue/index.vue
@@ -1446,7 +1446,7 @@ export default {
                 && this.$refs.scrollView[2].$refs.wrap !== target
                 && (this.$refs.scrollView[2].$refs.wrap.scrollTop = scrollTop);
         },
-        load(more) {
+        load(more, paging = {}) {
             const dataSource = this.currentDataSource;
             if (!dataSource)
                 return;
@@ -1458,7 +1458,7 @@ export default {
                 this.currentLoading = true;
                 this.currentError = false;
             }
-            dataSource[more ? 'loadMore' : 'load']()
+            dataSource[more ? 'loadMore' : 'load'](paging.offset, paging.limit, paging.number)
                 .then((data) => {
                     // 防止同步数据使页面抖动
                     // setTimeout(() => this.currentData = data);
@@ -1835,7 +1835,7 @@ export default {
             this.currentDataSource.page(paging);
             this.$emit('update:page-number', number, this);
             this.$emit('page', paging, this);
-            this.load();
+            this.load(false, { number, limit: size });
         },
         onClickSort(columnVM) {
             let order;
@@ -3277,10 +3277,20 @@ export default {
             this.syncHeadScroll();
         },
         loadTo(page) {
-            if (!['', null, undefined].includes(page)) {
-                this.page(page);
+            const dataSource = this.currentDataSource;
+            if (!(dataSource && dataSource.paging))
+                return;
+            if (dataSource._load && typeof dataSource._load === 'function') {
+                dataSource.clearLocalData();
+            }
+            let currentPage = page;
+            if (['', null, undefined].includes(page)) {
+                currentPage = dataSource.paging.number;
+            }
+            if (currentPage === dataSource.paging.number) {
+                this.load(false, { number: currentPage });
             } else {
-                this.load();
+                dataSource.paging.number = page;
             }
         },
     },

diff --git a/src/utils/DataSource/new.js b/src/utils/DataSource/new.js
@@ -316,7 +316,7 @@ const VueDataSource = Vue.extend({
                 limit = this.limit;
 
             // reload 或 query变化 重置分页
-            if (this.cleared || this.queryChanged) {
+            if ((this.cleared || this.queryChanged) && newPageNumber === undefined) {
                 if (this.paging) {
                     this.paging.number = 1;
                 }