SpringCloud+Vue3多对多，多表联查
♥️作者：小宋1021
🤵♂️个人主页：小宋1021主页
♥️坚持分析平时学习到的项目以及学习到的软件开发知识，和大家一起努力呀！！！
🎈🎈加油！ 加油！ 加油！ 加油
🎈欢迎评论 💬点赞👍🏻 收藏 📂加关注+！
目录
后端
实体类：
CancleClassRespVO
controller
CancleClassMapper
xml文件
CancleClassService
实现类
前端
index.vue
ClassCkeck.vue
index.ts(api)
axios.index.ts
目的：多表联查
数据库：学员表(study_student) 字段：学生姓名（sts_student_name）、手机号(sts_phone)
班级管理（teach_class_manage）字段：班级名称（teach_class_manage）、id（id）
教师管理（hr_teacher_manage）字段：教师姓名（teacher_name）
课程管理（teach_course_manage）字段 ：课程名称（course_name）
中间表：
班级管理-关联课程教师（teach_class_manage_course） 字段：class_id、course_id、teacher_id
班级管理-关联学员（teach_class_manage_student） 字段：class_id、student_id
数据关系：班级课程多对多，班级学员多对多
要查出如下字段：
后端
实体类：
package com.todod.education.module.study.dal.dataobject.cancleclass;import lombok.*;
import java.util.*;
import java.time.LocalDateTime;
import java.time.LocalDateTime;
import java.time.LocalDateTime;
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;/*** 消课记录 DO** @author 平台管理员*/
@TableName("study_cancle_class")
@KeySequence("study_cancle_class_seq") // 用于 Oracle、PostgreSQL、Kingbase、DB2、H2 数据库的主键自增。如果是 MySQL 等数据库，可不写。
@Data
@EqualsAndHashCode(callSuper = true)
@ToString(callSuper = true)
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class CancleClassDO extends BaseDO {/*** 主键id*/@TableIdprivate Long id;/*** 学员id*/private Long studentId;/*** 班级id*/private Long classId;/*** 课程id*/private Long courseId;/*** 学员姓名*/@TableField(exist = false)private String stsStudentName;/*** 手机号*/@TableField(exist = false)private String stsPhone;/*** 班级名称*/@TableField(exist = false)private String className;/*** 班级类型*/@TableField(exist = false)private String classType;/*** 所报课程*/@TableField(exist = false)private String courseName;/*** 授课教师*/@TableField(exist = false)private String teacherName;/*** 上课时间*/private LocalDateTime classTime;/*** 消课人*/private String cancelClassPerson;/*** 消课时间*/private LocalDateTime cancelClassTime;/*** 实到人数*/private Integer arrivedNum;/*** 应到人数*/private Integer arrivingNum;/*** 点名操作人员*/private String rollCallPerson;/*** 点名时间*/private LocalDateTime rollCallTime;/*** 操作人*/private String operaName;/*** 操作时间*/private LocalDateTime operaTime;/*** 操作类型*/private String operaType;/*** 操作说明*/private String operaExplain;}CancleClassRespVO
package com.todod.education.module.study.controller.admin.cancleclass.vo;import io.swagger.v3.oas.annotations.media.Schema;
import lombok.*;
import java.util.*;
import java.util.*;
import org.springframework.format.annotation.DateTimeFormat;
import java.time.LocalDateTime;
import com.alibaba.excel.annotation.*;@Schema(description = "管理后台 - 消课记录 Response VO")
@Data
@ExcelIgnoreUnannotated
public class CancleClassRespVO {@Schema(description = "主键id", requiredMode = Schema.RequiredMode.REQUIRED, example = "18505")private Long id;@Schema(description = "学员id", requiredMode = Schema.RequiredMode.REQUIRED, example = "18505")private Long studentId;@Schema(description = "班级id", requiredMode = Schema.RequiredMode.REQUIRED, example = "18505")private Long classId;@Schema(description = "课程id", requiredMode = Schema.RequiredMode.REQUIRED, example = "18505")private Long courseId;@Schema(description = "学员姓名", example = "芋艿")private String stsStudentName;@Schema(description = "手机号")private String stsPhone;@Schema(description = "班级名称", example = "李四")@ExcelProperty("班级名称")private String className;@Schema(description = "班级类型", example = "1")@ExcelProperty("班级类型")private String classType;@Schema(description = "所报课程")@ExcelProperty("所报课程")private String courseName;@Schema(description = "上课时间")@ExcelProperty("上课时间")private LocalDateTime classTime;@Schema(description = "授课教师")@ExcelProperty("授课教师")private String teacherName;@Schema(description = "消课人")@ExcelProperty("消课人")private String cancelClassPerson;@Schema(description = "消课时间")@ExcelProperty("消课时间")private LocalDateTime cancelClassTime;@Schema(description = "创建时间")@ExcelProperty("创建时间")private LocalDateTime createTime;@Schema(description = "操作人", example = "王五")private String operaName;@Schema(description = "操作时间")private LocalDateTime operaTime;@Schema(description = "操作类型", example = "2")private String operaType;@Schema(description = "操作说明")private String operaExplain;@Schema(description = "实到人数")private Integer arrivedNum;@Schema(description = "应到人数")private Integer arrivingNum;@Schema(description = "点名操作人员")private String rollCallPerson;@Schema(description = "点名时间")private LocalDateTime rollCallTime;
}controller
@Tag(name = "管理后台 - 消课记录")
@RestController
@RequestMapping("/study/cancle-class")
@Validated
public class CancleClassController {@Resourceprivate CancleClassService cancleClassService;@GetMapping("/get")@Operation(summary = "获得消课记录")@Parameter(name = "id", description = "编号", required = true, example = "1024")@PreAuthorize("@ss.hasPermission('study:cancle-class:query')")public CommonResult<CancleClassRespVO> getCancleClass(@RequestParam("id") Long id) {CancleClassDO cancleClass = cancleClassService.getCancleClass(id);return success(BeanUtils.toBean(cancleClass, CancleClassRespVO.class));}@GetMapping("/findByIds")public List<CancleClassDO> findUsersByIds(@RequestParam Long id) {return cancleClassService.selectCheck(id);}@GetMapping("/get2")@Operation(summary = "获得消课记录2")@Parameter(name = "id", description = "编号", required = true, example = "1024")@PreAuthorize("@ss.hasPermission('study:cancle-class:query')")public CommonResult<CancleClassRespVO> getCancleClass2(@RequestParam("id") Long id) {CancleClassDO cancleClass = cancleClassService.getCancleClass2(id);return success(BeanUtils.toBean(cancleClass, CancleClassRespVO.class));}@GetMapping("/page")@Operation(summary = "获得消课记录分页")@PreAuthorize("@ss.hasPermission('study:cancle-class:query')")public CommonResult<PageResult<CancleClassRespVO>> getCancleClassPage(@Valid CancleClassPageReqVO pageReqVO) {PageResult<CancleClassDO> pageResult = cancleClassService.getCancleClassPage(pageReqVO);return success(BeanUtils.toBean(pageResult, CancleClassRespVO.class));}@GetMapping("/page2")@Operation(summary = "获得消课记录分页2")@PreAuthorize("@ss.hasPermission('study:cancle-class:query')")public CommonResult<PageResult<CancleClassRespVO>> getCancleClassPage2(@Valid CancleClassPageReqVO pageReqVO) {PageResult<CancleClassDO> pageResult = cancleClassService.getCancleClassPage2(pageReqVO);return success(BeanUtils.toBean(pageResult, CancleClassRespVO.class));}}CancleClassMapper
package com.todod.education.module.study.dal.mysql.cancleclass;import java.util.*;import com.baomidou.mybatisplus.core.metadata.IPage;
import com.todod.education.framework.common.pojo.PageResult;
import com.todod.education.framework.mybatis.core.query.LambdaQueryWrapperX;
import com.todod.education.framework.mybatis.core.mapper.BaseMapperX;
import com.todod.education.module.study.controller.admin.entranceexam.vo.EntranceExamPageReqVO;
import com.todod.education.module.study.dal.dataobject.cancleclass.CancleClassDO;
import com.todod.education.module.study.dal.dataobject.entranceexam.EntranceExamDO;
import org.apache.ibatis.annotations.Mapper;
import com.todod.education.module.study.controller.admin.cancleclass.vo.*;
import org.apache.ibatis.annotations.Param;/*** 消课记录 Mapper** @author 平台管理员*/
@Mapper
public interface CancleClassMapper extends BaseMapperX<CancleClassDO> {default PageResult<CancleClassDO> selectPage(CancleClassPageReqVO reqVO) {return selectPage(reqVO, new LambdaQueryWrapperX<CancleClassDO>().likeIfPresent(CancleClassDO::getClassName, reqVO.getClassName()).betweenIfPresent(CancleClassDO::getClassTime, reqVO.getClassTime()).betweenIfPresent(CancleClassDO::getCancelClassTime, reqVO.getCancelClassTime()).betweenIfPresent(CancleClassDO::getCreateTime, reqVO.getCreateTime()).orderByDesc(CancleClassDO::getId));}IPage<CancleClassDO> fetchPageResults(IPage<CancleClassDO> page, @Param("queryEntry") CancleClassPageReqVO pageReqVO);List<CancleClassDO> selectCheck(@Param("id") Long id);
}xml文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.todod.education.module.study.dal.mysql.cancleclass.CancleClassMapper"><select id="fetchPageResults" resultType="com.todod.education.module.study.dal.dataobject.cancleclass.CancleClassDO">SELECT tcm.class_name,tcm.id AS class_id,tcm.class_type,tcmc.teacherNames,tcmc.courseNames,tcms.studentsFROM teach_class_manage tcmINNER JOIN (SELECT tcmc.class_id,string_agg(htm.teacher_name, ',') AS teacherNames,string_agg(tcm.course_name, ',') AS courseNamesFROM teach_class_manage_course tcmcINNER JOIN hr_teacher_manage htm ON htm."id" = tcmc.teacher_idINNER JOIN teach_course_manage tcm ON tcm."id" = tcmc.course_idGROUP BY tcmc.class_id) tcmc ON tcm."id" = tcmc.class_idLEFT JOIN (SELECT tcms.class_id,COALESCE(COUNT(*), 0) AS studentsFROM teach_class_manage_student tcmsGROUP BY tcms.class_id) tcms ON tcm."id" = tcms.class_idWHERE 1 = 1 AND tcm.deleted = 0<if test=" queryEntry.stsStudentName != null and queryEntry.stsStudentName != '' and queryEntry.stsStudentName != 'null' ">AND ss.sts_student_name like '%${queryEntry.stsStudentName}'</if>ORDER BYtcm.create_time desc</select><select id="selectCheck" resultType="com.todod.education.module.study.dal.dataobject.cancleclass.CancleClassDO">SELECTtcm.class_name,ss.sts_student_name,ss.sts_phone,tcs.student_id,tcmc.course_id,tcm2.course_name,htm.teacher_nameFROMteach_class_manage tcmJOIN teach_class_manage_student tcs ON tcm.id = tcs.class_idJOIN study_student ss ON tcs.student_id = ss.id -- 这里假设study_student的id字段对应于student_idJOIN teach_class_manage_course tcmc ON tcm.id = tcmc.class_idJOIN teach_course_manage tcm2 ON tcmc.course_id = tcm2.idJOIN hr_teacher_manage htm ON tcmc.teacher_id = htm.idWHEREtcm.id = #{id}ORDER BYtcs.student_id, tcmc.course_id;</select></mapper>CancleClassService
package com.todod.education.module.study.service.cancleclass;import java.util.*;
import jakarta.validation.*;
import com.todod.education.module.study.controller.admin.cancleclass.vo.*;
import com.todod.education.module.study.dal.dataobject.cancleclass.CancleClassDO;
import com.todod.education.framework.common.pojo.PageResult;
import com.todod.education.framework.common.pojo.PageParam;/*** 消课记录 Service 接口** @author 平台管理员*/
public interface CancleClassService {/*** 获得消课记录** @param id 编号* @return 消课记录*/CancleClassDO getCancleClass(Long id);/*** 获得消课记录** @param id 编号* @return 消课记录*/CancleClassDO getCancleClass2(Long id);/*** 获得消课记录分页** @param pageReqVO 分页查询* @return 消课记录分页*/PageResult<CancleClassDO> getCancleClassPage(CancleClassPageReqVO pageReqVO);/*** 获得消课记录分页2** @param pageReqVO 分页查询* @return 消课记录分页*/PageResult<CancleClassDO> getCancleClassPage2(CancleClassPageReqVO pageReqVO);List<CancleClassDO> selectCheck(Long id);
}实现类
package com.todod.education.module.study.service.cancleclass;import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.mzt.logapi.context.LogRecordContext;
import com.mzt.logapi.service.impl.DiffParseFunction;
import com.mzt.logapi.starter.annotation.LogRecord;
import com.todod.education.module.study.controller.admin.monthexam.vo.MonthExamPageReqVO;
import com.todod.education.module.study.controller.admin.plan.vo.PlanSaveReqVO;
import com.todod.education.module.study.dal.dataobject.monthexam.MonthExamDO;
import com.todod.education.module.study.dal.dataobject.plan.PlanDO;
import org.springframework.stereotype.Service;
import jakarta.annotation.Resource;
import org.springframework.validation.annotation.Validated;
import org.springframework.transaction.annotation.Transactional;import java.util.*;
import com.todod.education.module.study.controller.admin.cancleclass.vo.*;
import com.todod.education.module.study.dal.dataobject.cancleclass.CancleClassDO;
import com.todod.education.framework.common.pojo.PageResult;
import com.todod.education.framework.common.pojo.PageParam;
import com.todod.education.framework.common.util.object.BeanUtils;import com.todod.education.module.study.dal.mysql.cancleclass.CancleClassMapper;import static com.todod.education.framework.common.exception.util.ServiceExceptionUtil.exception;
import static com.todod.education.module.study.enums.ErrorCodeConstants.*;
import static com.todod.education.module.system.enums.LogRecordConstants.*;/*** 消课记录 Service 实现类** @author 平台管理员*/
@Service
@Validated
public class CancleClassServiceImpl implements CancleClassService {@Resourceprivate CancleClassMapper cancleClassMapper;@Overridepublic CancleClassDO getCancleClass(Long id) {return cancleClassMapper.selectById(id);}@Overridepublic CancleClassDO getCancleClass2(Long id) {return cancleClassMapper.selectById(id);}@Overridepublic PageResult<CancleClassDO> getCancleClassPage(CancleClassPageReqVO pageReqVO) {return cancleClassMapper.selectPage(pageReqVO);}@Overridepublic PageResult<CancleClassDO> getCancleClassPage2(CancleClassPageReqVO pageReqVO) {IPage<CancleClassDO> page = new Page<>(pageReqVO.getPageNo(), pageReqVO.getPageSize());cancleClassMapper.fetchPageResults(page, pageReqVO);return new PageResult<>(page.getRecords(), page.getTotal());}@Overridepublic List<CancleClassDO> selectCheck(Long id) {return cancleClassMapper.selectCheck(id);}
}前端
index.vue
<template><div ><ContentWrap><!-- 搜索工作栏 --><el-formclass="-mb-15px":model="queryParams"ref="queryFormRef":inline="true"label-width="68px"><el-form-item label="班级名称" prop="className" style="width: 21.8%;"><el-inputv-model="queryParams.className"placeholder="请输入班级名称"clearable@keyup.enter="handleQuery"class="!w-240px"/></el-form-item><el-form-item label="上课时间" prop="classTime" style="width: 21.8%;"><el-date-pickerv-model="queryParams.classTime"value-format="YYYY-MM-DD HH:mm:ss"type="daterange"start-placeholder="开始日期"end-placeholder="结束日期":default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"class="!w-240px"/></el-form-item><el-form-item label="消课时间" prop="cancelClassTime" style="width: 21.8%;"><el-date-pickerv-model="queryParams.cancelClassTime"value-format="YYYY-MM-DD HH:mm:ss"type="daterange"start-placeholder="开始日期"end-placeholder="结束日期":default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"class="!w-240px"/></el-form-item><el-form-item label="所报课程" prop="reportCourse" style="width: 21.8%;"><el-selectv-model="queryParams.reportCourse"placeholder="请选择所报课程"clearableclass="!w-240px"><el-optionv-for="dict in getIntDictOptions(DICT_TYPE.REPORT_COURSE)":key="dict.value":label="dict.label":value="dict.value"/></el-select></el-form-item><el-form-item><el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button><el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button><!-- <el-buttontype="success"plain@click="handleExport":loading="exportLoading"v-hasPermi="['study:cancle-class:export']"><Icon icon="ep:download" class="mr-5px" /> 导出</el-button> --><!-- <el-button@click="classCheck"type="primary">发送课时核对</el-button> --><el-button plain @click="outerVisible = true">发送课时核对</el-button><el-dialog v-model="outerVisible" title="发送课时核对" width="800" ref="courseCheck" :studentIds="studentId"><span>要为所选中的学员发送课时记录么</span><el-dialogv-model="innerVisible"width="500"title="发送成功"append-to-body><span>发送成功</span></el-dialog><template #footer><div class="dialog-footer"><el-button @click="outerVisible = false">取消</el-button><el-button type="primary" @click="innerVisible = true">确认</el-button></div></template></el-dialog></el-form-item></el-form></ContentWrap><!-- 列表 --><ContentWrap><el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"><el-table-columnlabel="序号"type="index"header-align="center"align="center"width="60px"fixed/><el-table-column type="selection" width="55" /><el-table-column label="班级名称" align="center" prop="className" /><el-table-column label="班级类型" align="center" prop="classType"><template #default="scope"><dict-tag :type="DICT_TYPE.COURSE_TYPE" :value="scope.row.classType" /></template></el-table-column><el-table-column label="所报课程" align="center" prop="courseName"><template #default="scope"><dict-tag :type="DICT_TYPE.REPORT_COURSE" :value="scope.row.courseName" /></template></el-table-column><el-table-columnlabel="上课时间"align="center"prop="classTime":formatter="dateFormatter3"width="180px"/><el-table-column label="授课教师" align="center" prop="teacherName" /><el-table-column label="消课人" align="center" prop="cancelClassPerson" /><el-table-columnlabel="消课时间"align="center"prop="cancelClassTime":formatter="dateFormatter3"width="180px"/><el-table-column label="操作" align="center"><template #default="scope"><el-buttonlinktype="primary"@click="cancleCourse('update', scope.row.classId)">消课</el-button><el-buttonlinktype="primary"@click="details('update', scope.row.classId)"v-hasPermi="['study:add-course-record:query']">详情</el-button><el-buttonlinktype="primary"@click="operate('update', scope.row.classId)"v-hasPermi="['study:add-course-record:query']">日志</el-button></template></el-table-column></el-table><!-- 分页 --><Pagination:total="total"v-model:page="queryParams.pageNo"v-model:limit="queryParams.pageSize"@pagination="getList"/></ContentWrap>
</div><!-- 表单弹窗：添加/修改 --><CancleClassForm ref="formRef" @success="getList" /><!-- 表单弹窗：详情 --><el-drawerv-model="drawer"title="详情":direction="direction"v-if="drawer"size ="71%"class="drawer"destory-on-close><DetailForm ref="detailRef" :detailId="detailId"/></el-drawer><!-- 表单弹窗：详情 --><el-drawerv-model="drawer2"title="日志":direction="direction"v-if="drawer2"size ="71%"class="drawer"destory-on-close><Operate ref="operateRef" :detailId="detailId"/></el-drawer><ClassCkeck ref="detailRef2" @success="getList" /></template><script setup lang="ts">
import { dateFormatter,dateFormatter2,dateFormatter3 } from '@/utils/formatTime'
import download from '@/utils/download'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { CancleClassApi, CancleClassVO } from '@/api/study/cancleclass'
import DetailForm from '@/views/study/cancleclassPlus/Index.vue'
import Operate from '@/views/study/cancleclassPlus+/Index.vue'
import CancleClassForm from './CancleClassForm.vue'
import ClassCkeck from './ClassCkeck.vue'
import type { DrawerProps } from 'element-plus'
import type { Action } from 'element-plus'
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus'
const outerVisible = ref(false)
const innerVisible = ref(false)/** 消课记录 列表 */
defineOptions({ name: 'CancleClass' })const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const direction = ref<DrawerProps['direction']>('rtl')
const loading = ref(true) // 列表的加载中
const list = ref<CancleClassVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({pageNo: 1,pageSize: 10,classId: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中/** 查询列表 */
const getList = async () => {loading.value = truetry {const data = await CancleClassApi.getCancleClassPage2(queryParams)list.value = data.listtotal.value = data.total} finally {loading.value = false}
}const classref = ref()/** 搜索按钮操作 */
const handleQuery = () => {queryParams.pageNo = 1getList()
}
// 课时核对
const courseCkeck = ref()
const courseCkeck1 = () => {if(studentId.value.length == 0){message.warning('请选择要消课的学员')}else{courseCkeck.value.open()}}
/** 查看详情 */
const detailRef = ref()
const drawer = ref(false)
const detailId = ref()
const details = (type: string, classId?: number) => {drawer.value=truedetailId.value=classId
}
const detailRef2 = ref()
const cancleCourse = (type: string, classId?: number) => {detailRef2.value.open(type, classId)}
/** 查看详情 */
const operateRef = ref()
const drawer2 = ref(false)
const operate = (type: string, id?: number) => {drawer2.value=truedetailId.value=id
}/** 重置按钮操作 */
const resetQuery = () => {queryFormRef.value.resetFields()handleQuery()
}/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {formRef.value.open(type, id)
}/** 删除按钮操作 */
const handleDelete = async (id: number) => {try {// 删除的二次确认await message.delConfirm()// 发起删除await CancleClassApi.deleteCancleClass(id)message.success(t('common.delSuccess'))// 刷新列表await getList()} catch {}
}// /** 导出按钮操作 */
// const handleExport = async () => {
// try {
// // 导出的二次确认
// await message.exportConfirm()
// // 发起导出
// exportLoading.value = true
// const data = await CancleClassApi.exportCancleClass(queryParams)
// download.excel(data, '消课记录.xls')
// } catch {
// } finally {
// exportLoading.value = false
// }
// }/** 初始化 **/
onMounted(() => {getList()
})
</script>ClassCkeck.vue
<template><Dialog :title="dialogTitle" v-model="dialogVisible">
<!-- 列表 --><ContentWrap><el-buttontype="primary"plain>消课</el-button><el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"><el-table-columnlabel="序号"type="index"header-align="center"align="center"width="60px"fixed/><el-table-column label="班级名称" align="center" prop="className" /><el-table-column label="班级类型" align="center" prop="classType"><template #default="scope"><dict-tag :type="DICT_TYPE.COURSE_TYPE" :value="scope.row.classType" /></template></el-table-column><el-table-column label="学生姓名" align="center" prop="stsStudentName" /><el-table-column label="手机号" align="center" prop="stsPhone" /><el-table-column label="所报课程" align="center" prop="courseName" /><el-table-columnlabel="上课时间"align="center"prop="classTime":formatter="dateFormatter"width="180px"/><el-table-column label="授课教师" align="center" prop="teacherName" /></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 { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { CancleClassApi, CancleClassVO } from '@/api/study/cancleclass'
import { ref } from 'vue';/** 消课记录 列表 */
defineOptions({ name: 'CancleClass' })
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,})const open = async (type: string, classId?: number) => {dialogVisible.value = trueloading.value = true
try {console.log(await CancleClassApi.getCancleClassDetail(7))const data = await CancleClassApi.getCancleClassDetail(classId)console.log(data,'sadsads')list.value = data
} finally {loading.value = false
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 查询列表 */
// const getList = async () => {// }// onMounted(() => {
// getList()
// })
</script>
<style scoped lang="scss">:deep(.el-dialog__body){width: 1000px !important;height: 1000px !important;
}
</style>index.ts(api)
import request from '@/config/axios'// 消课记录 VO
export interface CancleClassVO {id: number // 主键idclassName: string // 班级名称classType: string // 班级类型reportCourse: string // 所报课程classTime: Date // 上课时间classTeacher: string // 授课教师cancelClassPerson: string // 消课人cancelClassTime: Date // 消课时间studentName: string // 学员姓名phone: string // 手机号arrivedNum: number // 实到人数arrivingNum: number // 应到人数rollCallPerson: string // 点名操作人员rollCallTime: Date // 店面时间operaName: string // 操作人operaTime: Date // 操作时间operaType: string // 操作类型operaExplain: string // 操作说明
}// 消课记录 API
export const CancleClassApi = {// 查询消课记录分页getCancleClassPage: async (params: any) => {return await request.get({ url: `/study/cancle-class/page`, params })},// 查询消课记录分页getCancleClassPage2: async (params: any) => {return await request.get({ url: `/study/cancle-class/page2`, params })},// 查询消课记录详情getCancleClass: async (id: number) => {return await request.get({ url: `/study/cancle-class/get?id=` + id })},// 查询消课记录详情getCancleClass2: async (id: number) => {return await request.get({ url: `/study/cancle-class/get2?id=` + id })},// 查询消课记录详情getCancleClassDetail: async (id: number) => {return await request.gets({ url: `/study/cancle-class/findByIds?id=` + id })},// 新增消课记录createCancleClass: async (data: CancleClassVO) => {return await request.post({ url: `/study/cancle-class/create`, data })},// 修改消课记录updateCancleClass: async (data: CancleClassVO) => {return await request.put({ url: `/study/cancle-class/update`, data })},// 删除消课记录deleteCancleClass: async (id: number) => {return await request.delete({ url: `/study/cancle-class/delete?id=` + id })},// 导出消课记录 ExcelexportCancleClass: async (params) => {return await request.download({ url: `/study/cancle-class/export-excel`, params })},
}
axios.index.ts
import { service } from './service'import { config } from './config'const { default_headers } = configconst request = (option: any) => {const { url, method, params, data, headersType, responseType, ...config } = optionreturn service({url: url,method,params,data,...config,responseType: responseType,headers: {'Content-Type': headersType || default_headers}})
}
export default {get: async <T = any>(option: any) => {const res = await request({ method: 'GET', ...option })return res.data as unknown as T},gets: async <T = any>(option: any) => {const res = await request({ method: 'GET', ...option })return res as unknown as T},post: async <T = any>(option: any) => {const res = await request({ method: 'POST', ...option })return res.data as unknown as T},postOriginal: async (option: any) => {const res = await request({ method: 'POST', ...option })return res},delete: async <T = any>(option: any) => {const res = await request({ method: 'DELETE', ...option })return res.data as unknown as T},put: async <T = any>(option: any) => {const res = await request({ method: 'PUT', ...option })return res.data as unknown as T},download: async <T = any>(option: any) => {const res = await request({ method: 'GET', responseType: 'blob', ...option })return res as unknown as Promise<T>},upload: async <T = any>(option: any) => {option.headersType = 'multipart/form-data'const res = await request({ method: 'POST', ...option })return res as unknown as Promise<T>},download1: async <T = any>(option: any) => {const res = await request({ method: 'POST', responseType: 'blob', ...option })return res as unknown as Promise<T>}
}
相关文章：
SpringCloud+Vue3多对多，多表联查
♥️作者：小宋1021 🤵♂️个人主页：小宋1021主页 ♥️坚持分析平时学习到的项目以及学习到的软件开发知识，和大家一起努力呀！！！ 🎈🎈加油！ 加油！…...
麒麟系统信创改造
麒麟系统信创改造 一、查看操作系统架构下载相应的依赖，压缩包1、查看Linux系统架构、CPU（1）uname -m（2）lscpu（3）cat /proc/cpuinfo（4）arch（5）getconf LONG_BIT（6）dmidecode2、根据Linux系统架构、CPU的差异进行下载相关依赖，看第二项二、以下是根据本系统的aarc…...
【Android】ListView和RecyclerView知识总结
文章目录 ListView步骤适配器AdpterArrayAdapterSimpleAdapterBaseAdpter效率问题 RecyclerView具体实现不同布局形式的设置横向滚动瀑布流网格 点击事件 ListView ListView 是 Android 中的一种视图组件，用于显示可滚动的垂直列表。每个列表项都是一个视图对象&…...
泛域名绑定到wordpress网站二级目录
要将WordPress的泛域名绑定到二级目录，你需要在你的服务器上修改Apache或Nginx配置文件。以下是两种最常见的服务器配置的示例： Apache服务器 编辑你的虚拟主机配置文件，通常位于/etc/apache2/sites-available/目录下。 <VirtualHost *…...
8、从0搭建企业门户网站——网站部署
目录 正文 1、域名解析 2、云服务器端口授权 3、Mysql数据库初始化 4、上传网站软件包 5、Tomcat配置 6、运行Tomcat 7、停止Tomcat 8、部署后发现验证码无法使用 完毕！ 正文 当云服务器租用、域名购买和软件开发都完成后，我们就可以开始网站部署上线，ICP备案会长…...
uniapp中出现图片过小会与盒子偏离
结论：在image的父盒子中加上display: flex，原因不清楚 出问题的代码和图片如下： <template><view style" background-color: greenyellow; height: 10rpx;width: 10rpx;"><image :src"imgSrc.seatnull" …...
MySQL练手 --- 1934. 确认率
题目链接：1934. 确认率 思路 由题可知，两个表，一个表为Signups注册表，另一个表为Confirmations信息确认表，表的关联关系为 一对一，且user_id作为两个表的连接条件（匹配字段）&#…...
【OpenCV C++20 学习笔记】扫描图片数据
扫描图片数据 应用情景图像数据扫描的难点颜色空间缩减（color space reduction）查询表 扫描算法计算查询表统计运算时长连续内存3种扫描方法C风格的扫描方法迭代器方法坐标方法LUT方法 算法效率对比结论 应用情景 图像数据扫描的难点 在上一篇文章《基…...
LeetCode：爬楼梯（C语言）
1、问题概述：每次可以爬 1 或 2 个台阶。有多少种不同的方法可以爬到楼顶 2、示例 示例 1： 输入：n 2 输出：2 解释：有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2： 输入：n 3 输出&a…...
银河麒麟（arm64）环境下通过docker安装postgis3，并实现数据整体迁移
银河麒麟(arm64)环境下通过docker安装postgis3，并实现数据整体迁移 硬件配置：麒麟9006C 系统环境：银河麒麟桌面版v10 sp1 数据库：postgresql11+postgis3.0 具体的步骤参考https://blog.csdn.net/qq_34817440/article/details/103914574 -----主要操作-----------------…...
C语言 | Leetcode C语言题解之第278题第一个错误的版本
题目： 题解： int firstBadVersion(int n) {int left 1, right n;while (left < right) { // 循环直至区间左右端点相同int mid left (right - left) / 2; // 防止计算时溢出if (isBadVersion(mid)) {right mid; // 答案在区间 [left, mid] 中…...
京东科技集团将在香港发行与港元1:1挂钩的加密货币稳定币
据京东科技集团旗下公司京东币链科技(香港)官网信息，京东稳定币是一种基于公链并与港元(HKD) 1:1挂钩的稳定币，将在公共区块链上发行，其储备由高度流动且可信的资产组成，这些资产安全存放于持牌金融机构的独立账户中，通…...
Vue 实现电子签名并生成签名图片
目录 前言项目结构代码实现 安装依赖创建签名画布组件生成签名图片 总结相关阅读 1. 前言 电子签名在现代Web应用中越来越普遍，例如合同签署、确认表单等。本文将介绍如何使用Vue.js实现一个简单的电子签名功能，并将签名生成图片。 2. 项目结构 项…...
Visual Studio 2022美化
说明： VS版本：Visual Studio Community 2022 背景美化 【扩展】【管理扩展】搜索“ClaudiaIDE”，【下载】，安装完扩展要重启VS 在wallhaven下载壁纸图片作为文本编辑器区域背景图片 【工具】【选项】搜索ClaudiaIDEÿ…...
[CISCN2019 华东南赛区]Web11
进来先做信息收集，右上角显示当前ip，然后有api的调用地址和请求包的格式以及最重要的是最下面的smarty模版，一看到这个就得想到smarty模版注入 测试了一下两个api都无法访问 直接切到数据包看看能不能通过XFF来修改右上角ip 成功修改&#x…...
【图形图像-1】SDF
在图形图像处理中，SDF（Signed Distance Field，带符号的距离场）是一种表示图形轮廓和空间距离的数学结构。它通常用于计算机图形学、文本渲染、碰撞检测和物理模拟等领域。 SDF（Signed Distance Field，带符号…...
苍穹外卖01
0. 配置maven (仅一次的操作 1.项目导入idea 2. 保证nginx服务器运行 （nginx.exe要在非中文的目录下） 开启服务： start nginx 查看任务进程是否存在： tasklist /fi "imagename eq nginx.exe" 关闭ngi…...
ElasticSearch(三)—文档字段参数设置以及元字段
一、 字段参数设置 analyzer： 指定分词器。elasticsearch 是一款支持全文检索的分布式存储系统，对于 text类型的字段，首先会使用分词器进行分词，然后将分词后的词根一个一个存储在倒排索引中，后续查询主要是针对词根…...
ARM功耗管理之压力测试和PM_DEBUG实验
安全之安全(security)博客目录导读 ARM功耗管理精讲与实战汇总参见：Arm功耗管理精讲与实战 思考：睡眠唤醒实验？压力测试？Suspend-to-Idle/RAM/Disk演示？ 1、实验环境准备 2、软件代码准备 3、唤醒源 4、Suspend-…...
ESP8266用AT指令实现连接MQTT
1准备工作 硬件（ESP8266）连接电脑 硬件已经烧入了MQTT透传固件 2实现连接 2-1（进入AT模式） 打开串口助手发送如下指令 AT 2-2（复位） ATRST 2-3（开启DHCP，自动获取IP&#x…...
人工智能与机器学习原理精解【5】
文章目录 最优化基础理论特征值（Eigenvalue）特征向量（Eigenvector）特征值和特征向量的重要性计算方法特征值一、特征值分解的定义二、特征值分解的算法三、特征值分解的例子 正定矩阵Hessian矩阵的特征值Hessian矩阵的含义Hessian…...
为什么用LeSS？
实现适应性 LeSS是一个产品开发的组织系统，旨在最大化一个组织的适应性。关于适应性（或者敏捷性，也就是敏捷开发的初衷）我们是指优化： 以相对低的成本改变方向的能力，主要是基于通过频繁交付产生的探索。从…...
力扣高频SQL 50题（基础版）第七题
文章目录 力扣高频SQL 50题（基础版）第七题1068. 产品销售分析 I题目说明思路分析实现过程准备数据：实现方式：结果截图:总结： 力扣高频SQL 50题（基础版）第七题 1068. 产品销售分析 I 题目说明 …...
【音视频】一篇文章区分直播与点播、推流与拉流
文章目录 前言直播和点播的概念及区别直播是什么点播是什么 直播和点播的区别举例说明推流与拉流推流是什么拉流是什么 推流与拉流的区别举例说明 总结 前言 在音视频领域，直播、点播、推流和拉流是常见的概念，每个术语都有其特定的含义和应用场景。了解…...
3d动画软件blender如何汉化？（最新版本4.2）
前言 Blender是一个非常强大的3d动画软件，总能受到大量工作者的青睐。 但是，对于新手来说（尤其是英语学渣），语言是个难事。大部分blender打开时都是英文，对新手使用具有一定的障碍。因此，我们需…...
C++学习笔记04-补充知识点（问题-解答自查版）
前言 以下问题以Q&A形式记录，基本上都是笔者在初学一轮后，掌握不牢或者频繁忘记的点 Q&A的形式有助于学习过程中时刻关注自己的输入与输出关系，也适合做查漏补缺和复盘。 本文对读者可以用作自查，答案在后面࿰…...
Vue el-table的自定义排序返回值为null，设置刷新页面保持排序标志，导航时elementui组件不更新
自定义排序使用sort-change"sortChange"监听，表列需设置为sortable“custom”（自定义） <el-table:data"tableData"bordersort-change"sortChange":default-sort"{prop:sortProp,order:sortOrder}&quo…...
一起笨笨的学C ——16链表基础
目录 目录 前言 正文 链表定义： 基本创建链表程序： 链表结点插入： 对角线记忆法： 画图理解法： 链表结点删除： 链表销毁： 后语 前言 链表理解方法分享，愿你的大脑也能建立一个…...
信息学奥赛一本通1917：【01NOIP普及组】装箱问题
1917：【01NOIP普及组】装箱问题 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 4178 通过数: 2473 【题目描述】 有一个箱子容量为VV(正整数，0≤V≤200000≤V≤20000），同时有n个物品（0≤n≤300≤n≤30),…...
android user 版本如何手动触发dump
项目需要在android user版本增加手动触发dump方法，用以确认user版本发生dump后系统是重启还是真正发生dump卡机！ 本文以qcom平台项目为例描述所做的修改，留下足迹以备后忘。 闲言少叙，开整上干货： 一、修改bin文件 …...