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

<script setup lang="ts">
import { GradeList } from "@/api/school/types";

defineOptions({
  name: "ClassIndex",
  inheritAttrs: false,
});
import { watch } from "vue";
import { useUserStore } from "@/store/modules/user";
import { CaretBottom } from "@element-plus/icons-vue";
import { getGradeList } from "@/api/school";
const userStore = useUserStore();
watch(
  () => userStore.schoolId,
  (newValue, oldValue) => {
    //console.log(newValue, oldValue);
    getGradeData(newValue);
  }
);
/**
 * 班级数据
 */
const gradeData = ref<GradeList[]>();
// 班级编号
let gradeId = ref(0);
async function getGradeData(schoolId: number) {
  getGradeList(schoolId)
    .then(({ data }) => {
      gradeData.value = data;
      if (gradeId.value == 0) {
        gradeId.value = data[0].id;
      }
    })
    .catch((error) => {
      console.log(error);
    });
}
onMounted(() => {
  getGradeData(userStore.schoolId);
});
// 折叠面板active
const activeItem = ref();
const tableData = ref<any>([
  {
    number: 1,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 2,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 3,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 1,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 2,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 3,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 1,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 2,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 3,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 1,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 2,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 3,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 1,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 2,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
  {
    number: 3,
    name: "TomTomTom",
    phone: 1566666666,
    times: 12,
  },
]);
</script>

<template>
  <div class="class-container">
    <!-- 班级选择 -->
    <div class="class-select">
      <el-select
        v-model="gradeId"
        placeholder="全部班级"
        size="large"
        :suffix-icon="CaretBottom"
      >
        <el-option
          v-for="item in gradeData"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
    <!-- 班级折叠面板-->
    <div class="list-collapse">
      <el-collapse v-model="activeItem">
        <el-collapse-item name="1">
          <template #title>
            <div class="title">
              <span class="blue mr-10">向日葵小班</span>
              <span class="mr-10">教师：松阪老师</span>
              <span>班级号：C 2208 887829</span>
              <span class="red ml-10">结课时间：2023-08-11</span>
              <span class="blue fr"
                >学生：12人
                <el-icon
                  :class="
                    activeItem && activeItem.includes('1') ? 'is-active' : ''
                  "
                  ><CaretBottom
                /></el-icon>
              </span>
            </div>
          </template>
          <div>
            <el-table :data="tableData" height="400" style="width: 100%">
              <el-table-column
                prop="number"
                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="times"
                label="训练次数"
                width="180"
                align="center"
              />
              <el-table-column />
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="list-collapse">
      <el-collapse v-model="activeItem">
        <el-collapse-item name="2">
          <template #title>
            <div class="title">
              <span class="blue mr-10">向日葵小班</span>
              <span class="mr-10">教师：松阪老师</span>
              <span>班级号：C 2208 887829</span>
              <span class="red ml-10">结课时间：2023-08-11</span>
              <span class="blue fr"
                >学生：12人
                <el-icon
                  :class="
                    activeItem && activeItem.includes('2') ? 'is-active' : ''
                  "
                  ><CaretBottom
                /></el-icon>
              </span>
            </div>
          </template>
          <div>
            <el-table :data="tableData" height="400" style="width: 100%">
              <el-table-column
                prop="number"
                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="times"
                label="训练次数"
                width="180"
                align="center"
              />
              <el-table-column />
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </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: #ffffff;
  border-radius: 12px;
}
/* el-select 各种边框线隐藏**/
:deep(.el-select) {
  --el-select-input-focus-border-color: none !important;
}
:deep(.el-input__wrapper) {
  box-shadow: 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;
}
.list-collapse {
  background: #ffffff;
  border-radius: 25px;
  padding: 0 32px;
  margin-bottom: 10px;
  .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;
  }
}
:deep(.el-table th.el-table__cell) {
  background: #e9ebee;
}
</style>