451 lines
12 KiB
Vue
451 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="student-archive-page">
|
|||
|
|
<!-- 顶部区域：可选年级班级学生 + 按学生姓名搜索（与 jzda 一致） -->
|
|||
|
|
<view class="top-section">
|
|||
|
|
<view class="selector-picker" @click="openStudentPicker">
|
|||
|
|
<text :class="{ placeholder: !pickerDisplayText }">{{ pickerDisplayText || '可选年级、班级或学生筛选' }}</text>
|
|||
|
|
<view class="selector-actions">
|
|||
|
|
<view v-if="queryScope" class="clear-btn" @click.stop="clearQueryScope">×</view>
|
|||
|
|
<uni-icons type="right" size="16" color="#666"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="search-section">
|
|||
|
|
<view class="search-box">
|
|||
|
|
<BasicSearch
|
|||
|
|
placeholder="按学生姓名搜索"
|
|||
|
|
v-model="searchKeyword"
|
|||
|
|
@search="onSearch"
|
|||
|
|
/>
|
|||
|
|
<u-button text="搜索" type="primary" size="small" class="search-btn" @click="onSearch" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 学生档案统计 -->
|
|||
|
|
<view class="section" v-if="queryScope || searchKeyword.trim()">
|
|||
|
|
<view class="section-title">学生档案统计</view>
|
|||
|
|
<view class="stats-container">
|
|||
|
|
<view
|
|||
|
|
class="stat-item"
|
|||
|
|
:class="{ active: selectedStatType === 'all' }"
|
|||
|
|
@click="onStatItemClick('all')"
|
|||
|
|
>
|
|||
|
|
<text class="stat-number">{{ studentList.length }}</text>
|
|||
|
|
<text class="stat-label">总人数</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="stat-item"
|
|||
|
|
:class="{ active: selectedStatType === 'followed' }"
|
|||
|
|
@click="onStatItemClick('followed')"
|
|||
|
|
>
|
|||
|
|
<text class="stat-number followed">{{ followedCount }}</text>
|
|||
|
|
<text class="stat-label">已关注</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="stat-item"
|
|||
|
|
:class="{ active: selectedStatType === 'unfollowed' }"
|
|||
|
|
@click="onStatItemClick('unfollowed')"
|
|||
|
|
>
|
|||
|
|
<text class="stat-number unfollowed">{{ unfollowedCount }}</text>
|
|||
|
|
<text class="stat-label">未关注</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 学生档案列表 -->
|
|||
|
|
<view class="section" v-if="queryScope || searchKeyword.trim()">
|
|||
|
|
<view class="section-title">{{ getListTitle() }} ({{ filteredStudentList.length }}人)</view>
|
|||
|
|
<view v-if="loading" class="loading-text">加载中...</view>
|
|||
|
|
<view v-else-if="!filteredStudentList.length" class="empty-text">暂无学生档案数据</view>
|
|||
|
|
<view v-else class="student-list">
|
|||
|
|
<view class="student-grid">
|
|||
|
|
<view
|
|||
|
|
v-for="student in filteredStudentList"
|
|||
|
|
:key="student.xsId"
|
|||
|
|
class="student-item bg-white r-md p-12"
|
|||
|
|
@click="viewStudentDetail(student)"
|
|||
|
|
>
|
|||
|
|
<view class="flex-row items-center">
|
|||
|
|
<view class="avatar-container mr-8">
|
|||
|
|
<image
|
|||
|
|
class="student-avatar"
|
|||
|
|
:src="imagUrl(student.xstx || '') || '/static/images/default-avatar.png'"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-1 overflow-hidden">
|
|||
|
|
<view class="student-name mb-8">
|
|||
|
|
<text class="font-14 cor-333">{{ student.xsxm }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-row">
|
|||
|
|
<view
|
|||
|
|
class="status-tag"
|
|||
|
|
:class="getFollowStatusClass(student.jzxm)"
|
|||
|
|
>
|
|||
|
|
{{ student.jzxm ? '已关注' : '未关注' }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="arrow-icon-container" @click.stop="viewStudentDetail(student)">
|
|||
|
|
<image class="arrow-icon" src="/static/base/view/more.png" mode="aspectFit" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空状态：未选择未搜索 -->
|
|||
|
|
<view class="empty-state" v-if="!queryScope && !searchKeyword.trim()">
|
|||
|
|
<view class="empty-icon">📚</view>
|
|||
|
|
<view class="empty-text">请输入学生姓名搜索或选择年级、班级、学生</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed } from 'vue'
|
|||
|
|
import BasicSearch from '@/components/BasicSearch/Search.vue'
|
|||
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|||
|
|
import { findStudentArchiveApi } from '@/api/analysis/xs'
|
|||
|
|
import { imagUrl } from '@/utils'
|
|||
|
|
import { useDataStore } from '@/store/modules/data'
|
|||
|
|
|
|||
|
|
interface QueryScope {
|
|||
|
|
njIds?: string
|
|||
|
|
bjIds?: string
|
|||
|
|
xsIds?: string
|
|||
|
|
displayText: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface StudentInfo {
|
|||
|
|
xsId: string
|
|||
|
|
xsxm: string
|
|||
|
|
xstx?: string
|
|||
|
|
njId: string
|
|||
|
|
njmcId: string
|
|||
|
|
njmc: string
|
|||
|
|
bc: string
|
|||
|
|
bjId: string
|
|||
|
|
bjmc: string
|
|||
|
|
jzIds?: string
|
|||
|
|
jzxm?: string
|
|||
|
|
xb?: string
|
|||
|
|
sfzh?: string
|
|||
|
|
cstime?: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const queryScope = ref<QueryScope | null>(null)
|
|||
|
|
const pickerDisplayText = computed(() => queryScope.value?.displayText || '')
|
|||
|
|
const studentList = ref<StudentInfo[]>([])
|
|||
|
|
const searchKeyword = ref('')
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const selectedStatType = ref<string>('all')
|
|||
|
|
|
|||
|
|
const { setXs } = useDataStore()
|
|||
|
|
|
|||
|
|
const followedCount = computed(() => studentList.value.filter((s) => s.jzxm).length)
|
|||
|
|
const unfollowedCount = computed(() => studentList.value.filter((s) => !s.jzxm).length)
|
|||
|
|
|
|||
|
|
const filteredStudentList = computed(() => {
|
|||
|
|
let list = studentList.value
|
|||
|
|
if (selectedStatType.value === 'followed') list = list.filter((s) => s.jzxm)
|
|||
|
|
else if (selectedStatType.value === 'unfollowed') list = list.filter((s) => !s.jzxm)
|
|||
|
|
return list
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 打开学生选择器：统一传递 njIds、bjIds、xsIds 供后端多条件查询
|
|||
|
|
const openStudentPicker = () => {
|
|||
|
|
uni.$once('studentPickerConfirm', (students: any[]) => {
|
|||
|
|
if (students && students.length > 0) {
|
|||
|
|
const njIdSet = [...new Set(students.map((s: any) => s.njId).filter(Boolean))]
|
|||
|
|
const bjIdSet = [...new Set(students.map((s: any) => s.bjId).filter(Boolean))]
|
|||
|
|
const xsIdList = students.map((s: any) => s.xsId || s.id).filter(Boolean)
|
|||
|
|
let displayText: string
|
|||
|
|
if (bjIdSet.length === 1 && njIdSet.length === 1) {
|
|||
|
|
displayText = students[0]?.bc || [students[0]?.njmc, students[0]?.bjmc].filter(Boolean).join('') || '已选班级'
|
|||
|
|
} else if (njIdSet.length === 1) {
|
|||
|
|
displayText = bjIdSet.length > 1 ? `已选 ${bjIdSet.length} 个班级` : (students[0]?.njmc || '已选年级')
|
|||
|
|
} else if (students.length <= 5) {
|
|||
|
|
displayText = students.map((s: any) => s.xsxm || s.xm).join('、')
|
|||
|
|
} else {
|
|||
|
|
displayText = `已选 ${students.length} 人`
|
|||
|
|
}
|
|||
|
|
queryScope.value = {
|
|||
|
|
njIds: njIdSet.length > 0 ? njIdSet.join(',') : undefined,
|
|||
|
|
bjIds: bjIdSet.length > 0 ? bjIdSet.join(',') : undefined,
|
|||
|
|
xsIds: xsIdList.length > 0 ? xsIdList.join(',') : undefined,
|
|||
|
|
displayText
|
|||
|
|
}
|
|||
|
|
searchKeyword.value = ''
|
|||
|
|
loadStudents()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/components/StudentPicker/index?showGrade=true&showClass=true&showStudent=true&multiple=true'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const clearQueryScope = () => {
|
|||
|
|
queryScope.value = null
|
|||
|
|
studentList.value = []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const onSearch = () => {
|
|||
|
|
loadStudents()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const loadStudents = async () => {
|
|||
|
|
const scope = queryScope.value
|
|||
|
|
const njIds = scope?.njIds
|
|||
|
|
const bjIds = scope?.bjIds
|
|||
|
|
const xsIds = scope?.xsIds
|
|||
|
|
const xsxm = searchKeyword.value?.trim() || undefined
|
|||
|
|
if (!njIds && !bjIds && !xsIds && !xsxm) {
|
|||
|
|
studentList.value = []
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
const res: any = await findStudentArchiveApi({ njIds, bjIds, xsIds, xsxm })
|
|||
|
|
const list = res?.result || res?.data || []
|
|||
|
|
studentList.value = Array.isArray(list) ? list : []
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('查询学生档案失败:', error)
|
|||
|
|
uni.showToast({ title: '查询失败', icon: 'none' })
|
|||
|
|
studentList.value = []
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const onStatItemClick = (statType: string) => {
|
|||
|
|
selectedStatType.value = statType
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getListTitle = () => {
|
|||
|
|
switch (selectedStatType.value) {
|
|||
|
|
case 'followed': return '已关注学生'
|
|||
|
|
case 'unfollowed': return '未关注学生'
|
|||
|
|
default: return '学生档案列表'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getFollowStatusClass = (jzxm?: string) => (jzxm ? 'status-followed' : 'status-unfollowed')
|
|||
|
|
|
|||
|
|
const viewStudentDetail = (student: StudentInfo) => {
|
|||
|
|
setXs({
|
|||
|
|
xsId: student.xsId,
|
|||
|
|
id: student.xsId,
|
|||
|
|
xsxm: student.xsxm,
|
|||
|
|
xm: student.xsxm,
|
|||
|
|
xstx: student.xstx,
|
|||
|
|
avatar: student.xstx,
|
|||
|
|
njId: student.njId,
|
|||
|
|
njmc: student.njmc,
|
|||
|
|
njmcName: student.njmc,
|
|||
|
|
bjId: student.bjId,
|
|||
|
|
bjmc: student.bjmc,
|
|||
|
|
jzIds: student.jzIds,
|
|||
|
|
jzxm: student.jzxm,
|
|||
|
|
xb: student.xb,
|
|||
|
|
sfzh: student.sfzh,
|
|||
|
|
cstime: student.cstime
|
|||
|
|
})
|
|||
|
|
uni.navigateTo({ url: '/pages/view/homeSchool/parentAddressBook/detail' })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onLoad(() => {})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.student-archive-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-section {
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-section {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-section .search-box {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
& > *:first-child { flex: 1; min-width: 0; }
|
|||
|
|
.search-btn { flex-shrink: 0; width: 140rpx !important; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selector-picker {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 24rpx 20rpx;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
&.placeholder { color: #999; }
|
|||
|
|
.selector-actions {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
}
|
|||
|
|
.clear-btn {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #999;
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #eee;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
gap: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
min-width: 120rpx;
|
|||
|
|
padding: 20rpx 10rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
&.active {
|
|||
|
|
background-color: #e6f7ff;
|
|||
|
|
border: 2rpx solid #007aff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-number {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
&.followed { color: #52c41a; }
|
|||
|
|
&.unfollowed { color: #ff4d4f; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.student-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.student-item {
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-container {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.student-avatar {
|
|||
|
|
width: 72rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-tag {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
padding: 6rpx 16rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-followed {
|
|||
|
|
background-color: #e6f7ff;
|
|||
|
|
color: #52c41a;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-unfollowed {
|
|||
|
|
background-color: #fff2f0;
|
|||
|
|
color: #ff4d4f;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-row { display: flex; flex-direction: row; }
|
|||
|
|
.flex-1 { flex: 1; }
|
|||
|
|
.items-center { align-items: center; }
|
|||
|
|
.overflow-hidden { overflow: hidden; }
|
|||
|
|
.mr-8 { margin-right: 12rpx; }
|
|||
|
|
.mb-8 { margin-bottom: 16rpx; }
|
|||
|
|
.font-14 { font-size: 28rpx; }
|
|||
|
|
.cor-333 { color: #333; }
|
|||
|
|
.bg-white { background-color: #fff; }
|
|||
|
|
.r-md { border-radius: 16rpx; }
|
|||
|
|
.p-12 { padding: 24rpx; }
|
|||
|
|
|
|||
|
|
.arrow-icon-container {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.arrow-icon {
|
|||
|
|
width: 35rpx;
|
|||
|
|
height: 35rpx;
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-text, .empty-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 100rpx 40rpx;
|
|||
|
|
.empty-icon { font-size: 120rpx; margin-bottom: 20rpx; }
|
|||
|
|
.empty-text { font-size: 32rpx; color: #666; }
|
|||
|
|
}
|
|||
|
|
</style>
|