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

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

import {getTeacherEquipment, getTeacherGrade, getTeacherManage} from "@/api/teacher";
import {TeacherItem, TeacherManage} from "@/api/teacher/types";
import {trimInput} from "@/utils";

const userStore = useUserStore();
defineOptions({
  name: "TeacherIndex",
  inheritAttrs: false,
});
/**
 * 班级数据
 */
const teacherData = ref<TeacherItem[]>();
// 0加载中，1数据正常，2数据为空
const dataStatus = ref(0);
// 教师数量
let teacherCount = ref(0);
// 用于搜索的教师名称或手机号
let searchKeyword = ref("");
// 获取教师
async function getTeacherData(schoolId: number, keyword: string) {
  getTeacherManage(schoolId, keyword)
    .then(({data}) => {
      const temp: TeacherManage = data;
      teacherData.value = temp.lists;
      teacherCount.value = temp.count;
      dataStatus.value = 1;
    })
    .catch((error) => {
      dataStatus.value = 2;
      console.log(error);
    });
}
// 获取教师班级和设备
async function getGradeAndEquipment(teacher: TeacherItem) {
  // 获取教师班级
  getTeacherGrade(teacher.id)
    .then(({data}) => {
      teacher.grades = data;
      if (teacher.grades && teacher.grades.length > 0) {
        teacher.lines = teacher.grades.length;
      }
      if (!teacher.equipment || Object.keys(teacher.equipment).length == 0) {
        // 获取教师设备
        getTeacherEquipment(teacher.id).then(({data}) => {
          teacher.equipment = data;
        });
      }
    })
    .catch((error) => {
      console.log(error);
    });
}
// 打开教师面板请求数据
function collapseTeacher(teacher: TeacherItem) {
  if (!teacher.grades || teacher.grades.length === 0) {
    getGradeAndEquipment(teacher);
  }
}
// 搜索
function teacherSearch() {
  getTeacherData(userStore.schoolId, searchKeyword.value);
}
onMounted(() => {
  // 获取教师
  getTeacherData(userStore.schoolId, "");
});
watch(
  () => userStore.schoolId,
  (newValue) => {
    searchKeyword.value = "";
    // 学校切换后重新获取教师
    getTeacherData(newValue, "");
  }
);
</script>

<template>
  <div class="teacher-container">
    <!-- 教师查找 -->
    <div class="teacher-search">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入教师名称或手机号码"
        size="large"
        @input="(value) => (searchKeyword = trimInput(value))" />
      <el-button size="large" type="primary" @click="teacherSearch()">查找</el-button>
      <span
        >共<b>{{ teacherCount }}</b
        >人</span
      >
    </div>
    <template v-if="dataStatus == 1">
      <!-- 折叠面板-->
      <div v-for="teacher in teacherData" :key="teacher.id" class="list-collapse">
        <el-collapse v-model="teacher.active" @change="collapseTeacher(teacher)">
          <el-collapse-item :name="teacher.id">
            <template #title>
              <div class="title">
                <span class="blue mr-10">{{ teacher.name }}</span>
                <span>注册时间：{{ teacher.create_time }}</span>
                <span class="blue fr"
                  >负责班级 & 绑定设备
                  <el-icon :class="teacher.active && teacher.active.includes(teacher.id) ? 'is-active' : ''"
                    ><CaretBottom
                  /></el-icon>
                </span>
              </div>
            </template>
            <el-row class="table-container">
              <el-col :xs="24" :span="19">
                <el-row>
                  <el-col :xs="6" :span="3">
                    <el-table :data="teacher.equipment ? teacher.equipment.AI : []" empty-text="-" style="width: 100%">
                      <el-table-column align="center" label="水母星球脑机" prop="sn" />
                    </el-table>
                  </el-col>
                  <el-col :xs="6" :span="3">
                    <el-table :data="teacher.equipment ? teacher.equipment.SW : []" empty-text="-" style="width: 100%">
                      <el-table-column align="center" label="智脑水舞" prop="sn" />
                    </el-table>
                  </el-col>
                  <el-col :xs="6" :span="3">
                    <el-table :data="teacher.equipment ? teacher.equipment.KL : []" empty-text="-" style="width: 100%">
                      <el-table-column align="center" label="智脑恐龙" prop="sn" />
                    </el-table>
                  </el-col>
                  <el-col :xs="6" :span="3">
                    <el-table :data="teacher.equipment ? teacher.equipment.PP : []" empty-text="-" style="width: 100%">
                      <el-table-column align="center" label="智脑碰碰车" prop="sn" />
                    </el-table>
                  </el-col>
                  <el-col :xs="6" :span="3">
                    <el-table :data="teacher.equipment ? teacher.equipment.UF : []" empty-text="-" style="width: 100%">
                      <el-table-column align="center" label="智脑UFO" prop="sn" />
                    </el-table>
                  </el-col>
                  <el-col :xs="6" :span="3">
                    <el-table :data="teacher.equipment ? teacher.equipment.SU : []" empty-text="-" style="width: 100%">
                      <el-table-column align="center" label="智脑SUV" prop="sn" />
                    </el-table>
                  </el-col>
                  <el-col :xs="6" :span="3">
                    <el-table :data="teacher.equipment ? teacher.equipment.SC : []" empty-text="-" style="width: 100%">
                      <el-table-column align="center" label="智脑赛车" prop="sn" />
                    </el-table>
                  </el-col>
                  <el-col :xs="6" :span="3">
                    <el-table :data="teacher.equipment ? teacher.equipment.JM : []" empty-text="-" style="width: 100%">
                      <el-table-column align="center" label="智脑积木" prop="sn" />
                    </el-table>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :xs="24" :span="5" class="grade">
                <el-table :data="teacher.grades" empty-text="-" style="width: 100%">
                  <el-table-column align="center" label="负责班级" prop="name" />
                </el-table>
              </el-col>
            </el-row>
          </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>
        <p v-if="dataStatus == 2">暂时还没有任何教师注册绑定学校！</p>
      </div>
    </template>
  </div>
</template>

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

.teacher-search {
  margin-bottom: 20px;
  font-size: 16px;

  .el-input {
    width: 250px;
    margin: 0;
  }

  :deep(.el-input__inner) {
    font-size: 16px;
  }

  .el-button {
    padding: 0 26px;
    margin: 0 20px;
    font-size: 16px;
    border-radius: 12px;
  }

  b {
    font-size: 20px;
  }
}

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

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

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

    .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;
  }
}

.table-container {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoAQMAAAAFeAI0AAAABlBMVEUAAADg5vHOG/+PAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjoC5oAAAA0ACB9zOkNgAAAABJRU5ErkJggg==")
    repeat;
}

:deep(.el-table .el-table__header .el-table__cell .cell) {
  white-space: nowrap;
}

:deep(.el-table__empty-block),
:deep(.el-table__empty-text) {
  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
}

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

:deep(.el-table .el-table__row) {
  min-height: 40px;
}

.grade {
  border-left: 1px solid #ddd;
}

:deep(.grade .el-table th.el-table__cell) {
  background: #ddd;
}
</style>