AI 助理
备案控制台
开发者社区 云原生 文章 正文

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

2024-08-06 53
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
可观测监控 Prometheus 版，每月50GB免费额度
应用实时监控服务-应用监控，每月50GB免费额度
可观测可视化 Grafana 版，10个用户账号 1个月
简介： SpirngCloud+Vue3通过id批量修改某一个字段的值

♥️作者：小宋1021

🤵‍♂️个人主页：小宋1021主页

♥️坚持分析平时学习到的项目以及学习到的软件开发知识，和大家一起努力呀！！！

🎈🎈加油！ 加油！ 加油！ 加油

🎈欢迎评论 💬点赞👍🏻 收藏 📂加关注+！

目录

前端：

列表项：

点击事件：

按钮：

按钮点击事件：

updateTimeTableStudyStudent方法：

后端：

Service层：

TimeTableStudyStudentServiceImpl实现类：

TimeTableStudyStudentSaveReqVO：

实体类：

controller层：

前端全部代码：

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

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

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

image.gif 编辑

image.gif 编辑

image.gif 编辑

前端：

列表项：

<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>

image.gif

在这里加了多选框方便选择多个学员，还给这个多选框设置了一个点击事件@change="handleSelectionChange

点击事件：

const handleSelectionChange = (val: TimeTableVO[]) => {
  id.value = []
  for (let i = 0; i < val.length; i++) {
    id.value.push(val[i])
  }
  
}

image.gif

定义了一个id的数组，然后遍历TimeTableVO，把TimeTableVO依次push到id数组里面

按钮：

<el-button
          type="primary"
          plain
         @click="submitForm"
        >
          已到
        </el-button>
        <el-button
          type="primary"
          plain
         @click="submitForm2"
        >
          未到
        </el-button>

image.gif

每个按钮都有一个提交的点击事件，是为了把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')
}

image.gif

遍历数组，拿到id然后赋值给已经定义好的ids数组里面然后调用TimeTableStudyStudentApi里面的updateTimeTableStudyStudent方法，其实就是编辑方法。

updateTimeTableStudyStudent方法：

// 修改全部学员
  updateTimeTableStudyStudent: async (data) => {
    return await request.put({ url: `/study/time-table-study-student/update` , data })
  },

image.gif

后端：

后端就是正常的updateById方法，稍作修改即可

Service层：

/**
     * 更新上课学生(与课表是N对1)
     *
     * @param  更新信息
     */
    void updateTimeTableStudyStudent(@Valid TimeTableStudyStudentSaveReqVO studyStudentSaveReqVO);
    /**
     * 更新上课学生(与课表是N对1)
     *
     * @param  更新信息
     */
    void updateTimeTableStudyStudentCancel(@Valid TimeTableStudyStudentSaveReqVO studyStudentSaveReqVO);

image.gif

上边是消课把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);
        });
}

image.gif

用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;
}

image.gif

实体类：

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;
}

image.gif

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);
    }

image.gif

注意传值。

前端全部代码：

<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>

image.gif

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 })
  },
}

image.gif

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

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

文章标签：
前端开发
数据库
小宋1021
目录
相关文章
快乐就是哈哈哈
|
25天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
快乐就是哈哈哈
51 3
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
刘大猫.
|
29天前
|
API
vue3知识点：provide 与 inject
vue3知识点：provide 与 inject
刘大猫.
33 4
vue3知识点：provide 与 inject
刘大猫.
|
29天前
|
API
vue3知识点：readonly 与 shallowReadonly
vue3知识点：readonly 与 shallowReadonly
刘大猫.
25 1
vue3知识点：readonly 与 shallowReadonly
CamilleKing
|
22天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
50 7
小宋1021
|
23天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
41 3
CamilleKing
|
22天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
39 1
CamilleKing
|
22天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
44 1
游客zi3qmblbcdexu
|
25天前
|
前端开发 JavaScript
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
游客zi3qmblbcdexu
40 1
大树营养快线
|
25天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念，掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索，你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
大树营养快线
30 2
刘大猫.
|
28天前
|
JavaScript Java API
vue3知识点：setup
vue3知识点：setup
刘大猫.
28 5