♥️作者：小宋1021
🤵♂️个人主页：小宋1021主页
♥️坚持分析平时学习到的项目以及学习到的软件开发知识，和大家一起努力呀！！！
🎈🎈加油！ 加油！ 加油！ 加油
🎈欢迎评论 💬点赞👍🏻 收藏 📂加关注+！
目录
前端：
列表项：
点击事件：
按钮：
按钮点击事件：
updateTimeTableStudyStudent方法：
后端：
Service层：
TimeTableStudyStudentServiceImpl实现类：
TimeTableStudyStudentSaveReqVO：
实体类：
controller层：
前端全部代码：
场景：课程和学生是一对多的关系，每一个课程对应多个学生，在学生上完课之后要做一个消课记录，“已到”就是消课成功，“未到”就是没有消课。通过数据库里面的消课状态字段来记录，0：未消 1：已消。
这就需要前端传一个id的数组，后端遍历这个id数组，去改变每一条id下的消课状态属性。
我们来看看是怎么实现的。
前端：
列表项：
<el-table-column
label="序号"
type="index"
header-align="center"
align="center"
width="60px"
fixed
/>
<el-table-column type="selection" width="55" @change="handleSelectionChange" />
<el-table-column label="学生姓名" align="center" prop="stsStudentName" />
<el-table-column label="手机号" align="center" prop="stsPhone" />
<!-- <el-table-column label="上课时间" align="center" prop="firstClassStartTime" /> -->
<el-table-column label="请假状态" align="center" prop="leavelStatus" width="100px">
<template #default="scope">
<dict-tag :type="DICT_TYPE.STUDY_LEAVE_STATUS" :value="scope.row.leavelStatus" />
</template>
</el-table-column>
<el-table-column label="消课状态" align="center" prop="usedStatus" width="100px">
<template #default="scope">
<dict-tag :type="DICT_TYPE.STUDY_CANCEL_CLASS_STATUS" :value="scope.row.usedStatus" />
</template>
</el-table-column>
</el-table>在这里加了多选框方便选择多个学员，还给这个多选框设置了一个点击事件@change="handleSelectionChange
点击事件：
const handleSelectionChange = (val: TimeTableVO[]) => {
id.value = []
for (let i = 0; i < val.length; i++) {
id.value.push(val[i])
}
}
定义了一个id的数组，然后遍历TimeTableVO，把TimeTableVO依次push到id数组里面
按钮：
<el-button
type="primary"
plain
@click="submitForm"
>
已到
</el-button>
<el-button
type="primary"
plain
@click="submitForm2"
>
未到
</el-button>每个按钮都有一个提交的点击事件，是为了把id数组提交给后台进行修改。
按钮点击事件：
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const message = useMessage() // 消息弹窗
const submitForm=async ()=>{
const ids = [];
id.value.forEach(itemProps => {
ids.push(itemProps.id)
});
// tableData.id = id.value
await TimeTableStudyStudentApi.updateTimeTableStudyStudent({ids:ids,type:"1"})
//传递给父组件
dialogVisible.value = false;
emit('success')
}遍历数组，拿到id然后赋值给已经定义好的ids数组里面然后调用TimeTableStudyStudentApi里面的updateTimeTableStudyStudent方法，其实就是编辑方法。
updateTimeTableStudyStudent方法：
// 修改全部学员
updateTimeTableStudyStudent: async (data) => {
return await request.put({ url: `/study/time-table-study-student/update` , data })
},后端：
后端就是正常的updateById方法，稍作修改即可
Service层：
/**
* 更新上课学生(与课表是N对1)
*
* @param 更新信息
*/
void updateTimeTableStudyStudent(@Valid TimeTableStudyStudentSaveReqVO studyStudentSaveReqVO);
/**
* 更新上课学生(与课表是N对1)
*
* @param 更新信息
*/
void updateTimeTableStudyStudentCancel(@Valid TimeTableStudyStudentSaveReqVO studyStudentSaveReqVO);上边是消课把0置为1，下边是未到把1置为0（未到的作用是防止消课人员点错）
TimeTableStudyStudentServiceImpl实现类：
@Override
public void updateTimeTableStudyStudent(TimeTableStudyStudentSaveReqVO studyStudentSaveReqVO) {
studyStudentSaveReqVO.getIds().stream().forEach(id -> {
TimeTableStudyStudentDO student = this.getTimeTableStudyStudent(id);
student.setUsedStatus(1); // 假设只需要更新 usedStatus
// updateObjList.add(timeTableStudyStudentDO);
timeTableStudyStudentMapper.updateById(student);
});
}用stream流对id进行foreach循环，新建一个student实体，防止覆盖数据库里的所有数据，这样的话只会覆盖当前数据的消课字段，把消课字段变成1，不会影响其他数据。通过timeTableStudyStudentMapper.updateById(student); MybatisPlus进行更新对数据库进行插入。
要注意的是TimeTableStudyStudentSaveReqVO这个类要有id的集合和type这两个字段才可以
TimeTableStudyStudentSaveReqVO：
package com.todod.education.module.study.controller.admin.timetablestudystudent.vo;
import io.swagger.v3.oas.annotations.media.Schema;
import lombok.*;
import java.util.*;
import jakarta.validation.constraints.*;
@Schema(description = "管理后台 - 上课学生(与课表是N对1)新增/修改 Request VO")
@Data
public class TimeTableStudyStudentSaveReqVO {
private List<Long> ids;
private String type;
}实体类：
package com.todod.education.module.study.dal.dataobject.timetablestudystudent;
import lombok.*;
import java.util.*;
import java.time.LocalDateTime;
import java.time.LocalDateTime;
import java.time.LocalDateTime;
import com.baomidou.mybatisplus.annotation.*;
import com.todod.education.framework.mybatis.core.dataobject.BaseDO;
/**
* 上课学生(与课表是N对1) DO
*
* @author 平台管理员
*/
@TableName("study_time_table_study_student")
@KeySequence("study_time_table_study_student_seq") // 用于 Oracle、PostgreSQL、Kingbase、DB2、H2 数据库的主键自增。如果是 MySQL 等数据库，可不写。
@Data
@EqualsAndHashCode(callSuper = true)
@ToString(callSuper = true)
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class TimeTableStudyStudentDO extends BaseDO {
/**
* 主键
*/
@TableId
private Long id;
/**
* 课表外键
*/
private Long studyTimeTableId;
/**
* 学生外键
*/
private Long studyStudentId;
/**
* 消课/操作人
*/
private String operator;
/**
* 消课/操作时间
*/
private LocalDateTime operateTime;
/**
* 消课状态(0:未到；1:实到，默认未到)
*/
private Integer usedStatus;
/**
* 请假状态(0:未请假;1:已请假，默认未请假)
*/
private Short leavelStatus;
/**
* 预留字段
*/
private String reserveContent;
/**
* 备注
*/
private String remark;
}controller层：
@PutMapping("/update")
@Operation(summary = "更新上课学生(与课表是N对1)")
// @PreAuthorize("@ss.hasPermission('study:time-table-study-student:update')")
public CommonResult<Boolean> updateTimeTableStudyStudent(@Valid @RequestBody TimeTableStudyStudentSaveReqVO studyStudentSaveReqVO) {
timeTableStudyStudentService.updateTimeTableStudyStudent(studyStudentSaveReqVO);
return success(true);
}
@PutMapping("/updateCancel")
@Operation(summary = "更新上课学生(与课表是N对1)")
// @PreAuthorize("@ss.hasPermission('study:time-table-study-student:update')")
public CommonResult<Boolean> updateTimeTableStudyStudentCancel(@Valid @RequestBody TimeTableStudyStudentSaveReqVO studyStudentSaveReqVO) {
timeTableStudyStudentService.updateTimeTableStudyStudentCancel(studyStudentSaveReqVO);
return success(true);
}注意传值。
前端全部代码：
<template>
<Dialog title="消课" v-model="dialogVisible">
<div>
<el-descriptions
class="margin-top"
:column="2"
:size="size"
>
<el-descriptions-item label="班级名称:">
{{list.className}}
</el-descriptions-item>
<el-descriptions-item label="班级类型:">
{{getDictLabel(DICT_TYPE.COURSE_TYPE,list.classType) }}
</el-descriptions-item>
<el-descriptions-item label="上课时间:">
{{list.classDate}} {{list.classStartTime }} - {{ list.classDate }} {{ list.classEndTime }}
</el-descriptions-item>
<el-descriptions-item label="班级课程:">
{{list.courseName }}
</el-descriptions-item>
<el-descriptions-item label="授课老师:">
{{list.teacherName }}
</el-descriptions-item>
</el-descriptions>
</div>
<ContentWrap>
<el-button
type="primary"
plain
@click="submitForm"
>
已到
</el-button>
<el-button
type="primary"
plain
@click="submitForm2"
>
未到
</el-button>
<el-table v-loading="loading" :data="list2"
:stripe="true"
:show-overflow-tooltip="true"
@selection-change="handleSelectionChange"
>
<el-table-column
label="序号"
type="index"
header-align="center"
align="center"
width="60px"
fixed
/>
<el-table-column type="selection" width="55" @change="handleSelectionChange" />
<el-table-column label="学生姓名" align="center" prop="stsStudentName" />
<el-table-column label="手机号" align="center" prop="stsPhone" />
<!-- <el-table-column label="上课时间" align="center" prop="firstClassStartTime" /> -->
<el-table-column label="请假状态" align="center" prop="leavelStatus" width="100px">
<template #default="scope">
<dict-tag :type="DICT_TYPE.STUDY_LEAVE_STATUS" :value="scope.row.leavelStatus" />
</template>
</el-table-column>
<el-table-column label="消课状态" align="center" prop="usedStatus" width="100px">
<template #default="scope">
<dict-tag :type="DICT_TYPE.STUDY_CANCEL_CLASS_STATUS" :value="scope.row.usedStatus" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</Dialog>
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import { getStrDictOptions,getDictLabel, DICT_TYPE } from '@/utils/dict'
import { TimeTableStudyStudentApi, TimeTableStudyStudentVO } from '@/api/study/timetablestudystudent'
import { ref,onMounted } from 'vue';
import { TimeTableApi, TimeTableVO } from '@/api/study/timetable'
import { itemProps } from '@/layout/components/HeaderMenu/src/props';
import { C } from '@fullcalendar/core/internal-common';
/** 消课记录 列表 */
defineOptions({ name: 'CancleClass' })
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const list2 = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
})
const formData = ref({
id: undefined,
studentId: undefined
})
const props = defineProps({
classId: {
type: Number
}
})
const formRef = ref() // 表单 Ref
const id = ref([])
const handleSelectionChange = (val: TimeTableVO[]) => {
id.value = []
for (let i = 0; i < val.length; i++) {
id.value.push(val[i])
}
}
const student = ref([])
/** 打开弹窗 */
const open = async (type: string, id?: number,courseId?: number, students?: Array ) => {
dialogVisible.value = true
console.log(courseId,'asdsad')
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
const data = await TimeTableApi.selectDetail(id)
const data2 = await TimeTableApi.selectDetail2(id)
student.value = students
list.value = data[0]
list2.value = data2
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const message = useMessage() // 消息弹窗
const submitForm=async ()=>{
const ids = [];
id.value.forEach(itemProps => {
ids.push(itemProps.id)
});
// tableData.id = id.value
await TimeTableStudyStudentApi.updateTimeTableStudyStudent({ids:ids,type:"1"})
//传递给父组件
dialogVisible.value = false;
emit('success')
}
const submitForm2=async ()=>{
console.log("sdfsdfsdf",id.value.length)
const ids = [];
id.value.forEach(itemProps => {
ids.push(itemProps.id)
});
// tableData.id = id.value
await TimeTableStudyStudentApi.updateTimeTableStudyStudentCancel({ids:ids,type:"0"})
//传递给父组件
dialogVisible.value = false;
emit('success')
}
const getList = async () => {
loading.value = true
try {
const data = await TimeTableApi.selectDetail(98)
list.value = data
} finally {
loading.value = false
}
}
const resetForm = () => {
formData.value = {
id: undefined,
studentId: undefined
}
formRef.value?.resetFields()
}
/** 查询列表 */
// const getList = async () => {
// }
onMounted(() => {
getList()
})
</script>
<style scoped lang="scss">
:deep(.el-dialog__body){
width: 1000px !important;
height: 1000px !important;
}
</style>TimeTableVO：
import request from '@/config/axios'
// 课表排课 VO
export interface TimeTableVO {
id: number[] // 主键
studyCourseId: number //课程id
studyClassId: number //班级id
way_enum: string //排课方式
startDate: string //开始日期
repeat_enum: string //重复方式
times: [] //上课时间
end_enum: string //结束方式
endDate: string //结束日期
hrTeacherId: number //上课老师
content: string //上课内容
dates: [] //上课日期
weekTimes:[] //按星期安排时间
num: number //按次数结束
studentIds: number[]//学员id
}
// 课表排课 API
export const TimeTableApi = {
// 查询课表排课分页
getTimeTablePage: async (params: any) => {
return await request.get({ url: `/study/time-table/page`, params })
},
// 查询课表排课分页
getTimeTablePage2: async (params: any) => {
return await request.get({ url: `/study/time-table/page2`, params })
},
// 查询课表排课详情
getTimeTable: async (id: number) => {
return await request.get({ url: `/study/time-table/get?id=` + id })
},
// 查询消课信息详情
selectDetail: async (id: number) => {
return await request.gets({ url: `/study/time-table/cancelListDetail?id=` + id })
},
// 查询消课信息详情
selectDetail2: async (id: number) => {
return await request.gets({ url: `/study/time-table/cancelListDetail2?id=` + id })
},
// 查询消课信息详情
selectDetail3: async (id: number) => {
return await request.gets({ url: `/study/time-table/cancelListDetail3?id=` + id })
},
// 查询消课信息详情
selectDetail4: async (id: number) => {
return await request.gets({ url: `/study/time-table/cancelListDetail4?id=` + id })
},
// 新增课表排课
createTimeTable: async (data: TimeTableVO) => {
return await request.post({ url: `/study/time-table/create`, data })
},
// 修改课表排课
updateTimeTable: async (data: TimeTableVO) => {
return await request.put({ url: `/study/time-table/update`, data })
},
// 删除课表排课
deleteTimeTable: async (id: number) => {
return await request.delete({ url: `/study/time-table/delete?id=` + id })
},
// 导出课表排课 Excel
exportTimeTable: async (params) => {
return await request.download({ url: `/study/time-table/export-excel`, params })
},
}
要记得把id设定为number类型的数组哦。
如果有问题欢迎我们一起沟通，祝大家万事顺意。
