classroom/src/views/curriculum/curriculum.vue

<!--
* @FileDescription: 课表
* @Author: 黄琪勇
* @Date:2024-03-28 19:01:23
-->
<template>
   <navContainer :navs="navs">
      <div class="curriculum">
         <ElScrollbar class="elScrollbar">
            <div class="calendarCon"><myCalendar v-model="dateValue" @monthChange="handleMonthChange" :dayMarks="curriculumByMonth" /></div>
            <div class="curriculumCon">
               <el-skeleton class="elSkeleton" :loading="skeletonIng" :count="1">
                  <template #template>
                     <div class="elSkeletonCon">
                        <el-skeleton-item class="elSkeletonItem" variant="p" />
                        <el-skeleton-item class="elSkeletonItem" variant="p" />
                        <el-skeleton-item class="elSkeletonItem" variant="h1" />
                        <el-skeleton-item class="elSkeletonItem" variant="h1" />
                     </div>
                  </template>
                  <template #default>
                     <ElScrollbar v-if="curriculumByDay.length || loading" v-loading="loading" class="listElScrollbar">
                        <component
                           @update="handleDayChange(dateValue)"
                           :curriculumData="curriculumByDay"
                           :is="userStoreHook.roles === 'GYM' ? curriculumList_gym : curriculumList_gyt"
                        />
                     </ElScrollbar>
                     <el-empty
                        v-if="!curriculumByDay.length && !loading"
                        class="empty"
                        :image="require('@/img/layout/empty1.png')"
                        description="您还没有待上课程哦～"
                     />
                  </template>
               </el-skeleton>
            </div>
         </ElScrollbar>
      </div>
   </navContainer>
</template>

<script setup lang="ts">
import { format } from "@/libs/tools"
import myCalendar from "@/components/myCalendar"
import { ref, shallowRef, watch } from "vue"
import navContainer from "@/businessComponents/navContainer"
import userStore from "@/store/modules/user"
import curriculumList_gym from "./components/curriculumList/curriculumList_gym.vue"
import curriculumList_gyt from "./components/curriculumList/curriculumList_gyt.vue"
import {
   getCourseScheduleDateByMonth_gym,
   getCourseSchedulesWithDate_gym,
   getCourseScheduleDateByMonth_gyt,
   getCourseSchedulesWithDate_gyt
} from "@/api/curriculum.api"
import { httpAjax } from "@/plugin/httpAjax"
import { CODE_ERR_CANCELED } from "@/libs/auth"
import { ElMessage } from "element-plus"
import { useRoute } from "vue-router"

const route = useRoute()
const userStoreHook = userStore()
const navs = [
   {
      name: "主页",
      url: "/"
   },
   {
      name: "课表"
   }
]

const curriculumByMonth = shallowRef<string[]>([])
const curriculumByDay = shallowRef<any[]>([])
const dateValue = ref(route.query.date ? new Date(route.query.date as string) : new Date())
const loading = ref(false)
const skeletonIng = ref(true)
let monthController: AbortController
let dayController: AbortController
watch(dateValue, () => {
   handleDayChange(dateValue.value)
})

handleMonthChange(dateValue.value)
handleDayChange(dateValue.value)
function handleMonthChange(date: Date) {
   getCurriculumByMonth(format(date, "yyyy-mm"))
}
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
      httpAjax(getCourseSchedulesWithDate_gym, day, dayController).then(res => {
         // 自己关闭的时候不取消加载
         if (res.code === CODE_ERR_CANCELED) {
            return
         }
         skeletonIng.value = false
         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
      httpAjax(getCourseSchedulesWithDate_gyt, day, dayController).then(res => {
         if (res.code === CODE_ERR_CANCELED) {
            return
         }
         skeletonIng.value = false
         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, monthController).then(res => {
         if (res.code === 200) {
            curriculumByMonth.value = res.data || []
         }
      })
   } else {
      httpAjax(getCourseScheduleDateByMonth_gyt, month, monthController).then(res => {
         if (res.code === 200) {
            curriculumByMonth.value = res.data || []
         }
      })
   }
}
</script>

<style lang="scss" scoped>
.curriculum {
   width: 100%;
   height: 100%;
   & > :deep(.elScrollbar) {
      > .el-scrollbar__wrap {
         overflow-x: hidden;
         > .el-scrollbar__view {
            width: 100%;
            display: flex;
            padding: 50px 50px 0 20px;
         }
      }
   }
   .calendarCon {
      flex-shrink: 0;
      width: 787px;
      height: 729px;
      background: url("@/img/curriculum/kuang.png") no-repeat;
      background-size: 100% 100%;
      padding: 56px 72px 72px 128px;
   }
   .curriculumCon {
      margin-left: 26px;
      flex-grow: 1;
      overflow: hidden;
      height: 729px;
      background: linear-gradient(180deg, #ffd783 0%, #ffebc1 100%);
      border-radius: 42px;
      padding: 30px 0;
      & > :deep(.listElScrollbar) {
         > .el-loading-mask {
            margin: 0 30px;
            border-radius: 42px;
         }
         > .el-scrollbar__wrap {
            overflow-x: hidden;
            > .el-scrollbar__view {
               width: 100%;
               padding: 0 30px;
            }
         }
      }
      & > :deep(.empty) {
         height: 100%;
         background: #ffffff;
         border-radius: 35px;
         padding: 0;
         margin: 0 30px;
         .el-empty__image {
            width: 360px;
         }
      }
      .elSkeleton {
         padding: 0 30px;
         .elSkeletonCon {
            background: #ffffff;
            border-radius: 35px;
            padding: 20px 30px;
            margin-bottom: 18px;
            &:last-child {
               margin-bottom: 0;
            }
            > .elSkeletonItem {
               &:nth-child(1) {
                  height: 30px;
               }
               &:nth-child(2) {
                  margin-top: 16px;
                  height: 45px;
               }
               &:nth-child(3) {
                  margin-top: 14px;
                  height: 28px;
               }
               &:nth-child(4) {
                  margin-top: 4px;
                  height: 22px;
               }
            }
         }
      }
   }
}
</style>
<style lang="scss"></style>