<!
-- 补课
-->
<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, 1
5]" :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]
在Vue项目中使用ElementUI的Input组件时，发现v-model.trim会导致输入时无法输入空格。通过分析，了解到这是由于Element的Input不支持v-model.trim。为了解决这个问题，可以改用@blur事件结合JavaScript的trim方法，在失去焦点时去除首尾空格。示例代码展示了如何在不使用修饰符.trim的情况下实现这一功能。
扫一扫
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
