|
@@ -1,72 +1,113 @@
|
|
|
<script setup lang="ts">
|
|
|
-defineOptions({
|
|
|
- name: "StudentIndex",
|
|
|
- inheritAttrs: false,
|
|
|
-});
|
|
|
+import {GradeList} from "@/api/grade/types";
|
|
|
import { watch } from "vue";
|
|
|
import { useUserStore } from "@/store/modules/user";
|
|
|
-import { GradeList } from "@/api/school/types";
|
|
|
+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 studentCount = ref(0);
|
|
|
+const studentData = ref<StudentItem[]>();
|
|
|
+let keywords = ref("");
|
|
|
+async function getStudentData() {
|
|
|
+ const studentSearch:StudentParams = {
|
|
|
+ school_id: userStore.schoolId,
|
|
|
+ grade_id: gradeId.value,
|
|
|
+ search: keywords.value,
|
|
|
+ page_no: 0,
|
|
|
+ page_size: 12
|
|
|
+ }
|
|
|
+ getStudentLists(studentSearch)
|
|
|
+ .then(({ data }) => {
|
|
|
+ const {count, lists} = data;
|
|
|
+ studentCount.value = count;
|
|
|
+ studentData.value = lists;
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ // 获取班级
|
|
|
+ getGradeData(userStore.schoolId);
|
|
|
+ // 获取学生数据
|
|
|
+ getStudentData();
|
|
|
+});
|
|
|
watch(
|
|
|
- () => userStore.schoolId,
|
|
|
- (newValue, oldValue) => {
|
|
|
- console.log(newValue, oldValue);
|
|
|
- }
|
|
|
+ () => userStore.schoolId,
|
|
|
+ (newValue) => {
|
|
|
+ // 学校切换后重新加载数据
|
|
|
+ gradeId.value = 0;
|
|
|
+ getGradeData(newValue);
|
|
|
+ }
|
|
|
);
|
|
|
-let studentInfo = ref("");
|
|
|
-// 班级编号
|
|
|
-let classNumber = ref(0);
|
|
|
-const gradeData = ref<GradeList[]>([
|
|
|
- {
|
|
|
- id: 0,
|
|
|
- name: "全部班级",
|
|
|
- },
|
|
|
-]);
|
|
|
-const tableData = ref<any>([
|
|
|
- {
|
|
|
- number: 1,
|
|
|
- name: "学生A",
|
|
|
- cls: "向日葵小班",
|
|
|
- phone: "15814111616",
|
|
|
- date: "2023-08-22",
|
|
|
- times: 22,
|
|
|
- },
|
|
|
-]);
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="student-container">
|
|
|
<!-- 学生查找 -->
|
|
|
<div class="student-search">
|
|
|
- <el-select v-model="classNumber" placeholder="全部班级" size="large">
|
|
|
- <el-option
|
|
|
- v-for="item in gradeData"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <el-select v-model="gradeId" 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="studentInfo"
|
|
|
+ v-model="keywords"
|
|
|
size="large"
|
|
|
placeholder="请输入学生名称或手机号码"
|
|
|
/>
|
|
|
- <el-button size="large" type="primary">查找</el-button>
|
|
|
- <span>共<b>40</b>人</span>
|
|
|
+ <el-button size="large" type="primary" @click="getStudentData()">查找</el-button>
|
|
|
+ <span>共<b>{{ studentCount }}</b>人</span>
|
|
|
</div>
|
|
|
<!-- 学生数据 -->
|
|
|
<div class="list-table">
|
|
|
- <el-table :data="tableData" style="width: 100%">
|
|
|
- <el-table-column prop="number" label="序号" align="center" />
|
|
|
+ <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="cls" label="所在班级" align="center" />
|
|
|
+ <el-table-column prop="grade_name" label="所在班级" align="center" />
|
|
|
<el-table-column prop="phone" label="手机号码" align="center" />
|
|
|
- <el-table-column prop="date" label="注册时间" align="center" />
|
|
|
- <el-table-column prop="times" 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">
|
|
|
<router-link to="/student/result" class="table-btn">训练效果分析</router-link>
|
|
|
</el-table-column>
|
|
|
+ <!-- 无数据插槽 -->
|
|
|
+ <template #empty>
|
|
|
+ <div class="empty">
|
|
|
+ <img src="../../assets/empty.png" alt="数据为空">
|
|
|
+ <p>未查询到学生数据,请更换查询条件重新查找!</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -140,4 +181,7 @@ const tableData = ref<any>([
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.empty{
|
|
|
+ padding:100px 0;
|
|
|
+}
|
|
|
</style>
|