欢迎来到尧图网

客户服务 关于我们

您的位置：首页 > 文旅 > 八卦 > SpirngCloud+Vue3通过id批量修改某一个字段的值

SpirngCloud+Vue3通过id批量修改某一个字段的值

2024/11/30 10:33:49 来源：https://blog.csdn.net/qq_50684356/article/details/140945272  浏览:  次   关键词：SpirngCloud+Vue3通过id批量修改某一个字段的值

♥️作者：小宋1021
🤵‍♂️个人主页：小宋1021主页
♥️坚持分析平时学习到的项目以及学习到的软件开发知识，和大家一起努力呀！！！
🎈🎈加油！ 加油！ 加油！ 加油
🎈欢迎评论 💬点赞👍🏻 收藏 📂加关注+！

目录

前端：

列表项：

点击事件：

按钮：

按钮点击事件：

updateTimeTableStudyStudent方法：

后端：

Service层：

TimeTableStudyStudentServiceImpl实现类：

TimeTableStudyStudentSaveReqVO：

实体类：

controller层：

前端全部代码：

场景：课程和学生是一对多的关系，每一个课程对应多个学生，在学生上完课之后要做一个消课记录，“已到”就是消课成功，“未到”就是没有消课。通过数据库里面的消课状态字段来记录，0：未消 1：已消。

这就需要前端传一个id的数组，后端遍历这个id数组，去改变每一条id下的消课状态属性。

我们来看看是怎么实现的。

前端：

列表项：

 <el-table-columnlabel="序号"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-buttontype="primary"plain@click="submitForm">已到</el-button><el-buttontype="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.valueawait 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实现类：

 @Overridepublic 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 {/*** 主键*/@TableIdprivate 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-descriptionsclass="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-buttontype="primary"plain@click="submitForm">已到</el-button><el-buttontype="primary"plain@click="submitForm2">未到</el-button><el-table v-loading="loading" :data="list2" :stripe="true" :show-overflow-tooltip="true"@selection-change="handleSelectionChange"><el-table-columnlabel="序号"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 = trueconsole.log(courseId,'asdsad')resetForm()// 修改时，设置数据if (id) {formLoading.value = truetry {const data = await TimeTableApi.selectDetail(id)const data2 = await TimeTableApi.selectDetail2(id)student.value = studentslist.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.valueawait 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.valueawait 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 //课程idstudyClassId: number //班级idway_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 })},// 导出课表排课 ExcelexportTimeTable: async (params) => {return await request.download({ url: `/study/time-table/export-excel`, params })},
}

要记得把id设定为number类型的数组哦。

如果有问题欢迎我们一起沟通，祝大家万事顺意。

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

相关资讯

热文排行

最新新闻

推荐新闻

热搜词

registry 删除私有仓库镜像 群控系统服务端开发模式-应用开发-邮箱配置功能开发 2024算法基础公选课练习七（BFS1） sql server 获取当前日期的时间戳 CTF-RE 从0到 N: 高版本 APK 调试 + APK逻辑修改再打包 + os层调试[2024 强网杯青少年专项赛 Flip_over] writeup C语言：深入理解指针