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

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

2024-08-06 50
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
函数计算FC，每月15万CU 3个月
可观测可视化 Grafana 版，10个用户账号 1个月
容器服务 Serverless 版 ACK Serverless，952元额度 多规格
简介： 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
目录
相关文章
那年春天
|
9天前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
那年春天
157 59
你都不懂
|
3天前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
你都不懂
18 2
LKIDTI数据
|
6天前
|
JavaScript API
Vue3实现面板分割
Vue3实现面板分割
LKIDTI数据
20 1
chnjames
|
5天前
|
移动开发 JavaScript 前端开发
💻揭秘！如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心，通过随机生成的颜色矩阵和一个变化点，玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能，包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外，作者展示了使用Vue 3和TypeScript开发的代码实现，带领读者一步步深入了解游戏的逻辑与细节。
chnjames
119 69
我是快乐的嘟嘟
|
2天前
|
JavaScript
vue3 生命周期
【10月更文挑战第14天】vue3 生命周期
我是快乐的嘟嘟
9 2
谢妹纸
|
4天前
|
JavaScript 前端开发
Vue 2 和 Vue 3 之间响应式区别
10月更文挑战第7天
谢妹纸
16 2
邹荣乐
|
5天前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
邹荣乐
26 0
邹荣乐
|
5天前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据
vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据
邹荣乐
91 0
diygwcom
|
10天前
|
Web App开发 JavaScript 数据可视化
vue3扩展echart封装为组件库-快速复用
vue3扩展echart封装为组件库-快速复用
diygwcom
41 7
前端徐徐
|
5天前
|
JavaScript 前端开发 算法
对比一下Vue2 和 Vue3？—— 8个方面给你答案
本文介绍了 Vue 和 React 的起源、核心思想、表现形式、API 差异、社区差异、升级方向、响应式原理、Diff 算法、事件机制，并进行了总结。Vue 以其渐进式框架设计和简洁性著称，而 React 则强调单向数据流和灵活性。两者均支持组件化开发和虚拟 DOM，适用于不同的开发场景。
前端徐徐
14 0
对比一下Vue2 和 Vue3？—— 8个方面给你答案