feat: alova.js替换axios

web/src/api/panel/cron/index.ts

@@ -1,17 +1,17 @@
-import { request } from '@/utils'
+import { http } from '@/utils'
 
 export default {
   // 获取任务列表
-  list: (page: number, limit: number): any => request.get('/cron', { params: { page, limit } }),
+  list: (page: number, limit: number): any => http.Get('/cron', { params: { page, limit } }),
   // 获取任务脚本
-  get: (id: number): any => request.get('/cron/' + id),
+  get: (id: number): any => http.Get('/cron/' + id),
   // 创建任务
-  create: (task: any): any => request.post('/cron', task),
+  create: (task: any): any => http.Post('/cron', task),
   // 修改任务
   update: (id: number, name: string, time: string, script: string): any =>
-    request.put('/cron/' + id, { name, time, script }),
+    http.Put('/cron/' + id, { name, time, script }),
   // 删除任务
-  delete: (id: number): any => request.delete('/cron/' + id),
+  delete: (id: number): any => http.Delete(`/cron/${id}`),
   // 修改任务状态
-  status: (id: number, status: boolean): any => request.post('/cron/' + id + '/status', { status })
+  status: (id: number, status: boolean): any => http.Post('/cron/' + id + '/status', { status })
 }

web/src/views/task/CreateModal.vue

