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

<script setup lang="ts">
import {GradeList} from "@/api/grade/types";
import { watch } from "vue";
import { useUserStore } from "@/store/modules/user";
import {getGradeSelect} from "@/api/grade";
import {getStudentLists} from "@/api/student";
import {StudentItem, StudentList, StudentParams} from "@/api/student/types";
const userStore = useUserStore();
defineOptions({
	name: "StudentIndex",
	inheritAttrs: false,
});
/**
 * 班级数据
 */
const gradeData = ref<GradeList[]>();
// 班级编号
let gradeId = ref(0);
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);
		});
}
/**
 * 学生数据
 */
const studentSearch:StudentParams = reactive({
	school_id: userStore.schoolId,
	grade_id: 0,
	search: "",
	page_no: 1,
	page_size: 12,
});
// 0加载中，1数据正常，2数据为空
const dataStatus = ref(0);
const studentCount = ref(0);
const studentData = ref<StudentItem[]>();
async function getStudentData(schoolId) {
	studentSearch.school_id = schoolId;
	getStudentLists(studentSearch)
		.then(({ data }) => {
			const {count, lists} = data;
			studentCount.value = count;
			studentData.value = lists;
			dataStatus.value = 1;
		})
		.catch((error) => {
			dataStatus.value = 2;
			console.log(error);
		});
}
function getStudentSearch(){
	getStudentData(userStore.schoolId);
}
onMounted(() => {
	// 获取班级
	getGradeData(userStore.schoolId);
	// 获取学生数据
	getStudentData(userStore.schoolId);
});
watch(
	() => userStore.schoolId,
	(newValue) => {
		// 学校切换后重新加载数据
		studentSearch.grade_id = 0;
		studentSearch.search = "";
		getGradeData(newValue);
		getStudentData(userStore.schoolId);
	}
);
</script>

<template>
  <div class="student-container">
    <!-- 学生查找 -->
    <div class="student-search">
			<el-select v-model="studentSearch.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="studentSearch.search"
        size="large"
        placeholder="请输入学生名称或手机号码"
      />
      <el-button size="large" type="primary" @click="getStudentSearch()">查找</el-button>
      <span>共<b>{{ studentCount }}</b>人</span>
    </div>
    <!-- 学生数据 -->
    <div class="list-table">
      <el-table :data="studentData" style="width:100%">
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column prop="name" label="学生名称" align="center" />
        <el-table-column prop="grade_name" label="所在班级" align="center" />
        <el-table-column prop="phone" label="手机号码" align="center" />
        <el-table-column prop="create_time" label="注册时间" align="center" />
        <el-table-column prop="count" label="训练次数" align="center" />
        <el-table-column />
        <el-table-column label="操作" align="center" >
					<template #default="scope">
						<router-link v-if="scope.row.count>16" :to="'/student/result?id='+scope.row.id" class="table-btn">训练效果分析</router-link>
						<button v-else class="table-btn disabled" @click="ElMessage.error('该学生训练数据还不足以进行训练效果分析，请至少完成16次专注力训练后再来查看。')">训练效果分析</button>
					</template>
        </el-table-column>
				<!-- 无数据插槽 -->
				<template #empty>
					<div class="empty">
						<img src="../../assets/empty.png" alt="数据为空">
						<p v-if="dataStatus == 0">加载中...</p>
						<p v-if="dataStatus == 2">暂时还没有任何学生绑定学校！</p>
					</div>
				</template>
      </el-table>
			<pagination
					v-if="studentCount > 0"
					v-model:total="studentCount"
					v-model:page="studentSearch.page_no"
					v-model:limit="studentSearch.page_size"
					@pagination="getStudentSearch()"
			/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.student-container {
  position: relative;
  padding: 20px 30px;
}
.student-search {
  margin-bottom: 20px;
  font-size: 16px;
  .el-select {
    width: 180px;
    margin: 0 20px 0 0;
  }
  .el-input {
    width: 250px;
    margin: 0;
  }
  :deep(.el-input__inner) {
    font-size: 16px;
  }
  .el-button {
    font-size: 16px;
    padding: 0 26px;
    margin: 0 20px;
    border-radius: 10px;
		background: #4284f2;
  }
  b {
    font-size: 20px;
  }
}
:deep(.el-input__wrapper) {
  background: #ffffff;
  border-radius: 12px;
}
:deep(.el-input__wrapper) {
  box-shadow: none !important;
}
/* 自定义 el-select 样式 */
/* 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;
}
:deep(.el-table th.el-table__cell) {
  background: #e9ebee;
}
.list-table {
  background: #ffffff;
  border-radius: 25px;
  overflow: hidden;
  .table-btn {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 15px;
    background: #4284f2;
    border-radius: 6px;
    color: #ffffff;
    &.disabled {
      background: #bfbfbf;
      cursor: not-allowed;
    }
  }
}
.empty{
	padding:100px 0;
}
</style>