edu_client/src/views/home/course/index.vue

<!--
 * @Author: October 382756525@qq.com
 * @Date: 2022-08-03 23:47:36
 * @LastEditors: October 382756525@qq.com
 * @LastEditTime: 2022-10-09 22:24:52
 * @Description:  课程中心列表页
 * 
-->
<template>
  <div class="w-base py-[.2rem] flex justify-between">
    <div class="w-[3.2rem] el_knowledge">
      <asideMenVue
        :data="course_type"
        title="课程分类"
        @change-menu="asideMenuThis"
      />
    </div>
    <div class="w-[8.6rem]">
      <div class="p-[.3rem] bg-white">
        <div class="flex -mx-[.125rem] items-center">
          <span class="text-[.2rem] w-[1rem]">课程类别：</span>
          <div class="flex flex-wrap flex-1 items-center">
            <el-tag
              v-for="item in courseStatus"
              class="mx-[.1rem] cursor-pointer"
              @click="paging.status = item.status"
              type="warning"
              :effect="paging.status == item.status ? 'dark' : 'plain'"
            >
              {{ item.title }}
            </el-tag>
          </div>
        </div>
        <div class="flex -mx-[.125rem] items-center mt-[.2rem]">
          <span class="text-[.2rem] w-[1rem]">分类：</span>
          <div class="flex flex-wrap flex-1 items-center">
            <el-tag
              v-for="item in asideThisChild"
              class="mx-[.1rem] cursor-pointer"
              @click="paging.courseType = item.dictKey"
              type="warning"
              :effect="paging.courseType == item.dictKey ? 'dark' : 'plain'"
            >
              {{ item.dictValue }}
            </el-tag>
          </div>
        </div>
        <div class="flex -mx-[.125rem] items-start mt-[.2rem]">
          <span class="text-[.2rem] w-[1rem]">标签：</span>
          <div class="flex flex-wrap flex-1">
            <el-tag
              v-for="item in course_tag"
              class="mx-[.1rem] cursor-pointer mb-[.2rem]"
              @click="paging.tags = item.dictKey"
              type="warning"
              :effect="paging.tags == item.dictKey ? 'dark' : 'plain'"
            >
              {{ item.dictValue }}
            </el-tag>
            <!-- <span
              class="text-[.18rem] mx-[.25rem] cursor-pointer hover:text-orange-400 mb-[.1rem]"
              v-for="item in course_tag"
              @click="paging.tags = item.dictKey"
              :class="paging.tags == item.dictKey ? 'text-orange-400' : ''"
            >
              {{ item.dictValue }}
            </span> -->
          </div>
        </div>
      </div>
      <div class="py-[.3rem] flex">
        <div class="flex flex-1">
          <section
            v-for="item of course_modl"
            class="text-[.18rem] mx-[.25rem] cursor-pointer hover:text-orange-400"
            :class="paging.isMold == item.dictKey ? 'text-orange-400' : ''"
            @click="paging.isMold = item.dictKey"
          >
            {{ item.dictValue }}
          </section>
        </div>
        <div class="flex">
          <el-tag
            v-for="item in isType"
            class="mx-[.1rem] cursor-pointer"
            @click="paging.isType = item.value"
            type="warning"
            :effect="paging.isType == item.value ? 'dark' : 'plain'"
          >
            {{ item.label }}
          </el-tag>
        </div>
      </div>
      <div class="flex flex-wrap after:content-[''] -mx-[.1rem]">
        <course-card-vue
          v-for="item in coursePage"
          class="mb-[.2rem] mx-[.1rem]"
          :item="item"
          @click="toItem(item)"
        />
      </div>
      <!-- <div class="flex justify-center">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useDict } from '@/hooks/dict'
import { getCoursePage } from '@/api/course'
import courseCardVue from '@/components/course/course_card.vue'
import asideMenVue from '@/components/asideMen.vue'

const router = useRouter()
const route = useRoute()

const toItem = (item: Course) => {
  router.push({ path: '/course/item', query: { id: item.id } })
}

const isType = ref([
  {
    label: '必修',
    value: 1
  },
  {
    label: '选修',
    value: 2
  }
])

const courseStatus = ref([
  {
    title: '普通课程',
    status: 1
  },
  {
    title: '本学必学',
    status: 2
  },
  {
    title: '质量管理课程',
    status: 3
  },
  {
    title: '岗位课程',
    status: 4
  }
])
/**
 * @description: 侧边分类选中
 * @param {*} item
 * @return {*}
 */
const asideMenuThis = (item: Dict) => {
  asideThisChild.value = item.children
  // paging.value.courseType = item.children[0].dictKey;
}

/**
 * @description: 选中分类的子菜单
 * @return {*}
 */
const asideThisChild = ref<Dict[]>()

const coursePage = ref<Course[]>([])

/**
 * @description: modl字典
 * @return {*}
 */
const course_modl = ref<Dict[]>([])

/**
 * @description: 课程标签字典
 * @return {*}
 */
const course_tag = ref<Dict[]>([])

/**
 * @description: 课程分类字典
 * @return {*}
 */
const course_type = ref<Dict[]>([])

const paging = ref<CoursePaging>({
  isMold: '',
  courseType: '',
  current: 1,
  size: 10,
  tags: '',
  isType: '',
  status: route.query.status as unknown as number
})

watch(
  paging,
  (newData, oldData) => {
    getCoursePage(paging.value).then((response) => {
      const { data } = response
      coursePage.value = data.records
    })
  },
  { deep: true }
)

const initialize = () => {
  useDict(['course_type', 'course_tag', 'course_modl']).then((response) => {
    course_tag.value = (response as Dicts).course_tag
    // paging.value.tags = course_tag.value[0].dictKey;
    course_modl.value = (response as Dicts).course_modl
    paging.value.isMold = course_modl.value[0].dictKey
    const course_type_dicts = (response as Dicts).course_type
    course_type_dicts.forEach((item) => {
      if (item.dictKey.length === 1) {
        course_type.value.push(item)
      }
    })
    course_type.value.forEach((item, index) => {
      course_type.value[index].children = getCourseTypeChild(
        item.dictKey,
        course_type_dicts
      )
    })
    asideMenuThis(course_type.value[0])
    getCoursePage(paging.value).then((response) => {
      const { data } = response
      coursePage.value = data.records
    })
  })
}

const getCourseTypeChild = (parentID: string, dicts: Dict[]) => {
  const child: Dict[] = []
  dicts.forEach((item) => {
    if (item.dictKey.length > 1) {
      if (item.dictKey.split('-')[0] == parentID) {
        child.push(item)
      }
    }
  })
  return child
}
initialize()

</script>

<style lang="scss" scope>
.el_knowledge{
  .border-orange-300{
    background-color: #172e60;
  }
}
.border-t-2{
  border-color: #172e60;
}
html {
  height: 100%;
}
body{
  height: 100%;
}
#app{
  height: 100%;
}

</style>