소스 검색

fix: 修复分页问题

chenhao 2 년 전
부모
커밋
c0d4e6c23b

+ 11 - 1
src/hooks/useTable.ts

@@ -20,6 +20,7 @@ type ReturnTable<T extends ApiKeys, D extends boolean | OptionalPage = true> = {
   tableRef: Ref<InstanceTable | undefined>
   elTableRef: Ref<InstanceElTable | undefined>
   pagination: Ref<Partial<PaginationProps>>
+  currentPage: Ref<number>
   loading: Ref<boolean>
   data: Ref<D extends false ? ExtractApiResponse<T> : ExtractMultipleApiResponse<T>[]>
   error: unknown
@@ -73,6 +74,15 @@ const useTable = <
     Object.assign(DEFAULT_PARAMS, isPageQuery(pageQuery) ? pageQuery : {})
   )
 
+  const currentPage = computed({
+    get() {
+      return baseParams.pageNumber
+    },
+    set(n: number) {
+      baseParams.pageNumber = n
+    },
+  })
+
   const payload = computed(() => {
     return Object.assign({}, multipleType ? baseParams : {}, additional || {}) as ExtractApiParams<T>
   })
@@ -104,7 +114,6 @@ const useTable = <
 
   const pagination = computed(() => {
     return Object.assign(DEFAULT_PAGINATION, {
-      currentPage: baseParams.pageNumber,
       pageSize: baseParams.pageSize,
       pageCount: pageCount.value,
       total: total.value,
@@ -121,6 +130,7 @@ const useTable = <
     loading,
     data,
     pagination,
+    currentPage: currentPage,
     error,
   }
 }

+ 12 - 10
src/modules/admin-data/export/index.vue

@@ -8,15 +8,17 @@
         </template>
       </base-form>
     </div>
-    <div class="flex-1 p-base radius-base">
-      <base-table :columns="columns" :data="data"></base-table>
-      <el-pagination
-        v-bind="pagination"
-        v-model:current-page="pagination.currentPage"
-        background
-        right
-        :hide-on-single-page="true"
-      ></el-pagination>
+    <div class="flex-1 p-base">
+      <div class="p-base radius-base fill-blank">
+        <base-table :columns="columns" :data="data"></base-table>
+        <el-pagination
+          v-bind="pagination"
+          v-model:current-page="currentPage"
+          background
+          right
+          :hide-on-single-page="true"
+        ></el-pagination>
+      </div>
     </div>
   </div>
 </template>
@@ -64,7 +66,7 @@ const items = computed<EpFormItem[]>(() => {
 
 const requestModel = reactive<ExtractMultipleApiParams<'getCetScoreList'>>({ ...model })
 
-const { pagination, loading, data } = useTable('getCetScoreList', requestModel, true, 'post', false)
+const { pagination, currentPage, loading, data } = useTable('getCetScoreList', requestModel, true, 'post', false)
 
 const columns: EpTableColumn[] = [
   { label: '准考证号', prop: 'examNumber' },

+ 2 - 8
src/modules/admin-user/manage/index.vue

@@ -88,13 +88,7 @@
             </el-popconfirm>
           </template>
         </base-table>
-        <el-pagination
-          v-bind="pagination"
-          v-model:current-page="pagination.currentPage"
-          background
-          right
-          :hide-on-single-page="false"
-        ></el-pagination>
+        <el-pagination v-bind="pagination" v-model:current-page="currentPage" background right></el-pagination>
       </el-card>
     </div>
     <base-dialog :width="useVW(380)" title="导入/导出" destroy-on-close>
@@ -129,6 +123,7 @@ const requestModel = reactive<ModelType<'getUserList'>>({})
 
 const {
   pagination,
+  currentPage,
   loading,
   data,
   columns,
@@ -137,7 +132,6 @@ const {
   selectedList,
   fetchTable,
   tableRef,
-  elTableRef,
 } = useUserManageTable(requestModel)
 
 const { fetch: resetPwdFetch } = useFetch('resetUsersPwd')

+ 2 - 2
src/modules/analysis/group-monitoring-detail/index.vue

@@ -22,7 +22,7 @@
           </el-button>
           <el-pagination
             v-bind="pagination"
-            v-model:current-page="pagination.currentPage"
+            v-model:current-page="currentPage"
             size="small"
             class="m-t-unset"
             background
@@ -96,7 +96,7 @@ const onPreview = () => {
 }
 
 /** 抽查详情列表 */
-const { pagination, data } = useTable(
+const { pagination, currentPage, data } = useTable(
   'getGroupMonitorDetail',
   {
     operateType: query.operateType as 'VIEW' | 'MARK',

+ 2 - 2
src/modules/analysis/view-marked-detail/index.vue

@@ -33,7 +33,7 @@
           </el-button>
           <el-pagination
             v-bind="pagination"
-            v-model:current-page="pagination.currentPage"
+            v-model:current-page="currentPage"
             size="small"
             class="m-t-unset"
             background
@@ -161,7 +161,7 @@ const columns: EpTableColumn<RowType>[] = [
   { label: '评卷时间', prop: 'markTime' },
 ]
 
-const { pagination, data, fetchTable } = useTable('getPersonalMarkDetail', {
+const { pagination, currentPage, data, fetchTable } = useTable('getPersonalMarkDetail', {
   markerId: props.markerId,
   score: (query.score as string) || '',
 })

+ 2 - 2
src/modules/marking/inquiry-result/index.vue

@@ -29,7 +29,7 @@
           </el-button>
           <el-pagination
             v-bind="pagination"
-            v-model:current-page="pagination.currentPage"
+            v-model:current-page="currentPage"
             size="small"
             class="m-t-unset"
             background
@@ -187,7 +187,7 @@ const transformQuery = (query: Record<string, string>) => {
   return params
 }
 
-const { pagination, data, fetchTable } = useTable(
+const { pagination, currentPage, data, fetchTable } = useTable(
   'getCustomQueryTasks',
   transformQuery(query as Record<string, string>),
   { pageSize: 20 }