shuimu-dashboard-h5/src/views/grade/index.vue

<script setup lang="ts">
import { watch } from "vue";
import { useUserStore } from "@/store/modules/user";

import { getGradeList, getGradeStudents } from "@/api/grade";
import { GradeItem } from "@/api/grade/types";

const userStore = useUserStore();
defineOptions({
  name: "ClassIndex",
  inheritAttrs: false,
});
/**
 * 班级数据
 */
const gradeData = ref<GradeItem[]>();
// 0加载中，1数据正常，2数据为空
const dataStatus = ref(0);
// 班级status: 0全部1未结课2已结课
const gradeType = ref(0);
async function getGradeItems(schoolId: number, status: number) {
  getGradeList(schoolId, status)
    .then(({ data }) => {
      gradeData.value = data;
      dataStatus.value = 1;
    })
    .catch((error) => {
      dataStatus.value = 2;
      console.log(error);
    });
}
// 请求班级学生数据
async function getStudentList(grade: GradeItem) {
  getGradeStudents(grade.id)
    .then(({ data }) => {
      grade.students = data;
    })
    .catch((error) => {
      console.log(error);
    });
}
// 改变班级状态
function changeGradeType() {
  getGradeItems(userStore.schoolId, gradeType.value);
}
// 打开班级请求学生
function collapseGrade(grade: GradeItem) {
  if (grade.count > 0) {
    if (!grade.students || grade.students.length === 0) {
      getStudentList(grade);
    }
  }
}
onMounted(() => {
  // 获取班级
  getGradeItems(userStore.schoolId, gradeType.value);
});
watch(
  () => userStore.schoolId,
  (newValue, oldValue) => {
    console.log("userStore.schoolId", newValue, oldValue);
    // 学校切换后重新加载数据
    getGradeItems(newValue, gradeType.value);
  }
);
</script>

<template>
  <div class="class-container">
    <!-- 班级选择 -->
    <div class="class-select">
      <el-select
        v-model="gradeType"
        placeholder="全部班级"
        size="large"
        @change="changeGradeType()"
      >
        <el-option key="0" label="全部班级" :value="Number(0)" />
        <el-option key="1" label="未结课班级" :value="Number(1)" />
        <el-option key="1" label="已结课班级" :value="Number(2)" />
      </el-select>
    </div>
    <!-- 班级折叠面板-->
    <template v-if="dataStatus == 1">
      <div v-for="grade in gradeData" :key="grade.id" class="list-collapse">
        <el-collapse v-model="grade.active" @change="collapseGrade(grade)">
          <el-collapse-item :name="grade.id" class="testtt">
            <template #title>
              <div class="title">
                <span class="blue mr-10">{{ grade.name }}</span>
                <span class="mr-10">教师：{{ grade.teacher_name }}</span>
                <span class="mr-10">班级号：{{ grade.num }}</span>
                <span v-if="grade.grade_status == 1" class="red"
                  >结课时间：{{ grade.grade_time }}</span
                >
                <span class="blue fr"
                  >学生：{{ grade.count }}人
                  <el-icon
                    :class="
                      grade.active && grade.active.includes(grade.id)
                        ? 'is-active'
                        : ''
                    "
                    ><CaretBottom
                  /></el-icon>
                </span>
              </div>
            </template>
            <div>
              <el-table
                :data="grade.students"
                max-height="400"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="80"
                  align="center"
                />
                <el-table-column
                  prop="name"
                  label="学生名称"
                  width="180"
                  align="center"
                />
                <el-table-column
                  prop="phone"
                  label="手机号"
                  width="180"
                  align="center"
                />
                <el-table-column
                  prop="count"
                  label="训练次数"
                  width="180"
                  align="center"
                />
                <el-table-column />
                <!-- 无数据插槽 -->
                <template #empty>
                  <div class="empty">
                    <img src="../../assets/empty.png" alt="数据为空" />
                    <p>该班级还未绑定任何学生！</p>
                  </div>
                </template>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </template>
    <template v-else>
      <div class="empty page-empty">
        <img src="../../assets/empty.png" alt="数据为空" />
        <p v-if="dataStatus == 0">加载中...</p>
        <template v-if="dataStatus == 2">
          <p v-if="gradeType == 0">您的学校还未创建任何班级！</p>
          <p v-if="gradeType == 1">您的学校还没有任何未结课班级！</p>
          <p v-if="gradeType == 2">您的学校还没有任何已结课班级！</p>
        </template>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.class-container {
  position: relative;
  padding: 20px 30px;
}

.class-select {
  margin-bottom: 20px;

  .el-select {
    width: 160px;
    margin: 0;
  }
}

:deep(.el-input__wrapper) {
  background: #fff;
  border-radius: 12px;
  box-shadow: none !important;
}

/* el-select 各种边框线隐藏 **/
:deep(.el-select) {
  --el-select-input-focus-border-color: none !important;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: none !important;
}

:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  box-shadow: none !important;
}

.page-empty {
  padding: 240px 0;
}

.list-collapse {
  padding: 0 32px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 25px;

  .empty {
    padding: 20px 0;
  }

  .title {
    width: 100%;
    font-size: 18px;

    span {
      display: inline-block;
    }

    .blue {
      color: #4284f2;
    }

    .red {
      color: #e04962;
    }

    .fr {
      float: right;
    }

    .el-icon {
      vertical-align: middle;

      &.is-active {
        transform: rotate(180deg);
      }
    }
  }

  :deep(.el-collapse),
  :deep(.el-collapse-item__header),
  :deep(.el-collapse-item__wrap) {
    border: none;
  }

  :deep(.el-collapse-item__arrow) {
    display: none;
  }
}

:deep(.el-table th.el-table__cell) {
  background: #e9ebee;
}

.mobile .list-collapse {
  :deep(.el-collapse-item__header) {
    height: auto;
  }
}
</style>