@@ -41,11 +41,11 @@ const { data: installedDbAndPhp } = useRequest(dashboard.installedDbAndPhp, {
 })
 
 const mySQLInstalled = computed(() => {
-  return installedDbAndPhp.value.db.find((item) => item.value === 'mysql')
+  return installedDbAndPhp.value.db.find((item: any) => item.value === 'mysql')
 })
 
 const postgreSQLInstalled = computed(() => {
-  return installedDbAndPhp.value.db.find((item) => item.value === 'postgresql')
+  return installedDbAndPhp.value.db.find((item: any) => item.value === 'postgresql')
 })
 
 const getWebsiteList = async (page: number, limit: number) => {
@@ -61,15 +61,13 @@ const getWebsiteList = async (page: number, limit: number) => {
 
 const handleSubmit = async () => {
   loading.value = true
-  await cron
-    .create(createModel.value)
-    .then(() => {
+  useRequest(cron.create(createModel.value))
+    .onSuccess(() => {
       window.$message.success('创建成功')
       window.$bus.emit('task:refresh-cron')
-      loading.value = false
-      show.value = false
     })
-    .catch(() => {
+    .onComplete(() => {
+      show.value = false
       loading.value = false
     })
 }

web/src/views/task/CronView.vue

@@ -8,13 +8,19 @@ import { NButton, NDataTable, NInput, NPopconfirm, NSwitch, NTag } from 'naive-u
 import cron from '@/api/panel/cron'
 import file from '@/api/panel/file'
 import { decodeBase64, formatDateTime, renderIcon } from '@/utils'
-import type { CronTask } from '@/views/task/types'
 import { CronNaive } from '@vue-js-cron/naive-ui'
 
 const logPath = ref('')
 const logModal = ref(false)
 const editModal = ref(false)
 
+const editTask = ref({
+  id: 0,
+  name: '',
+  time: '',
+  script: ''
+})
+
 const columns: any = [
   { type: 'selection', fixed: 'left' },
   {
@@ -158,83 +164,55 @@ const columns: any = [
   }
 ]
 
-const pagination = reactive({
-  page: 1,
-  pageCount: 1,
-  pageSize: 20,
-  itemCount: 0,
-  showQuickJumper: true,
-  showSizePicker: true,
-  pageSizes: [20, 50, 100, 200]
-})
+const { loading, data, page, total, pageSize, pageCount, refresh } = usePagination(
+  (page, pageSize) => cron.list(page, pageSize),
+  {
+    initialData: { total: 0, list: [] },
+    initialPageSize: 20,
+    total: (res: any) => res.total,
+    data: (res: any) => res.items
+  }
+)
 
-const data = ref<CronTask[]>([] as CronTask[])
-
-const editTask = ref({
-  id: 0,
-  name: '',
-  time: '',
-  script: ''
-})
-
-const getTaskList = async (page: number, limit: number) => {
-  const { data } = await cron.list(page, limit)
-  return data
-}
-
-const onPageChange = (page: number) => {
-  pagination.page = page
-  getTaskList(page, pagination.pageSize).then((res) => {
-    data.value = res.items
-    pagination.itemCount = res.total
-    pagination.pageCount = res.total / pagination.pageSize + 1
-  })
-}
-
-const onPageSizeChange = (pageSize: number) => {
-  pagination.pageSize = pageSize
-  onPageChange(1)
-}
-
-const handleStatusChange = async (row: any) => {
-  cron.status(row.id, !row.status).then(() => {
-    window.$message.success('修改成功')
+const handleStatusChange = (row: any) => {
+  useRequest(cron.status(row.id, !row.status)).onSuccess(() => {
     row.status = !row.status
+    window.$message.success('修改成功')
   })
 }
 
-const handleEdit = async (row: any) => {
-  await cron.get(row.id).then(async (res) => {
-    await file.content(res.data.shell).then((res) => {
+const handleEdit = (row: any) => {
+  useRequest(cron.get(row.id)).onSuccess(({ data }) => {
+    useRequest(file.content(data.shell)).onSuccess(({ data }) => {
       editTask.value.id = row.id
       editTask.value.name = row.name
       editTask.value.time = row.time
-      editTask.value.script = decodeBase64(res.data.content)
+      editTask.value.script = decodeBase64(data.content)
       editModal.value = true
     })
   })
 }
 
 const handleDelete = async (id: number) => {
-  await cron.delete(id).then(() => {
+  useRequest(cron.delete(id)).onSuccess(() => {
     window.$message.success('删除成功')
     window.$bus.emit('task:refresh-cron')
   })
 }
 
 const saveTaskEdit = async () => {
-  cron
-    .update(editTask.value.id, editTask.value.name, editTask.value.time, editTask.value.script)
-    .then(() => {
-      window.$message.success('修改成功')
-      window.$bus.emit('task:refresh-cron')
-    })
+  useRequest(
+    cron.update(editTask.value.id, editTask.value.name, editTask.value.time, editTask.value.script)
+  ).onSuccess(() => {
+    window.$message.success('修改成功')
+    window.$bus.emit('task:refresh-cron')
+  })
 }
 
 onMounted(() => {
-  onPageChange(pagination.page)
+  refresh()
   window.$bus.on('task:refresh-cron', () => {
-    onPageChange(pagination.page)
+    refresh()
   })
 })
 
@@ -249,14 +227,21 @@ onUnmounted(() => {
       striped
       remote
       :scroll-x="1300"
-      :data="data"
+      :loading="loading"
       :columns="columns"
+      :data="data"
       :row-key="(row: any) => row.id"
-      :pagination="pagination"
-      :bordered="false"
-      :loading="false"
-      @update:page="onPageChange"
-      @update:page-size="onPageSizeChange"
+      v-model:page="page"
+      v-model:pageSize="pageSize"
+      :pagination="{
+        page: page,
+        pageCount: pageCount,
+        pageSize: pageSize,
+        itemCount: total,
+        showQuickJumper: true,
+        showSizePicker: true,
+        pageSizes: [20, 50, 100, 200]
+      }"
     />
   </n-card>
   <realtime-log-modal v-model:show="logModal" :path="logPath" />

web/src/views/task/types.ts

@@ -1,11 +0,0 @@
-export interface CronTask {
-  id: number
-  name: string
-  status: boolean
-  type: string
-  time: string
-  shell: string
-  log: string
-  created_at: string
-  updated_at: string
-}