247 lines
7.8 KiB
Vue
247 lines
7.8 KiB
Vue
<script setup lang="ts">
|
|
import type { StudentInfo } from '@/service/types'
|
|
import { useQuery } from '@tanstack/vue-query'
|
|
import { whenever } from '@vueuse/core'
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import StudentListItem from '@/components/student/StudentListItem.vue'
|
|
import { teacherAnalysisAttentionStudentUsingPost, teacherAnalysisExportStudentListUsingPost, teacherAnalysisStudentListUsingPost } from '@/service/laoshichengjifenxi'
|
|
import { useHomeStore } from '@/store/home'
|
|
|
|
// 1. 引入 Store
|
|
const homeStore = useHomeStore()
|
|
const searchQuery = ref('')
|
|
|
|
// 2. 逻辑计算与 Query (保持原逻辑不变)
|
|
const canLoadStudents = computed(() => {
|
|
return homeStore.selectedClassKey && homeStore.selectedExamId && homeStore.selectedExamSubjectId
|
|
})
|
|
|
|
const {
|
|
data: studentsData,
|
|
isLoading: loading,
|
|
error,
|
|
refetch,
|
|
} = useQuery({
|
|
queryKey: computed(() => [
|
|
'students',
|
|
homeStore.selectedClassKey,
|
|
homeStore.selectedExamId,
|
|
homeStore.selectedExamSubjectId,
|
|
homeStore.selectedGradeKey,
|
|
searchQuery.value,
|
|
]),
|
|
queryFn: async () => {
|
|
const response = await teacherAnalysisStudentListUsingPost({
|
|
body: {
|
|
class_id: homeStore.selectedClassKey!,
|
|
exam_subject_id: homeStore.selectedExamSubjectId!,
|
|
grade_id: homeStore.selectedGradeKey!,
|
|
keyword: searchQuery.value || undefined,
|
|
},
|
|
})
|
|
return response || { attentioned_students: [], other_students: [] }
|
|
},
|
|
enabled: computed(() => !!canLoadStudents.value),
|
|
staleTime: 30000,
|
|
gcTime: 300000,
|
|
})
|
|
|
|
const attentionedStudents = computed(() => studentsData.value?.attentioned_students || [])
|
|
const otherStudents = computed(() => studentsData.value?.other_students || [])
|
|
|
|
// 3. 交互方法
|
|
function goToStudentDetail(student: StudentInfo) {
|
|
uni.navigateTo({
|
|
url: `/pages/student/detail?info_id=${student.info_id}&student_number=${student.student_number}&student_name=${student.student_name}`,
|
|
})
|
|
}
|
|
|
|
async function toggleAttention(student: StudentInfo, isAttentioned: boolean) {
|
|
if (!student.student_number) {
|
|
return uni.showToast({ title: '缺少学号', icon: 'none' })
|
|
}
|
|
uni.showLoading({ title: '处理中', mask: true })
|
|
try {
|
|
await teacherAnalysisAttentionStudentUsingPost({
|
|
body: { student_number: student.student_number, is_attention: !isAttentioned },
|
|
})
|
|
uni.showToast({ title: '操作成功', icon: 'success' })
|
|
refetch()
|
|
}
|
|
catch (error) {
|
|
uni.showToast({ title: '操作失败', icon: 'none' })
|
|
}
|
|
finally {
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
|
|
async function handleDownload() {
|
|
try {
|
|
uni.showLoading({ title: '准备中' })
|
|
const response = await teacherAnalysisExportStudentListUsingPost({
|
|
body: {
|
|
class_id: homeStore.selectedClassKey!,
|
|
exam_subject_id: homeStore.selectedExamSubjectId!,
|
|
grade_id: homeStore.selectedGradeKey!,
|
|
},
|
|
})
|
|
|
|
if (response) {
|
|
const downloadUrl = `${import.meta.env.VITE_API_BASE_URL || ''}${response}`
|
|
// #ifdef H5
|
|
window.open(downloadUrl, '_blank')
|
|
// #endif
|
|
// #ifndef H5
|
|
uni.downloadFile({
|
|
url: downloadUrl,
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
uni.openDocument({ filePath: res.tempFilePath })
|
|
}
|
|
},
|
|
fail: () => uni.showToast({ title: '下载失败', icon: 'none' }),
|
|
})
|
|
// #endif
|
|
}
|
|
else {
|
|
uni.showToast({ title: '链接获取失败', icon: 'none' })
|
|
}
|
|
}
|
|
catch (e) {
|
|
uni.showToast({ title: '请求失败', icon: 'none' })
|
|
}
|
|
finally {
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
|
|
const handleShare = () => uni.showToast({ title: '开发中', icon: 'none' })
|
|
|
|
whenever(() => error.value, () => {
|
|
uni.showToast({ title: '数据加载失败', icon: 'none' })
|
|
})
|
|
|
|
onMounted(async () => {
|
|
if (homeStore.examOptions.length === 0) {
|
|
await homeStore.fetchOptions()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="min-h-screen bg-slate-50 pb-10">
|
|
<wd-navbar
|
|
|
|
placeholder safe-area-inset-top fixed
|
|
title="学生名单"
|
|
custom-class="bg-white"
|
|
>
|
|
<template #right>
|
|
<view class="h-full flex items-center">
|
|
<view class="p-2 active:opacity-70" @click="handleDownload">
|
|
<wd-icon name="download" size="22px" color="#333" />
|
|
</view>
|
|
<view class="p-2 active:opacity-70" @click="handleShare">
|
|
<wd-icon name="share" size="22px" color="#333" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</wd-navbar>
|
|
|
|
<view class="relative z-10 bg-white shadow-sm">
|
|
<wd-drop-menu custom-class="border-b border-gray-100">
|
|
<wd-drop-menu-item v-model="homeStore.selectedClassId" :options="homeStore.classOptions" />
|
|
<wd-drop-menu-item v-model="homeStore.selectedExamId" :options="homeStore.examOptions" />
|
|
<wd-drop-menu-item v-model="homeStore.selectedExamSubjectId" :options="homeStore.subjectOptions" />
|
|
</wd-drop-menu>
|
|
|
|
<view class="px-3 py-2">
|
|
<wd-search
|
|
v-model="searchQuery"
|
|
placeholder="搜索学生姓名"
|
|
hide-cancel
|
|
custom-class="bg-gray-100 rounded-full"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="p-3">
|
|
<view v-if="loading" class="flex flex-col items-center justify-center py-20">
|
|
<wd-loading size="30px" color="#3b82f6" />
|
|
<text class="mt-3 text-sm text-gray-400">数据加载中...</text>
|
|
</view>
|
|
|
|
<block v-else>
|
|
<view v-if="attentionedStudents.length > 0 || otherStudents.length > 0">
|
|
<view v-if="attentionedStudents.length > 0" class="mb-4 overflow-hidden rounded-xl bg-white shadow-sm">
|
|
<view class="flex items-center border-b border-orange-100 bg-orange-50 px-4 py-3">
|
|
<wd-icon name="star-filled" color="#f97316" size="18px" />
|
|
<text class="ml-2 text-sm text-orange-800 font-bold">重点关注</text>
|
|
<text class="ml-auto text-xs text-orange-400">{{ attentionedStudents.length }}人</text>
|
|
</view>
|
|
|
|
<view class="px-2">
|
|
<StudentListItem
|
|
v-for="(student, index) in attentionedStudents"
|
|
:key="student.info_id"
|
|
:student="student"
|
|
:index="index + 1"
|
|
:is-attentioned="true"
|
|
@click="goToStudentDetail"
|
|
@toggle-attention="toggleAttention(student, true)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="otherStudents.length > 0" class="overflow-hidden rounded-xl bg-white shadow-sm">
|
|
<view class="flex items-center border-b border-gray-100 px-4 py-3">
|
|
<view class="mr-2 h-4 w-1 rounded-full bg-blue-500" />
|
|
<text class="text-sm text-gray-800 font-bold">全部学生</text>
|
|
<text class="ml-auto text-xs text-gray-400">{{ otherStudents.length }}人</text>
|
|
</view>
|
|
|
|
<view class="px-2">
|
|
<StudentListItem
|
|
v-for="(student, index) in otherStudents"
|
|
:key="student.info_id"
|
|
:student="student"
|
|
:index="attentionedStudents.length + index + 1"
|
|
:is-attentioned="false"
|
|
@click="goToStudentDetail"
|
|
@toggle-attention="toggleAttention(student, false)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="pt-10">
|
|
<wd-status-tip
|
|
:image="!canLoadStudents ? 'search' : 'content'"
|
|
:tip="!canLoadStudents ? '请完善上方筛选条件' : '暂无相关学生数据'"
|
|
/>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<route lang="jsonc" type="home">
|
|
{
|
|
"layout": "tabbar",
|
|
"style": {
|
|
"navigationStyle": "custom",
|
|
"navigationBarTitleText": "学生名单"
|
|
}
|
|
}
|
|
</route>
|
|
|
|
<style>
|
|
/* Uniapp 小程序兼容性补充：
|
|
page 标签在小程序中对应整个页面容器
|
|
*/
|
|
page {
|
|
background-color: #f8fafc; /* slate-50 */
|
|
}
|
|
</style>
|