修复分页
This commit is contained in:
zhonghua
parent
4f717dc8d7
commit
bd0e72d22b
@ -28,13 +28,8 @@
|
||||
<!-- 操作栏 -->
|
||||
<div class="action-bar">
|
||||
<div class="search-box">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索班级名称"
|
||||
style="width: 250px;"
|
||||
@search="handleSearch"
|
||||
allow-clear
|
||||
>
|
||||
<a-input-search v-model:value="searchKeyword" placeholder="搜索班级名称" style="width: 250px;" @search="handleSearch"
|
||||
allow-clear>
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: #B2BEC3;" />
|
||||
</template>
|
||||
@ -48,12 +43,7 @@
|
||||
|
||||
<!-- 班级卡片网格 -->
|
||||
<div class="class-grid" v-if="!loading && classes.length > 0">
|
||||
<div
|
||||
v-for="cls in classes"
|
||||
:key="cls.id"
|
||||
class="class-card"
|
||||
:class="'grade-' + getGradeKey(cls.grade)"
|
||||
>
|
||||
<div v-for="cls in classes" :key="cls.id" class="class-card" :class="'grade-' + getGradeKey(cls.grade)">
|
||||
<div class="card-header">
|
||||
<div class="class-icon">
|
||||
<component :is="getGradeIcon(cls.grade)" class="icon-component" />
|
||||
@ -122,11 +112,7 @@
|
||||
<EditOutlined />
|
||||
编辑
|
||||
</a-button>
|
||||
<a-popconfirm
|
||||
title="确定要删除这个班级吗？"
|
||||
:disabled="cls.studentCount > 0"
|
||||
@confirm="handleDelete(cls.id)"
|
||||
>
|
||||
<a-popconfirm title="确定要删除这个班级吗？" :disabled="cls.studentCount > 0" @confirm="handleDelete(cls.id)">
|
||||
<a-tooltip v-if="cls.studentCount > 0" title="班级内有学生，无法删除">
|
||||
<a-button type="link" size="small" disabled class="disabled-btn">
|
||||
<DeleteOutlined />
|
||||
@ -160,21 +146,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑班级模态框 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="isEdit ? modalEditTitle : modalAddTitle"
|
||||
@ok="handleModalOk"
|
||||
@cancel="handleModalCancel"
|
||||
:confirm-loading="submitting"
|
||||
:width="480"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
>
|
||||
<a-modal v-model:open="modalVisible" :title="isEdit ? modalEditTitle : modalAddTitle" @ok="handleModalOk"
|
||||
@cancel="handleModalCancel" :confirm-loading="submitting" :width="480">
|
||||
<a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-form-item label="班级名称" name="name">
|
||||
<a-input v-model:value="formState.name" placeholder="请输入班级名称">
|
||||
<template #prefix>
|
||||
@ -205,12 +179,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="班主任" name="teacherId">
|
||||
<a-select
|
||||
v-model:value="formState.teacherId"
|
||||
placeholder="请选择班主任"
|
||||
:loading="teachersLoading"
|
||||
allow-clear
|
||||
>
|
||||
<a-select v-model:value="formState.teacherId" placeholder="请选择班主任" :loading="teachersLoading" allow-clear>
|
||||
<a-select-option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id">
|
||||
{{ teacher.name }}
|
||||
</a-select-option>
|
||||
@ -220,12 +189,7 @@
|
||||
</a-modal>
|
||||
|
||||
<!-- 班级学生列表模态框 -->
|
||||
<a-modal
|
||||
v-model:open="studentsModalVisible"
|
||||
:title="studentsModalTitle"
|
||||
:footer="null"
|
||||
width="700px"
|
||||
>
|
||||
<a-modal v-model:open="studentsModalVisible" :title="studentsModalTitle" :footer="null" width="700px">
|
||||
<div class="students-modal-content">
|
||||
<div class="class-info-header">
|
||||
<div class="class-emoji">
|
||||
@ -244,11 +208,7 @@
|
||||
</div>
|
||||
|
||||
<div class="students-list" v-if="!studentsLoading && classStudents.length > 0">
|
||||
<div
|
||||
v-for="student in classStudents"
|
||||
:key="student.id"
|
||||
class="student-item"
|
||||
>
|
||||
<div v-for="student in classStudents" :key="student.id" class="student-item">
|
||||
<div class="student-avatar" :class="student.gender === '男' ? 'boy' : 'girl'">
|
||||
<BoyOutlined v-if="student.gender === '男'" class="student-gender-icon" />
|
||||
<GirlOutlined v-else class="student-gender-icon" />
|
||||
@ -276,35 +236,22 @@
|
||||
</div>
|
||||
|
||||
<div class="pagination-wrapper" v-if="studentsPagination.total > studentsPagination.pageSize">
|
||||
<a-pagination
|
||||
v-model:current="studentsPagination.current"
|
||||
v-model:pageSize="studentsPagination.pageSize"
|
||||
:total="studentsPagination.total"
|
||||
:show-total="(total: number) => `共 ${total} 条`"
|
||||
size="small"
|
||||
@change="handleStudentsPageChange"
|
||||
/>
|
||||
<a-pagination v-model:current="studentsPagination.current" v-model:pageSize="studentsPagination.pageSize"
|
||||
:total="studentsPagination.total" :show-total="(total: number) => `共 ${total} 条`" size="small"
|
||||
@change="handleStudentsPageChange" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 班级教师管理模态框 -->
|
||||
<a-modal
|
||||
v-model:open="teachersModalVisible"
|
||||
:title="`管理 ${currentClass?.name || ''} 教师团队`"
|
||||
:footer="null"
|
||||
width="600px"
|
||||
>
|
||||
<a-modal v-model:open="teachersModalVisible" :title="`管理 ${currentClass?.name || ''} 教师团队`" :footer="null"
|
||||
width="600px">
|
||||
<div class="teachers-modal-content">
|
||||
<!-- 添加教师表单 -->
|
||||
<div class="add-teacher-form">
|
||||
<div class="form-row">
|
||||
<a-select
|
||||
v-model:value="teacherFormState.teacherId"
|
||||
placeholder="选择教师"
|
||||
style="width: 150px;"
|
||||
:loading="teachersLoading"
|
||||
>
|
||||
<a-select v-model:value="teacherFormState.teacherId" placeholder="选择教师" style="width: 150px;"
|
||||
:loading="teachersLoading">
|
||||
<a-select-option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id">
|
||||
{{ teacher.name }}
|
||||
</a-select-option>
|
||||
@ -326,20 +273,14 @@
|
||||
<div v-for="teacher in classTeachers" :key="teacher.teacherId" class="teacher-item">
|
||||
<div class="teacher-info">
|
||||
<span class="teacher-name">{{ teacher.teacherName }}</span>
|
||||
<a-select
|
||||
v-model:value="teacher.role"
|
||||
size="small"
|
||||
style="width: 80px; margin-left: 8px;"
|
||||
@change="handleUpdateTeacherRole(teacher)"
|
||||
>
|
||||
<a-select v-model:value="teacher.role" size="small" style="width: 80px; margin-left: 8px;"
|
||||
@change="handleUpdateTeacherRole(teacher)">
|
||||
<a-select-option value="MAIN">主班</a-select-option>
|
||||
<a-select-option value="ASSIST">配班</a-select-option>
|
||||
<a-select-option value="CARE">保育员</a-select-option>
|
||||
</a-select>
|
||||
<a-checkbox
|
||||
v-model:checked="teacher.isPrimary"
|
||||
@change="handleUpdateTeacherRole(teacher)"
|
||||
>班主任</a-checkbox>
|
||||
<a-checkbox v-model:checked="teacher.isPrimary"
|
||||
@change="handleUpdateTeacherRole(teacher)">班主任</a-checkbox>
|
||||
</div>
|
||||
<a-button type="link" danger size="small" @click="handleRemoveTeacher(teacher.teacherId)">
|
||||
移除
|
||||
@ -509,8 +450,8 @@ const getProgressWidth = (count: number) => {
|
||||
const loadClasses = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await getClasses();
|
||||
let classList = result;
|
||||
const { items } = await getClasses();
|
||||
let classList = items;
|
||||
if (searchKeyword.value) {
|
||||
classList = classList.filter((cls: ClassInfo) =>
|
||||
cls.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
@ -881,9 +822,17 @@ onMounted(() => {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.class-card.grade-small { border-top: 4px solid #43e97b; }
|
||||
.class-card.grade-middle { border-top: 4px solid #4facfe; }
|
||||
.class-card.grade-big { border-top: 4px solid #FF8C42; }
|
||||
.class-card.grade-small {
|
||||
border-top: 4px solid #43e97b;
|
||||
}
|
||||
|
||||
.class-card.grade-middle {
|
||||
border-top: 4px solid #4facfe;
|
||||
}
|
||||
|
||||
.class-card.grade-big {
|
||||
border-top: 4px solid #FF8C42;
|
||||
}
|
||||
|
||||
.class-card .card-header {
|
||||
display: flex;
|
||||
@ -902,9 +851,17 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.class-card.grade-small .class-icon { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
|
||||
.class-card.grade-middle .class-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
|
||||
.class-card.grade-big .class-icon { background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%); }
|
||||
.class-card.grade-small .class-icon {
|
||||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||||
}
|
||||
|
||||
.class-card.grade-middle .class-icon {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
|
||||
.class-card.grade-big .class-icon {
|
||||
background: linear-gradient(135deg, #FF8C42 0%, #FFB347 100%);
|
||||
}
|
||||
|
||||
.icon-component {
|
||||
font-size: 24px;
|
||||
@ -932,9 +889,20 @@ onMounted(() => {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.grade-badge.grade-small { background: #E8F5E9; color: #43A047; }
|
||||
.grade-badge.grade-middle { background: #E3F2FD; color: #1976D2; }
|
||||
.grade-badge.grade-big { background: #FFF8F0; color: #FF8C42; }
|
||||
.grade-badge.grade-small {
|
||||
background: #E8F5E9;
|
||||
color: #43A047;
|
||||
}
|
||||
|
||||
.grade-badge.grade-middle {
|
||||
background: #E3F2FD;
|
||||
color: #1976D2;
|
||||
}
|
||||
|
||||
.grade-badge.grade-big {
|
||||
background: #FFF8F0;
|
||||
color: #FF8C42;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 16px 20px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user