refactor: 请求换成usepagination

src/main.ts

@@ -13,6 +13,7 @@ import pinia from './store'
 import uiProvider from './ui/provider'
 import '@/utils/systemCopyright'
 import '@/utils/baidu'
+import { setGlobalOptions } from 'vue-request';
 
 import 'vxe-table/lib/style.css'
 import 'vxe-pc-ui/lib/style.css'
@@ -37,4 +38,14 @@ if (icons.isOfflineUse) {
   }
 }
 
+// vue-request 全局配置
+setGlobalOptions({
+  manual: true,
+  pagination: {
+    totalKey: 'data.total',
+    currentKey: 'page',
+    pageSizeKey: 'size',
+  },
+});
+
 app.mount('#app')

src/views/role-management/index.vue

@@ -14,13 +14,9 @@ import EditCallingsForm from './components/EditCallingsForm.vue'
 import SearchForm from './components/SearchForm.vue'
 
 import type { TAgent, TAgentDetail } from '@/types/role'
-import { anycallPage, deleteClone, updateTopFlag, type TRole } from '@/api/modules/anycallService'
-import { formatDateGeneral } from '@/utils'
+import { anycallPage, deleteClone, updateTopFlag, } from '@/api/modules/anycallService'
 import { toast } from 'vue-sonner'
-
-const tableRef = ref()
-
-const loading = ref(false)
+import { usePagination } from 'vue-request'
 
 // 控制 EditForm 显示状态
 const editFormVisible = ref(false)
@@ -34,71 +30,29 @@ const editCallingsFormVisible = ref(false)
 const importedResultDialogVisible = ref(false)
 const importedFile = ref<UploadFile | null>(null)
 const importedResult = ref<{name: string, msg: string}[]>([
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
-  // {name: 'test1.csv', msg: '成功'},
+
 ])
 // 搜索参数
 const searchParams = ref({
-  // name: '',
   keywords: '',
 })
-const dataList = ref<TAgent[]>([]);
 
-// 分页信息
-const pagination = ref({
-  total: 0,
-  size: 20,
-  page:1,
-})
 
