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

<script setup lang="ts">
import {useUserStore} from "@/store/modules/user";
import {GradeList} from "@/api/grade/types";
import {TrainingItem, TrainingParams} from "@/api/training/types";
import {getGradeSelect} from "@/api/grade";
import {getTrainingLists} from "@/api/training";
import {trimInput} from "@/utils";

const userStore = useUserStore();
defineOptions({
  name: "TrainingIndex",
  inheritAttrs: false,
});

const pageParams: TrainingParams = reactive({
  school_id: userStore.schoolId,
  is_formal: 1, // 1正式，2非正式
  grade_id: 0,
  page: 1,
  page_size: 10,
  // 学生名称/手机号
  search: "",
});
const isFormal = ref(1);
/**
 * 班级数据
 */
const gradeData = ref<GradeList[]>();
async function getGradeData(schoolId: number) {
  getGradeSelect(schoolId)
    .then(({data}) => {
      gradeData.value = data;
      gradeData.value?.unshift({id: 0, name: "全部班级"});
    })
    .catch((error) => {
      gradeData.value = [];
      gradeData.value?.unshift({id: 0, name: "全部班级"});
      console.log(error.message);
    });
}
const dataMessage = ref("加载中...");
const trainingData = ref<TrainingItem[]>();
const trainingCount = ref(0);
async function getTrainingData(schoolId: number) {
  pageParams.school_id = schoolId;
  isFormal.value = pageParams.is_formal;
  getTrainingLists(pageParams)
    .then(({data}) => {
      const {count, lists} = data;
      trainingData.value = lists;
      trainingCount.value = count;
      if (!(count && count > 0 && lists.length > 0)) {
        dataMessage.value = "没有符合搜索条件的记录！";
        if (pageParams.is_formal == 2 && pageParams.search == "") {
          dataMessage.value = "还没有任何体验用户训练记录！";
        }
        if (pageParams.is_formal == 1 && pageParams.grade_id == 0 && pageParams.search == "") {
          dataMessage.value = "还没有任何学生训练记录！";
        }
      }
    })
    .catch((error) => {
      dataMessage.value = error.message;
      console.log(error.message);
    });
}
function getTrainingSearch() {
  getTrainingData(userStore.schoolId);
}
function alertError() {
  ElMessage.error("本次训练采集的数据不足，无法分析并生成有效报告！");
}
onMounted(() => {
  getGradeData(userStore.schoolId);
  getTrainingData(userStore.schoolId);
});
// watch(
//   () => userStore.schoolId,
//   (newValue) => {
//     // 学校切换后重新获取
//     getGradeData(newValue);
//     getTrainingData(newValue);
//   }
// );
</script>

<template>
  <div class="training-container">
    <!-- 学生查找 -->
    <div class="training-search">
      <el-select v-model="pageParams.is_formal" placeholder="正式学生/体验用户" size="large">
        <el-option key="1" :value="Number(1)" label="正式学生"></el-option>
        <el-option key="2" :value="Number(2)" label="体验用户"></el-option>
      </el-select>
      <el-select v-if="pageParams.is_formal == 1" v-model="pageParams.grade_id" placeholder="请选择班级" size="large">
        <el-option v-for="item in gradeData" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-input
        v-model="pageParams.search"
        placeholder="请输入学生名称或手机号码"
        size="large"
        @input="(value:string) => (pageParams.search = trimInput(value))" />
      <el-button size="large" type="primary" @click="getTrainingSearch()">查找</el-button>
    </div>
    <!-- 学生数据 -->
    <div class="list-table">
      <el-table :data="trainingData" style="width: 100%">
        <el-table-column align="center" label="序号" max-width="120" type="index" />
        <el-table-column prop="name" label="学生名称" align="center" />
        <el-table-column v-if="isFormal == 1" prop="phone" label="手机号码" align="center" />
        <el-table-column prop="device_name" label="训练方式" align="center" />
        <el-table-column prop="create_time" label="训练时间" align="center" />
        <el-table-column prop="play_time" label="训练时长" align="center" />
        <el-table-column v-if="isFormal == 1" prop="grade_name" label="所在班级" align="center" />
        <el-table-column label="操作" align="center" min-width="120">
          <template #default="scope">
            <template v-if="scope.row.report_status == 1">
              <router-link
                :to="
                  '/training/result?id=' +
                  scope.row.game_record_id +
                  '&type=' +
                  scope.row.device_id +
                  '&formal=' +
                  isFormal
                "
                class="table-btn"
                >报告详情</router-link
              >
            </template>
            <button v-else class="table-btn disabled" @click="alertError()">报告详情</button>
          </template>
        </el-table-column>
        <!-- 无数据插槽 -->
        <template #empty>
          <div class="empty">
            <img src="../../assets/empty.png" alt="数据为空" />
            <p>{{ dataMessage }}</p>
          </div>
        </template>
      </el-table>
    </div>
    <pagination
      v-if="trainingCount > 0"
      v-model:total="trainingCount"
      v-model:page="pageParams.page"
      v-model:limit="pageParams.page_size"
      @pagination="getTrainingSearch()" />
  </div>
</template>

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

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

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

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

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

  .el-button {
    padding: 0 26px;
    margin: 0 20px;
    font-size: 16px;
    background: #4284f2;
    border-radius: 10px;
  }
}

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

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

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

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

.list-table {
  overflow: hidden;
  background: #fff;
  border-radius: 25px;

  .table-btn {
    display: inline-block;
    height: 38px;
    padding: 0 15px;
    line-height: 38px;
    color: #fff;
    background: #4284f2;
    border-radius: 10px;

    &.disabled {
      background: #bfbfbf;
    }
  }
}

.empty {
  padding: 200px 0;
}
</style>