wip: 分页demo

src/pages/system/views/fixed/settings/user-management/index.vue

 <template>
   <div></div>
 </template>
+<script lang="ts" setup>
+import { usePagination } from 'vue-request'
+import { UserUserPage, UserUserPagePostReq } from '@shared/models/user-service/UserUserPage'
+import { useAuth } from '@shared/store/modules/auth'
+import { useUser } from '@shared/store/modules/user'
+import { reactive } from 'vue'
+const authStore = useAuth()
+const userStore = useUser()
+const userUserPagePostReq = reactive(
+  new UserUserPagePostReq({
+    objectId: authStore.consoleInfo.consoleObjectId,
+    param: '',
+    pageIndex: 1,
+    pageSize: 10,
+    userId: userStore.userInfo.id,
+  }),
+)
+const { data, current, totalPage, loading, pageSize } = usePagination(() => UserUserPage.post(userUserPagePostReq), {
+  defaultParams: [],
+  pagination: {
+    currentKey: 'currPage',
+    pageSizeKey: 'pageSize',
+    totalKey: 'totalCount',
+  },
+})
+</script>

src/shared/components/global/g-query-wrapper/index.vue

@@ -10,7 +10,8 @@
         {{ data.message }}
       </div>
       <div v-if="error || hasError">
-        <el-button @click="run()">重新请求</el-button>
+        <el-button v-if="hasTokenInvalid" @click="handleLogout">重新登录</el-button>
+        <el-button v-else @click="run()">重新请求</el-button>
       </div>
     </template>
   </div>
@@ -38,4 +39,8 @@ const props = defineProps({
   },
 })
 const hasError = computed(() => (props.data ? props.data?.code !== GATEWAY_CODE.success : false))
+const hasTokenInvalid = computed(() => (props.data ? props.data?.code === 'baas.err.auth.token.sign.invalid' : false))
+const handleLogout = () => {
+  window.location.replace(window.location.origin + '/login')
+}
 </script>

src/shared/models/user-service/UserUserPage.ts

 import { JsonProperty, Serializable } from 'typescript-json-serializer'
 import { api } from '@shared/http/axios'
 import { HttpResponse } from '@shared/http/HttpResponse'
-import { Model } from '@shared/models/Model'
+import { Pagination } from '@shared/models/Pagination'
+import { UserToken } from '@shared/models/user-service/UserToken'
+import { PaginationParams } from '@shared/models/PaginationParams'
 
 @Serializable()
-export class UserUserPage extends Model<UserUserPage> {
+export class UserUserPage extends Pagination<UserToken> {
+  @JsonProperty({ type: UserToken }) data: UserToken[]
   /**
    * 分页查看平台注册用户信息列表
    * @param payload
    */
   static async post(payload: UserUserPagePostReq) {
-    return await api.post<HttpResponse>('/services/user-service/user/page', { data: payload })
+    return await api.post<HttpResponse<UserUserPage>>('/services/user-service/user/page', { data: payload })
   }
 }
 
 @Serializable()
-export class UserUserPagePostReq extends Model<UserUserPagePostReq> {
+export class UserUserPagePostReq extends PaginationParams<UserUserPagePostReq> {
   @JsonProperty() objectId: string
   @JsonProperty() orgName: string
-  @JsonProperty() pageIndex: number
-  @JsonProperty() pageSize: number
   @JsonProperty() param: string
   @JsonProperty() status: number
-  @JsonProperty() userId: number
+  @JsonProperty() userId: string
 }

src/shims-vue.d.ts

-/* eslint-disable */
-
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
 }
 declare module '*.svg' {
-  import type { DefineComponent } from 'vue';
-  const component: DefineComponent;
-  export default component;
-}
-declare module '@vue/runtime-core' {
-  import {hasBtnPermission} from "@shared/utils/permission-utils";
-  interface ComponentCustomProperties {
-    hasPerm: typeof hasBtnPermission
-  }
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent
+  export default component
 }