-async function fetchData() {
-  loading.value = true
-  const res = await anycallPage({
+const { data, run, loading, current, total, pageSize, changePageSize } = usePagination(anycallPage, {
+  defaultParams: [{ page: 1, size: 20 }],
+});
+
+async function fetchData(page?: number) {
+  run({
     keywords: searchParams.value.keywords,
-    page: pagination.value.page,
-    size: pagination.value.size,
+    page: page ?? current.value,
+    size: pageSize.value,
   })
-  if(res.code === 0){
-    dataList.value = res.data.content
-    pagination.value.total = res.data.total
-  }
-  loading.value = false
-}
-function handlePageChange(page: number) {
-  pagination.value.page = page
-  fetchData()
 }
 
-function handleSizeChange(size: number) {
-  pagination.value.size = size
-  pagination.value.page = 1
-  fetchData()
-}
 
 function handleRefresh () {
-  pagination.value.page = 1 // 搜索时重置到第一页
-  fetchData()
+  fetchData(1)
 }
 const handleFormCancel = () => {
   editFormVisible.value = false
@@ -155,14 +109,11 @@ const handleEditCallings = (data: TAgent) => {
 }
 
 const handleSearch = () => {
-  pagination.value.page = 1
-  fetchData()
+  fetchData(1)
 }
 const handleReset = () => {
-  pagination.value.page = 1
-  pagination.value.size = 10
   searchParams.value.keywords = ''
-  fetchData()
+  fetchData(1)
 }
 
 const handleDelete = async (cloneId:string) => {
@@ -175,8 +126,8 @@ const handleDelete = async (cloneId:string) => {
   }
 }
 
-onMounted(async () => {
-  await fetchData()
+onMounted(() => {
+  fetchData()
 })
 
 
@@ -198,7 +149,7 @@ onMounted(async () => {
       </div>
       <ElTable
         v-loading="loading"
-        ref="tableRef" :data="dataList" stripe highlight-current-row border height="100%"
+        ref="tableRef" :data="data?.data?.content" stripe highlight-current-row border height="100%"
       >
         <ElTableColumn label="id" prop="id" min-width="240" />
         <ElTableColumn label="Role Name" prop="name" min-width="220" />
@@ -269,15 +220,9 @@ onMounted(async () => {
         </ElTableColumn>
       </ElTable>
       <div class="p-4">
-        <ElPagination
-          v-model:current-page="pagination.page"
-          v-model:page-size="pagination.size"
-          :total="pagination.total"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handlePageChange"
-        />
+        <ElPagination v-model:current-page="current" v-model:page-size="pageSize" :total="total"
+          :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
+          @size-change="changePageSize" />
       </div>
     </FaPageMain>
     <EditForm v-model:visible="editFormVisible" :model-value="currentData" :mode="editMode" @refresh="handleRefresh"

src/views/voice-management/index.vue

@@ -14,12 +14,7 @@ import type { TVoice } from '@/types/voice'
 import { toast } from 'vue-sonner'
 import { voiceList, activeVoice } from '@/api/modules/voice'
 import { formatDateGeneral } from '@/utils'
-
-const tableRef = ref()
-const loading = ref(false)
-const cloneLoading = ref(false)
-const router = useRouter()
-const route = useRoute()
+import { usePagination } from 'vue-request'
 
 // 搜索参数
 const searchParams = ref<TSearchParams>({
@@ -27,7 +22,6 @@ const searchParams = ref<TSearchParams>({
   type: 1,
   gender: null
 })
-const dataList = ref<TVoice[]>([]);
 const editFormVisible = ref(false)
 const editCloneVisible = ref(false)
 const editMode = ref<'create' | 'edit'>('create')
@@ -39,74 +33,24 @@ const currentData = ref<{
     "gender": number,
 }|null>(null)
 
-const currentAudio = ref<{
-    src: string;
-    srcName: string;
-    duration: number;
-}|undefined>()
-
-// 从URL获取初始分页参数
-const getInitialPagination = () => {
-  const page = Number(route.query.page) || 1
-  const size = Number(route.query.size) || 20
-  return {
-    total: 0,
-    page: page > 0 ? page : 1,
-    size: [10, 20, 50, 100].includes(size) ? size : 20,
-  }
-}
-
-// 分页信息
-const pagination = ref(getInitialPagination())
 
-// 更新URL中的分页参数
-const updateUrlParams = (page: number, size: number) => {
-  const query = {
-    ...route.query,
-    page: page.toString(),
-    size: size.toString(),
-  }
+const { data, run, loading, current, total, pageSize, changePageSize } = usePagination(voiceList, {
+  defaultParams: [{ page: 1, size: 20 }],
+});
 
-  // 使用replace模式更新URL，避免产生历史记录
-  router.replace({
-    path: route.path,
-    query
-  })
-}
-
-async function fetchData() {
-  loading.value = true
+async function fetchData(page?: number) {
   const gender = searchParams.value.gender === -1 ? null : searchParams.value.gender
-  const res = await voiceList({
+  run({
     gender,
     name: searchParams.value.name,
     type: searchParams.value.type,
-    page: pagination.value.page,
-    size: pagination.value.size,
+    page: page ?? current.value,
+    size: pageSize.value,
   })
-  console.log('res', res)
-  if(res.code === 0){
-    dataList.value = res.data.content
-    pagination.value.total = res.data.total
-  }
-  loading.value = false
-}
-function handlePageChange(page: number) {
-  pagination.value.page = page
-  updateUrlParams(page, pagination.value.size)
-  fetchData()
 }
 
-function handleSizeChange(size: number) {
-  pagination.value.size = size
-  pagination.value.page = 1
-  updateUrlParams(1, size)
-  fetchData()
-}
 
 function handleSearch () {
-  pagination.value.page = 1 // 搜索时重置到第一页
-  updateUrlParams(1, pagination.value.size)
   fetchData()
 }
 
@@ -116,29 +60,10 @@ function handleReset () {
     type: 1,
     gender: null,
   }
-  pagination.value.page = 1 // 重置时重置到第一页
-  updateUrlParams(1, pagination.value.size)
-  fetchData()
+  fetchData(1)
 }
 
 
-// 监听URL参数变化，用于处理浏览器后退/前进
-watch(
-  () => route.query,
-  (newQuery) => {
-    const newPage = Number(newQuery.page) || 1
-    const newSize = Number(newQuery.size) || 20
-
-    // 只有当参数真正发生变化时才更新
-    if (newPage !== pagination.value.page || newSize !== pagination.value.size) {
-      pagination.value.page = newPage > 0 ? newPage : 1
-      pagination.value.size = [10, 20, 50, 100].includes(newSize) ? newSize : 20
-      fetchData()
-    }
-  },
-  { deep: true }
-)
-
 
 const handleEdit = (data: TVoice) => {
   editMode.value = 'edit'
@@ -170,9 +95,8 @@ const handleActive = async (id: string) => {
 }
 
 
-onMounted(async () => {
-  updateUrlParams(pagination.value.page, pagination.value.size)
-  await fetchData()
+onMounted(() => {
+  fetchData()
 })
 
 
@@ -190,7 +114,8 @@ onMounted(async () => {
         </ElSpace>
       </div>
       <ElTable
-        ref="tableRef" :data="dataList" stripe highlight-current-row border height="100%"
+        ref="tableRef" :data="data?.data?.content" stripe highlight-current-row border height="100%"
+        v-loading="loading"
       >
         <ElTableColumn label="ID" prop="id" width="280" />
         <ElTableColumn label="Name" prop="name" min-width="200"/>
@@ -238,15 +163,9 @@ onMounted(async () => {
         </ElTableColumn>
       </ElTable>
       <div class="p-4">
-        <ElPagination
-          v-model:current-page="pagination.page"
-          v-model:page-size="pagination.size"
-          :total="pagination.total"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handlePageChange"
-        />
+        <ElPagination v-model:current-page="current" v-model:page-size="pageSize" :total="total"
+          :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
+          @size-change="changePageSize" />
       </div>
     </FaPageMain>
     <EditForm v-model="currentData" v-model:visible="editFormVisible" :mode="editMode" @refresh="fetchData"></EditForm>