<!
-- 补课
-->
<template>
<div class="page
-content" v
-loading="loading">
<
el-card class="search
-card">
<
el-form-item lab
el="上课日期：">
<
el-radio
-group class="custom
-radio
-group" @change="getData" v
-mod
el="query.timeType">
<
el-radio
-button lab
el="不限" :value="
-1" />
<
el-radio
-button lab
el="本周" :value="1" />
<
el-radio
-button lab
el="本月" :value="2" />
<
el-radio
-button lab
el="上月" :value="3" />
<
el-radio
-button lab
el="自定义" :value="4" />
</
el-radio
-group>
</
el-form-item>
<
el-divider border
-style="dashed" class="query
-split
-line" />
<
el-form-item lab
el="补课状态：">
<
el-radio
-group class="custom
-radio
-group" @change="getData" v
-mod
el="query.makeupStatus">
<
el-radio
-button lab
el="不限" :value="
-1" />
<
el-radio
-button lab
el="已补课" :value="1" />
<
el-radio
-button lab
el="
未补课" :value="0" />
</
el-radio
-group>
</
el-form-item>
<
el-divider border
-style="dashed" v
-if="showMore" class="query
-split
-line" />
<
el-form-item lab
el="更多筛选：" class="more
-filter" v
-show="showMore">
<
el-s
elect placeholder="授课模式" clearable v
-mod
el="query.teachType" @change="getData">
<
el-option lab
el="班课" :value="1" />
<
el-option lab
el="1对1" :value="2" />
</
el-s
elect>
<CampusS
elect placeholder="校区" multiple @change="getData" clearable v
-mod
el="query.campusIds" />
<GradeS
elect placeholder="年级" multiple @change="getData" clearable v
-mod
el="query.grades" />
<SubjectS
elect placeholder="科目" multiple @change="getData" clearable v
-mod
el="query.subjectIds" />
<CourseTypeS
elect placeholder="课程类型" v
-mod
el="query.courseTypeIds" clearable multiple @change="getData" />
<TeacherS
elect placeholder="请选择老师" @change="getData" clearable v
-mod
el="query.teacherId" filterable />
<TeacherS
elect placeholder="请选择教务" @change="getData" clearable v
-mod
el="query.assistantId" filterable />
<DatePicker transfer type="daterange" placeholder="补课日期" :value="query.makeupDateRange" style="width: 200px" @on
-change="onMakeupDateRangeChange" />
<
el-s
elect placeholder="上课时间段" />
<
el-s
elect placeholder="上课教室" @change="getData" />
</
el-form-item>
<
el-divider border
-style="dashed" class="cursor
-pointer query
-split
-line" @click="showMore = !showMore">
{{ showMore ? "收起" : "更多筛选" }}
<
el-icon>
<ArrowUp v
-if="showMore" />
<ArrowDown v
-else />
</
el-icon>
</
el-divider>
</
el-card>
<
el-card>
<div class="flex justify
-between text
-sm mb4">
<div class="flex gap
-1">
共
<strong>{{ total }}</strong>
条班级记录
</div>
<!
--查询
-->
<div class="flex gap
-3">
<
el-input placeholder="输入学生关键字查询" v
-mod
el="input" @change="getData" class="input
-with
-s
elect">
<template #prepend>
<
el-s
elect v
-mod
el="s
electType" style="width: 80px">
<
el-option lab
el="课程" value="course" />
<
el-option lab
el="班级" value="class" />
<
el-option lab
el="学生" value="student" />
</
el-s
elect>
</template>
</
el-input>
<!
--批量操作
-->
<
el-dropdown @command="(command: string) => handleMakeupAction(s
electedRows, command)">
<
el-button class="batch
-action
-btn">
批量操作
<
el-icon><arrow
-down /></
el-icon>
</
el-button>
<template #dropdown>
<
el-dropdown
-menu>
<
el-dropdown
-item @click="handleBatchMakeup">直接补课</
el-dropdown
-item>
<
el-dropdown
-item command="in
-class">插班补课</
el-dropdown
-item>
<
el-dropdown
-item command="canc
el">取消补课</
el-dropdown
-item>
</
el-dropdown
-menu>
</template>
</
el-dropdown>
</div>
</div>
<S
electionTable ref="tableRef" :data="tableData" header
-c
ell
-class
-name="table
-header" border v
-mod
el="s
electedRows">
<
el-table
-column lab
el="上课日期" show
-overflow
-tooltip min
-width="180">
<template #default="scope">{{ moment(scope.row.date).
format("YYYY
-MM
-DD ") }}</template>
</
el-table
-column>
<
el-table
-column lab
el="上课时间" show
-overflow
-tooltip min
-width="180" prop="class
Item.classTime" />
<
el-table
-column lab
el="ID" show
-overflow
-tooltip min
-width="100" prop="student.id" />
<
el-table
-column lab
el="班级" show
-overflow
-tooltip min
-width="300" prop="classGroup.name" />
<
el-table
-column lab
el="学员" show
-overflow
-tooltip min
-width="100" prop="student.name" />
<
el-table
-column lab
el="老师" show
-overflow
-tooltip min
-width="100">
<template #default="scope">
{{ getNames(scope.row.class
Item.teachers).join(",") }}
</template>
</
el-table
-column>
<
el-table
-column lab
el="教务" show
-overflow
-tooltip min
-width="100">
<template #default="scope">
{{ getNames(scope.row.classGroup.assistants).join(",") }}
</template>
</
el-table
-column>
<
el-table
-column lab
el="考勤状态" width="100">
<template #default="scope">
<
el-tag v
-if="scope.row.class
Item.status == 1" type="success">出勤</
el-tag>
<
el-tag v
-else
-if="scope.row.class
Item.status == 2" type="warning">请假</
el-tag>
<
el-tag v
-else
-if="scope.row.class
Item.status == 3" type="danger">缺勤</
el-tag>
<
el-tag v
-else type="info">
未知</
el-tag>
</template>
</
el-table
-column>
<
el-table
-column lab
el="补课状态" width="100">
<template #default="scope">
<
el-tag v
-if="scope.row.makeupStatus == 0" type="info">
未补课</
el-tag>
<
el-tag v
-else
-if="scope.row.makeupStatus == 1" type="success">已补课</
el-tag>
</template>
</
el-table
-column>
<
el-table
-column lab
el="补课类型" width="100">
<template #default="scope">
<
el-tag v
-if="scope.row.makeupType == MakeupType.Direct" type="success">直接补课</
el-tag>
<
el-tag v
-else
-if="scope.row.makeupType == MakeupType.MakeupInOtherClass" type="success">插班补课</
el-tag>
</template>
</
el-table
-column>
<
el-table
-column lab
el="补课老师" width="100">
<template #default="scope">
{{ getNames([scope.row.teacherId]).join(",") }}
</template>
</
el-table
-column>
<
el-table
-column lab
el="补课日期" width="100" prop="makeupDate">
<template #default="scope">
{{ scope.row.makeupDate ? moment(scope.row.makeupDate).
format("YYYY
-MM
-DD") : "" }}
</template>
</
el-table
-column>
<
el-table
-column lab
el="备注" show
-overflow
-tooltip width="120" prop="remark" />
<
el-table
-column lab
el="操作" width="80" fixed="right">
<template #default="{ row }">
<
el-dropdown trigger="click">
<span class="more
-action">
更多
<
el-icon class="arrow
-icon"><ArrowDown /></
el-icon>
</span>
<template #dropdown>
<
el-dropdown
-menu>
<
el-dropdown
-item v
-if="row.makeupStatus === 0" @click="handleMakeup(row)">直接补课</
el-dropdown
-item>
<
el-dropdown
-item v
-if="row.makeupStatus === 0" @click="handleMakeupAction">插班补课</
el-dropdown
-item>
<
el-dropdown
-item v
-if="row.makeupStatus === 1" @click="canc
elMakeup([row])">取消补课</
el-dropdown
-item>
</
el-dropdown
-menu>
</template>
</
el-dropdown>
</template>
</
el-table
-column>
</S
electionTable>
</
el-card>
<!
--直接补课对话框
-->
<
el-dialog v
-mod
el="directMakeup" title="直接补课" width="600px" destroy
-on
-close>
<
el-form :mod
el="
form" lab
el-position="top" ref="
formRef" :rules="rules">
<
el-form-item lab
el="补课老师" prop="teacherId">
<TeacherS
elect v
-mod
el="
form.teacherId" filterable clearable placeholder="请选择老师" />
</
el-form-item>
<
el-form-item lab
el="补课日期" prop="makeupDate">
<
el-date
-picker v
-mod
el="
form.makeupDate" type="date" value
-format="YYYY
-MM
-DD" placeholder="请选择补课日期" style="width: 40%" />
</
el-form-item>
<
el-form-item lab
el="补课时间段" prop="makeUpTimeRange">
<TimePicker confirm type="timerange" :value="
form.makeUpTimeRange" @on
-change="onTimeRangeChange" placeholder="请选择上课时段" :steps="[1, 15]" :
format="time
Format" />
</
el-form-item>
<
el-form-item lab
el="备注" prop="remark">
<
el-input v
-mod
el="
form.remark" placeholder="请填写备注" type="textarea" />
</
el-form-item>
</
el-form>
<template #footer>
<div class="dialog
-footer">
<
el-button type="primary" :disabled="loading" @click="handleConfirmMakeup">确定</
el-button>
<
el-button @click="handleDialogClose">取消</
el-button>
</div>
</template>
</
el-dialog>
<!
--插班补课对话框
-->
<
el-dialog v
-mod
el="inclassMakeup" title="插班补课" width="1000px">
<
el-alert title="只支持同课程下的班级安排补课，每个月3号过后，不能插入上个月及以前月份的班级" type="warning" class="mb
-4" />
<div class="filters mb
-4 flex gap
-4">
<!
-- 校区下拉选择
-->
<CampusS
elect placeholder="请选择" v
-mod
el="class
ItemQuery.campusIds" @change="campusChange" style="width: 90px" />
<!
-- 班级下拉选择
-->
<
el-s
elect placeholder="请选择班级" v
-mod
el="s
electedClassGroupId" filterable clearable @change="getClass
ItemList" style="width: 200px">
<
el-option v
-for="
item in classGroupList" :key="
item.id" :lab
el="
item.name" :value="
item.id" />
</
el-s
elect>
<!
-- 日期选择
-->
<DatePicker type="daterange" placeholder="补课日期" :value="class
ItemQuery.timeRange" @onchange="onInClassRange" style="width: 200px" />
</div>
<!
--插班补课表格
-->
<
el-table :data="class
ItemList" border header
-c
ell
-class
-name="table
-header" @s
election
-change="handleClass
ItemS
electionChange">
<
el-table
-column type="s
election" width="55" align="center" :s
electable="() => true" :reserve
-s
election="false">
<template #header>
<!
-- 空 header，隐藏全选框
-->
</template>
</
el-table
-column>
<
el-table
-column lab
el="班级" show
-overflow
-tooltip min
-width="180" prop="classGroupName" />
<
el-table
-column lab
el="上课时间" show
-overflow
-tooltip min
-width="180">
<template #default="scope">{{ moment(scope.row.date).
format("YYYY
-MM
-DD ") }}{{ scope.row.startTime }}
- {{ scope.row.endTime }}</template>
</
el-table
-column>
<
el-table
-column lab
el="老师" show
-overflow
-tooltip min
-width="100">
<template #default="scope">
{{ getNames(scope.row.teachers).join(",") }}
</template>
</
el-table
-column>
<
el-table
-column lab
el="教室" show
-overflow
-tooltip min
-width="100" prop="classRoomName" />
</
el-table>
<template #footer>
<div class="dialog
-footer">
<
el-button type="primary" :disabled="loading" @click="submitMakeupInclass">确定</
el-button>
<
el-button @click="inclassMakeup = false">取消</
el-button>
</div>
</template>
</
el-dialog>
</div>
</template>
<script setup lang="ts">
import type {
ElTable,
FormInstance } from "
element
-plus";
import moment from "moment";
import { useUserStore } from "@/store";
import { Makeup, MakeupQuery, MakeupStatus, MakeupType, rules } from "@/mod
els/enroll/Makeup";
import { useRouter } from "vue
-router";
import { MakeupAPI } from "@/api/MakeupApi";
import { DatePicker, Row } from "view
-ui
-plus";
import { Class
Item, ClassGroup } from "@/mod
els/routine/ClassGroup";
import { RoutineAPI } from "@/api/RoutineAPI";
import { Class
ItemQuery } from "@/mod
els/routine/scheduleTable/Query";
import { ClassGroupQuery } from "@/mod
els/routine/Query";
import { TimePicker } from "view
-ui
-plus";
const s
electedClassGroupId = ref<number>();
const class
ItemList = ref<Class
Item[]>([]);
const classGroupList = ref<ClassGroup[]>([]);
const userStore = useUserStore();
const directMakeup = ref(false);
const inclassMakeup = ref(false);
const time
Format: any = "HH:mm";
// 状态管理
const loading = ref(false);
const showMore = ref(true);
const tableData = ref<Makeup[]>([]);
const total = ref(0);
const input = ref("");
const s
electType = ref("student");
const tableRef = ref();
const s
electedRows = ref<Makeup[]>([]);
const query = ref<MakeupQuery>(new MakeupQuery());
const class
ItemQuery = ref<Class
ItemQuery>(new Class
ItemQuery());
//插班补课表格复选框
const s
electedClass
Items = ref<Class
Item[]>([]);
function handleClass
ItemS
electionChange(rows: Class
Item[]) {
s
electedClass
Items.value = rows;
}
//直接补课表单
const
formRef = ref<
FormInstance>();
const
form = ref(new Makeup());
//重置直接补课表单，清除验证状态
function reset
Form() {
form.value = new Makeup();
nextTick(() => {
if (
formRef.value) {
formRef.value.clearValidate(); // 清除验证状态
}
});
}
const getClassGroupList = async () => {
const queryParams = new ClassGroupQuery();
// 确保campusIds是数组格式
if (class
ItemQuery.value.campusIds) {
queryParams.campusIds = Array.isArray(class
ItemQuery.value.campusIds) ? class
ItemQuery.value.campusIds : [class
ItemQuery.value.campusIds];
}
const res = await RoutineAPI.queryClassGroup(queryParams);
if (res && "records" in res) {
classGroupList.value = res.records || [];
}
else {
classGroupList.value = [];
}
};
function campusChange() {
s
electedClassGroupId.value = undefined;
getClassGroupList();
getClass
ItemList();
}
//直接补课对话框关闭处理
function handleDialogClose() {
reset
Form();
directMakeup.value = false;
}
function onTimeRangeChange(range: string[]) {
form.value.makeUpTimeRange = range[0] ? range : [];
}
//提交直接补课
async function handleConfirmMakeup() {
formRef.value?.validate(async (pass) => {
if (pass) {
if (
form.value.id) {
loading.value = true;
form.value.makeupStatus = MakeupStatus.Completed;
const res = await MakeupAPI.updateMakeup(
form.value);
loading.value = false;
if (res) {
handleDialogClose();
getData();
}
}
else {
const datas = s
electedRows.value.map((
item) => {
item.makeupStatus = MakeupStatus.Completed;
const data = new Makeup();
Object.assign(data,
item);
data.makeupType =
form.value.makeupType;
data.makeUpTimeRange =
form.value.makeUpTimeRange;
data.makeupDate =
item.makeupDate;
data.teacherId =
form.value.teacherId;
data.makeupDate =
form.value.makeupDate;
data.makeupStatus =
item.makeupStatus;
data.remark =
form.value.remark;
return data;
});
loading.value = true;
const res = await MakeupAPI.updateMakeupBatch(datas);
loading.value = false;
if (res) {
handleDialogClose();
getData();
}
}
}
});
}
/** 提交插班补课 */
function submitMakeupInclass() {}
//单个记录直接补课
function handleMakeup(row: Makeup) {
// 创建行数据的深拷贝
const rowData = JSON.parse(JSON.stringify(row));
//
bug:更多按钮直接补课老师选择器
默认展示teacherId值0
// 修复：如果 teacherId 为 0，设置为 undefined
if (rowData.teacherId === 0) {
rowData.teacherId = undefined;
}
form.value = rowData;
form.value.makeupType = MakeupType.Direct;
directMakeup.value = true;
}
//批量处理直接补课
function handleBatchMakeup() {
if (s
electedRows.value.length === 0) {
ElMessage.warning("请先选择需要补课的数据");
return;
}
if (s
electedRows.value.some((
item) =>
item.makeupStatus !== 0)) {
ElMessage.warning("请选择
未补课的数据");
return;
}
form.value = new Makeup();
form.value.makeupType = MakeupType.Direct;
directMakeup.value = true;
}
//取消补课
async function canc
elMakeup(rows: Makeup[]) {
// 状态检查
if (rows.length === 0) {
ElMessage.warning("请先选择需要取消补课的数据");
return;
}
const makeStatuses = new Set(rows.map((r) => r.makeupStatus));
if (makeStatuses.size > 1) {
ElMessage.warning("请选择相同补课状态的记录进行批量操作");
return;
}
const makeStatus = rows[0].makeupStatus;
if (makeStatus !== 1) {
ElMessage.warning("只有已补课状态的记录才允许取消补课");
return;
}
// 确认提示（根据记录数量显示不同提示）
try {
await
ElMessageBox.confirm(rows.length === 1 ? "确定取消该补课记录吗？" : `确定取消
选中的${rows.length}条补课记录吗？`, "取消确认", {
confirmButtonText: "确定",
canc
elButtonText: "取消",
type: "warning",
});
} catch (canc
el) {
ElMessage.info("操作取消");
return;
}
// 执行取消操作
loading.value = true;
const ids = rows.map((r) => r.id);
const canc
elSuccess = await MakeupAPI.canc
elMakeup(ids);
loading.value = false;
if (canc
elSuccess) {
getData(); // 刷新数据
// 清空选择（如果是批量操作）
if (rows.length > 1) {
s
electedRows.value = [];
tableRef.value?.clearS
election();
}
}
}
//补课类型选择
const handleMakeupAction = async (rows: Makeup[], action: string) => {
if (action === "canc
el") {
await canc
elMakeup(rows);
return;
}
else {
if (action === "direct") {
s
electedRows.value = rows;
directMakeup.value = true;
return;
}
else if (action === "in
-class") {
s
electedRows.value = rows;
inclassMakeup.value = true;
}
}
loading.value = false;
};
async function getData() {
loading.value = true;
const res = await MakeupAPI.queryMakeup(query.value);
loading.value = false;
tableData.value = Array.isArray(res?.records) ? res.records : [];
total.value = res?.total || 0;
nextTick(() => {
tableRef.value.toggleS
election(s
electedRows.value);
});
}
const getClass
ItemList = async () => {
loading.value = true;
if (s
electedClassGroupId.value) {
// 如果选择了班级，使用 getClass
ItemByGroupId API
class
ItemList.value = (await RoutineAPI.getClass
ItemByGroupId(s
electedClassGroupId.value)) || [];
}
// 否则使用 queryClass
Item API，支持校区和时间筛选
const queryParams: Class
ItemQuery = {
...new Class
ItemQuery(),
campusIds: Array.isArray(class
ItemQuery.value?.campusIds)
? [...class
ItemQuery.value.campusIds] // 创建新数组
: [],
timeRange: class
ItemQuery.value.timeRange || [new Date(), new Date()],
index: 1,
size: 10,
};
const res = await RoutineAPI.queryClass
Item(queryParams);
// 确保正确处理API响应
class
ItemList.value = res && "records" in res ? res.records : [];
loading.value = false;
};
function getNames(row: string[]) {
return row?.map((r) => userStore.userNameMap.get(parseInt(r))) ?? [];
}
function onMakeupDateRangeChange(range: string[]) {
query.value.makeupDateRange = range[0] ? [range[0] + " 00:00:00", range[1] + " 23:59:59"] : [];
getData();
}
function onInClassRange(range: string[]) {
class
ItemQuery.value.timeRange = range[0] ? range : [];
getClass
ItemList();
}
onMounted(() => {
getData();
});
</script>
<style lang="scss" scoped></style>
你不要去让我改那些乱七八糟的其他文件行不行，你就检查我界面的代码就行了呀，其他的表格都能正常查询正常显示，怎么可能是配置有问题啊
本文强调在使用el-form-item组件时，确保数据类型与绑定类型一致的重要性，否则将导致选中状态无法正常显示。
扫一扫
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
