<!-- 补课 -->
<template>
<div class="page-content" v-loading="loading">
<el-card class="search-card">
<el-form-item label="上课日期：">
<el-radio-group class="custom-radio-group" @change="getData" v-model="query.timeType">
<el-radio-button label="不限" :
value="-1" />
<el-radio-button label="本周" :
value="1" />
<el-radio-button label="本月" :
value="2" />
<el-radio-button label="上月" :
value="3" />
<el-radio-button label="自定义" :
value="4" />
</el-radio-group>
</el-form-item>
<el-divider border-style="dashed" class="query-split-line" />
<el-form-item label="补课状态：">
<el-radio-group class="custom-radio-group" @change="getData" v-model="query.makeupStatus">
<el-radio-button label="不限" :
value="-1" />
<el-radio-button label="已补课" :
value="1" />
<el-radio-button label="未补课" :
value="0" />
</el-radio-group>
</el-form-item>
<el-divider border-style="dashed" v-if="showMore" class="query-split-line" />
<el-form-item label="更多筛选：" class="more-filter" v-show="showMore">
<el-select placeholder="授课模式" clearable v-model="query.teachType" @change="getData">
<el-option label="班课" :
value="1" />
<el-option label="1对1" :
value="2" />
</el-select>
<CampusSelect placeholder="校区" multiple @change="getData" clearable v-model="query.campusIds" />
<GradeSelect placeholder="年级" multiple @change="getData" clearable v-model="query.grades" />
<SubjectSelect placeholder="科目" multiple @change="getData" clearable v-model="query.subjectIds" />
<CourseTypeSelect placeholder="课程类型" v-model="query.courseTypeIds" clearable multiple @change="getData" />
<TeacherSelect placeholder="请选择老师" @change="getData" clearable v-model="query.teacherId" filterable />
<TeacherSelect placeholder="请选择教务" @change="getData" clearable v-model="query.assistantId" filterable />
<
DatePicker transfer type="daterange" placeholder="补课日期" :
value="query.makeupDateRange" style="width: 200px" @on-change="onMakeupDateRangeChange" />
<el-select placeholder="上课时间段" />
<el-select 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-model="input" @change="getData" class="input-with-select">
<template #prepend>
<el-select v-model="selectType" style="width: 80px">
<el-option label="课程"
value="course" />
<el-option label="班级"
value="class" />
<el-option label="学生"
value="student" />
</el-select>
</template>
</el-input>
<!--批量操作-->
<el-dropdown @command="(command: string) => handleMakeupAction(selectedRows, 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="cancel">取消补课</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<SelectionTable ref="tableRef" :data="tableData" header-cell-class-name="table-header" border v-model="selectedRows">
<el-table-column label="上课日期" show-overflow-tooltip min-width="180">
<template #default="scope">{{ moment(scope.row.date).format("YYYY-MM-DD ") }}</template>
</el-table-column>
<el-table-column label="上课时间" show-overflow-tooltip min-width="180" prop="classItem.classTime" />
<el-table-column label="ID" show-overflow-tooltip min-width="100" prop="student.id" />
<el-table-column label="班级" show-overflow-tooltip min-width="300" prop="classGroup.name" />
<el-table-column label="学员" show-overflow-tooltip min-width="100" prop="student.name" />
<el-table-column label="老师" show-overflow-tooltip min-width="100">
<template #default="scope">
{{ getNames(scope.row.classItem.teachers).join(",") }}
</template>
</el-table-column>
<el-table-column label="教务" show-overflow-tooltip min-width="100">
<template #default="scope">
{{ getNames(scope.row.classGroup.assistants).join(",") }}
</template>
</el-table-column>
<el-table-column label="考勤状态" width="100">
<template #default="scope">
<el-tag v-if="scope.row.classItem.status == 1" type="success">出勤</el-tag>
<el-tag v-else-if="scope.row.classItem.status == 2" type="warning">请假</el-tag>
<el-tag v-else-if="scope.row.classItem.status == 3" type="danger">缺勤</el-tag>
<el-tag v-else type="info">未知</el-tag>
</template>
</el-table-column>
<el-table-column label="补课状态" 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 label="补课类型" 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 label="补课老师" width="100">
<template #default="scope">
{{ getNames([scope.row.teacherId]).join(",") }}
</template>
</el-table-column>
<el-table-column label="补课日期" 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 label="备注" show-overflow-tooltip width="120" prop="remark" />
<el-table-column label="操作" 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="cancelMakeup([row])">取消补课</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
</SelectionTable>
</el-card>
<!--直接补课对话框-->
<el-dialog v-model="directMakeup" title="直接补课" width="600px" destroy-on-close>
<el-form :model="form" label-position="top" ref="formRef" :rules="rules">
<el-form-item label="补课老师" prop="teacherId">
<TeacherSelect v-model="form.teacherId" filterable clearable placeholder="请选择老师" />
</el-form-item>
<el-form-item label="补课日期" prop="makeupDate">
<el-date-picker v-model="form.makeupDate" type="date"
value-format="YYYY-MM-DD" placeholder="请选择补课日期" style="width: 40%" />
</el-form-item>
<el-form-item label="补课时间段" prop="makeUpTimeRange">
<TimePicker confirm type="timerange" :
value="form.makeUpTimeRange" @on-change="onTimeRangeChange" placeholder="请选择上课时段" :steps="[1, 15]" :format="timeFormat" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="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-model="inclassMakeup" title="插班补课" width="1000px">
<el-alert title="只支持同课程下的班级安排补课，每个月3号过后，不能插入上个月及以前月份的班级" type="warning" class="mb-4" />
<div class="filters mb-4 flex gap-4">
<!-- 校区下拉选择 -->
<CampusSelect placeholder="请选择" v-model="classItemQuery.campusIds" @change="campusChange" style="width: 90px" />
<!-- 班级下拉选择 -->
<el-select placeholder="请选择班级" v-model="selectedClassGroupId" filterable clearable @change="classGroupChange" style="width: 200px">
<el-option v-for="item in classGroupList" :key="item.id" :label="item.name" :
value="item.id" />
</el-select>
<!-- 日期选择 -->
<
DatePicker type="daterange" placeholder="补课日期" :
value="classItemQuery.timeRange" onchange="onInClassRange" style="width: 200px" />
</div>
<!--插班补课表格-->
<el-table :data="classItemList" border header-cell-class-name="table-header" @selection-change="handleClassItemSelectionChange">
<el-table-column type="selection" width="55" align="center" :selectable="() => true" :reserve-selection="false">
<template #header>
<!-- 空 header，隐藏全选框 -->
</template>
</el-table-column>
<el-table-column label="班级" show-overflow-tooltip min-width="180" prop="classGroupName" />
<el-table-column label="上课时间" 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 label="老师" show-overflow-tooltip min-width="100">
<template #default="scope">
{{ getNames(scope.row.teachers).join(",") }}
</template>
</el-table-column>
<el-table-column label="教室" 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 "@/models/enroll/Makeup";
import { useRouter } from "vue-router";
import { MakeupAPI } from "@/api/MakeupApi";
import {
DatePicker, Row } from "view-ui-plus";
import { ClassItem, ClassGroup } from "@/models/routine/ClassGroup";
import { RoutineAPI } from "@/api/RoutineAPI";
import { ClassItemQuery } from "@/models/routine/scheduleTable/Query";
import { ClassGroupQuery } from "@/models/routine/Query";
import { TimePicker } from "view-ui-plus";
const selectedClassGroupId = ref<number>();
const classItemList = ref<ClassItem[]>([]);
const classGroupList = ref<ClassGroup[]>([]);
const userStore = useUserStore();
const directMakeup = ref(false);
const inclassMakeup = ref(false);
const timeFormat: any = "HH:mm";
// 状态管理
const loading = ref(false);
const showMore = ref(true);
const tableData = ref<Makeup[]>([]);
const total = ref(0);
const input = ref("");
const selectType = ref("student");
const tableRef = ref();
const selectedRows = ref<Makeup[]>([]);
const query = ref<MakeupQuery>(new MakeupQuery());
const classItemQuery = ref<ClassItemQuery>(new ClassItemQuery());
const classGroupQuery = ref<ClassGroupQuery>(new ClassGroupQuery());
//插班补课表格复选框
const selectedClassItems = ref<ClassItem[]>([]);
function handleClassItemSelectionChange(rows: ClassItem[]) {
selectedClassItems.
value = rows;
}
//直接补课表单
const formRef = ref<FormInstance>();
const form = ref(new Makeup());
//重置直接补课表单，清除验证状态
function resetForm() {
form.
value = new Makeup();
nextTick(() => {
if (formRef.
value) {
formRef.
value.clearValidate(); // 清除验证状态
}
});
}
const getClassGroupList = async () => {
const queryParams = new ClassGroupQuery();
// 确保campusIds是数组格式
if (classItemQuery.
value.campusIds) {
queryParams.campusIds = Array.isArray(classItemQuery.
value.campusIds) ? classItemQuery.
value.campusIds : [classItemQuery.
value.campusIds];
}
const res = await RoutineAPI.queryClassGroup(queryParams);
if (res && "records" in res) {
classGroupList.
value = res.records || [];
} else {
classGroupList.
value = [];
}
};
function campusChange() {
getClassGroupList();
getClassItemList();
}
const classGroupChange = async () => {
if (selectedClassGroupId.
value) {
loading.
value = true;
const items = await RoutineAPI.getClassItemByGroupId(selectedClassGroupId.
value);
classItemList.
value = items || [];
loading.
value = false;
} else {
getClassItemList();
}
};
//直接补课对话框关闭处理
function handleDialogClose() {
resetForm();
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 = selectedRows.
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 (selectedRows.
value.length === 0) {
ElMessage.warning("请先选择需要补课的数据");
return;
}
if (selectedRows.
value.some((item) => item.makeupStatus !== 0)) {
ElMessage.warning("请选择未补课的数据");
return;
}
form.
value = new Makeup();
form.
value.makeupType = MakeupType.Direct;
directMakeup.
value = true;
}
//取消补课
async function cancelMakeup(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: "确定",
cancelButtonText: "取消",
type: "warning",
});
} catch (cancel) {
ElMessage.info("操作取消");
return;
}
// 执行取消操作
loading.
value = true;
const ids = rows.map((r) => r.id);
const cancelSuccess = await MakeupAPI.cancelMakeup(ids);
loading.
value = false;
if (cancelSuccess) {
getData(); // 刷新数据
// 清空选择（如果是批量操作）
if (rows.length > 1) {
selectedRows.
value = [];
tableRef.
value?.clearSelection();
}
}
}
//补课类型选择
const handleMakeupAction = async (rows: Makeup[], action: string) => {
if (action === "cancel") {
await cancelMakeup(rows);
return;
} else {
if (action === "direct") {
selectedRows.
value = rows;
directMakeup.
value = true;
return;
} else if (action === "in-class") {
selectedRows.
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.toggleSelection(selectedRows.
value);
});
}
async function getClassItemList() {
loading.
value = true;
// 如果有选中班级，使用getClassItemByGroupId API
if (selectedClassGroupId.
value) {
const items = await RoutineAPI.getClassItemByGroupId(selectedClassGroupId.
value);
classItemList.
value = items || [];
}
// 如果既没有选中班级也没有选中校区，清空列表
else {
classItemList.
value = [];
}
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[]) {
classItemQuery.
value.timeRange = range[0] ? [range[0]] : [];
getClassItemList();
}
onMounted(() => {
getData();
});
</script>
<style lang="scss" scoped></style>
但是你看我代码中的这一部分
<el-table-column label="老师" show-overflow-tooltip min-width="100">
<template #default="scope">
{{ getNames(scope.row.classItem.teachers).join(",") }}
</template>
</el-table-column>
方法是一样的都是getnames，操作的数据也都是一样的都是classitem对象里的teachers，那为什么这个就可以正常显示呢，而且浏览器得到的回复里明显也有teachers的
值[2]
本文解决了使用Datepicker时无法正确弹出日期选择框的问题。错误在于将hasDatepicker类提前加入输入框的class中，正确的做法是在初始化时动态添加此类。
扫一扫
1370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
