优化 多次连续查询和加载条边框

src/api/cloudTextbooks.api.ts

@@ -3,8 +3,9 @@ import { httpAxios_gym, httpAxios_gyt } from "@/api/ApiInstance"
 /** 管乐迷 */
 
 //获取课程列表
-export const queryLessonCourseware_gym = (type: string) => {
+export const queryLessonCourseware_gym = (type: string, abortController: AbortController) => {
    return httpAxios_gym.axioseRquest({
+      signal: abortController.signal,
       method: "post",
       url: "/api-teacher/lessonCourseware/queryLessonCourseware",
       data: {

src/api/curriculum.api.ts

@@ -52,16 +52,18 @@ export const setCoursewareDetail_gym = (id: string, courseId: string) => {
    })
 }
 // 获取当月所有的课程日期 month=2024-04
-export const getCourseScheduleDateByMonth_gym = (date: string) => {
+export const getCourseScheduleDateByMonth_gym = (date: string, abortController: AbortController) => {
    return httpAxios_gym.axioseRquest({
       method: "get",
+      signal: abortController.signal,
       url: `/api-teacher/teacherCourseSchedule/getCourseScheduleDateByMonth?month=${date}`
    })
 }
 // 获取当天的课程列表 date=2024-04-03
-export const getCourseSchedulesWithDate_gym = (date: string) => {
+export const getCourseSchedulesWithDate_gym = (date: string, abortController: AbortController) => {
    return httpAxios_gym.axioseRquest({
       method: "get",
+      signal: abortController.signal,
       url: `/api-teacher/teacherCourseSchedule/getCourseSchedulesWithDate?date=${date}`
    })
 }
@@ -108,8 +110,9 @@ export const getLessonCoursewareDetail_gyt = (id: string) => {
 }
 
 // 获取当月所有的课程日期 month=2024-04
-export const getCourseScheduleDateByMonth_gyt = (date: string) => {
+export const getCourseScheduleDateByMonth_gyt = (date: string, abortController: AbortController) => {
    return httpAxios_gyt.axioseRquest({
+      signal: abortController.signal,
       method: "post",
       url: `/api-teacher/courseSchedule/calendar`,
       data: {
@@ -118,8 +121,9 @@ export const getCourseScheduleDateByMonth_gyt = (date: string) => {
    })
 }
 // 获取当天的课程列表 date=2024-04-03
-export const getCourseSchedulesWithDate_gyt = (date: string) => {
+export const getCourseSchedulesWithDate_gyt = (date: string, abortController: AbortController) => {
    return httpAxios_gyt.axioseRquest({
+      signal: abortController.signal,
       method: "post",
       url: `/api-teacher/courseSchedule/page`,
       data: {

src/libs/auth.ts

@@ -3,6 +3,7 @@ import Cookies from "js-cookie"
 /* code */
 // eslint-disable-next-line prefer-const
 export let CODE401 = 403 //没有权限   管乐迷为403  管乐团为5000
+export const CODE_ERR_CANCELED = "ERR_CANCELED" // 取消请求的code
 export function setCODE401(code: number) {
    CODE401 = code
 }

src/libs/axios.ts

@@ -2,7 +2,7 @@
 import axios, { AxiosInstance, AxiosRequestConfig, Method, AxiosPromise } from "axios"
 import Nprogress from "@/plugin/nprogress"
 import { ElMessage } from "element-plus"
-import { TokenInvalidFlag, CODE401 } from "@/libs/auth"
+import { TokenInvalidFlag, CODE401, CODE_ERR_CANCELED } from "@/libs/auth"
 import userStore from "@/store/modules/user"
 
 //重写 axios 传参
@@ -74,11 +74,18 @@ class HttpAsynAxios {
             //         case 401:
             //     }
             // }
-            const rejectData: apiResDataType = {
-               code: 500,
-               message: "系统运行异常，请刷新页面",
-               data: null
-            }
+            const rejectData: apiResDataType =
+               error.code === CODE_ERR_CANCELED
+                  ? {
+                       code: error.code,
+                       message: "系统取消接口",
+                       data: null
+                    }
+                  : {
+                       code: 500,
+                       message: "系统运行异常，请刷新页面",
+                       data: null
+                    }
             return Promise.reject(rejectData) // 返回接口返回的错误信息
          }
       )

src/store/modules/user.ts

@@ -4,7 +4,7 @@ import { store } from "../index"
 import { logout_gym, logout_gyt, getUserInfo_gyt, queryUserInfo_gym } from "@/api/user.api"
 import { removeToken, setToken, setUserType, getUserType, removeUserType, setCODE401 } from "@/libs/auth"
 import router, { resetRouter } from "@/router"
-import { httpAjax } from "@/plugin/httpAjax"
+import { httpAjax, httpAjaxLoading } from "@/plugin/httpAjax"
 import { menus_gym, menus_gyt } from "@/config/menus"
 import { closeAllModalFrame } from "@/plugin/modalFrame"
 
@@ -50,7 +50,7 @@ const useStore = defineStore("user", {
          // GYM 和 GYT 区分 code验证错误码的区分
          userType !== "GYM" || setCODE401(5000)
          // GYM 和 GYT 区分 获取用户信息的接口区分
-         const userInfoRes = await httpAjax(userType === "GYM" ? queryUserInfo_gym : getUserInfo_gyt)
+         const userInfoRes = await httpAjaxLoading(userType === "GYM" ? queryUserInfo_gym : getUserInfo_gyt)
          if (userInfoRes.code !== 200) {
             return Promise.reject(userInfoRes)
          }

src/type.d.ts

@@ -4,7 +4,7 @@
 
 /** 接口返回值 */
 declare interface apiResDataType {
-   code: number
+   code: number | "ERR_CANCELED"
    data: any
    message: string
 }

src/views/cloudTextbooks/chooseDialog.vue

@@ -92,6 +92,9 @@ function handlePaly(id: string) {
       height: 100%;
       display: flex;
       position: relative;
+      & > :deep(.el-loading-mask) {
+         border-radius: 17px;
+      }
       .imgMid {
          width: 68px;
          height: 518px;

src/views/cloudTextbooks/useData.ts

@@ -7,7 +7,9 @@ import {
    getMyCoursewareDetail_gyt
 } from "@/api/cloudTextbooks.api"
 
-import { httpAjaxErrMsg } from "@/plugin/httpAjax"
+import { httpAjaxErrMsg, httpAjax } from "@/plugin/httpAjax"
+import { CODE_ERR_CANCELED } from "@/libs/auth"
+import { ElMessage } from "element-plus"
 
 import userStore from "@/store/modules/user"
 import { ref, shallowRef, computed } from "vue"
@@ -28,6 +30,7 @@ export const useDataList = () => {
    const listData = shallowRef<listType>([])
    let storeData: listType[number] = []
    const loading = ref(false)
+   let coursewareController: AbortController
 
    function handleGetList() {
       userStoreHook.roles === "GYM" ? handleGetList_gym("", "") : handleGetList_gyt()
@@ -64,8 +67,16 @@ export const useDataList = () => {
    }
    // 获取管乐迷数据
    function handleGetList_gym(type: string, queryStr: string) {
+      if (coursewareController) {
+         coursewareController.abort()
+      }
+      coursewareController = new AbortController()
       loading.value = true
-      httpAjaxErrMsg(queryLessonCourseware_gym, type).then(res => {
+      httpAjax(queryLessonCourseware_gym, type, coursewareController).then(res => {
+         // 自己关闭的时候不取消加载
+         if (res.code === CODE_ERR_CANCELED) {
+            return
+         }
          loading.value = false
          if (res.code === 200) {
             const data = (res.data?.rows || []).reduce((arr: any[], item: any) => {
@@ -81,6 +92,12 @@ export const useDataList = () => {
                return arr
             }, [])
             listData.value = chunkArray(data, 5)
+         } else {
+            ElMessage({
+               showClose: true,
+               message: res.message,
+               type: "error"
+            })
          }
       })
    }

src/views/curriculum/chooseCourseware.vue

@@ -165,6 +165,9 @@ function chooseCourseware(id: string) {
       height: 100%;
       display: flex;
       position: relative;
+      & > :deep(.el-loading-mask) {
+         border-radius: 17px;
+      }
       .imgMid {
          width: 68px;
          height: 518px;

src/views/curriculum/curriculum.vue

@@ -54,7 +54,9 @@ import {
    getCourseScheduleDateByMonth_gyt,
    getCourseSchedulesWithDate_gyt
 } from "@/api/curriculum.api"
-import { httpAjaxErrMsg, httpAjax } from "@/plugin/httpAjax"
+import { httpAjax } from "@/plugin/httpAjax"
+import { CODE_ERR_CANCELED } from "@/libs/auth"
+import { ElMessage } from "element-plus"
 
 const userStoreHook = userStore()
 const navs = [
@@ -71,6 +73,8 @@ const curriculumByMonth = shallowRef<string[]>([])
 const curriculumByDay = shallowRef<any[]>([])
 const dateValue = ref(new Date())
 const loading = ref(false)
+let monthController: AbortController
+let dayController: AbortController
 watch(dateValue, () => {
    handleDayChange(dateValue.value)
 })
@@ -84,33 +88,60 @@ function handleDayChange(date: Date) {
    getCurriculumByDay(format(date, "yyyy-mm-dd"))
 }
 function getCurriculumByDay(day: string) {
+   if (dayController) {
+      dayController.abort()
+   }
+   dayController = new AbortController()
    if (userStoreHook.roles === "GYM") {
       loading.value = true
-      httpAjaxErrMsg(getCourseSchedulesWithDate_gym, day).then(res => {
+      httpAjax(getCourseSchedulesWithDate_gym, day, dayController).then(res => {
+         // 自己关闭的时候不取消加载
+         if (res.code === CODE_ERR_CANCELED) {
+            return
+         }
          loading.value = false
          if (res.code === 200) {
             curriculumByDay.value = res.data?.rows || []
+         } else {
+            ElMessage({
+               showClose: true,
+               message: res.message,
+               type: "error"
+            })
          }
       })
    } else {
       loading.value = true
-      httpAjaxErrMsg(getCourseSchedulesWithDate_gyt, day).then(res => {
+      httpAjax(getCourseSchedulesWithDate_gyt, day, dayController).then(res => {
+         if (res.code === CODE_ERR_CANCELED) {
+            return
+         }
          loading.value = false
          if (res.code === 200) {
             curriculumByDay.value = res.data?.rows || []
+         } else {
+            ElMessage({
+               showClose: true,
+               message: res.message,
+               type: "error"
+            })
          }
       })
    }
 }
 function getCurriculumByMonth(month: string) {
+   if (monthController) {
+      monthController.abort()
+   }
+   monthController = new AbortController()
    if (userStoreHook.roles === "GYM") {
-      httpAjax(getCourseScheduleDateByMonth_gym, month).then(res => {
+      httpAjax(getCourseScheduleDateByMonth_gym, month, monthController).then(res => {
          if (res.code === 200) {
             curriculumByMonth.value = res.data || []
          }
       })
    } else {
-      httpAjax(getCourseScheduleDateByMonth_gyt, month).then(res => {
+      httpAjax(getCourseScheduleDateByMonth_gyt, month, monthController).then(res => {
          if (res.code === 200) {
             curriculumByMonth.value = res.data || []
          }

src/views/curriculum/curriculumDetail.vue

@@ -209,6 +209,9 @@ function handleSetUpCourseware(id: string) {
       overflow: hidden;
       display: flex;
       position: relative;
+      & > :deep(.el-loading-mask) {
+         border-radius: 35px;
+      }
       .imgMid {
          width: 62px;
          height: 470px;