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文件 …...
RedHat Linux 7.5 安装 mssql-server
RedHat Linux 7.5 安装 mssql-server 1、安装部署所需的依赖包 [rootlocalhost ~]# yum -y install libatomic bzip2 gdb cyrus-sasl cyrus-sasl-gssapi Loaded plugins: ulninfo Resolving Dependencies --> Running transaction check ---> Package bzip2.x86_64 0:1…...
Vue的SSR和预渲染:提升首屏加载速度与SEO效果
引言 在现代Web应用开发中,首屏加载速度和搜索引擎优化(SEO)是衡量应用性能的重要指标。Vue.js 作为流行的前端框架,提供了服务器端渲染(SSR)和预渲染(prerendering)两种技术来提升这些指标。本文将深入探讨如何使用 Vue 的 SSR 和预渲染技术,提供详细的代码示例和最…...
若依ruoyi+AI项目二次开发(智能售货机运营管理系统)
(一) 帝可得 - 产品原型 - 腾讯 CoDesign (qq.com)...
【SpringBoot】 4 Thymeleaf
官网 https://www.thymeleaf.org/ 介绍 Thymeleaf 是一个适用于 Web 和独立环境的现代服务器端 Java 模板引擎。 模板引擎:为了使用户界面和业务数据分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎会生成一个标准的 html 文档…...
动静资源的转发操作
目录 Nginx中的location指令 静态资源的转发 动态资源的转发 注意事项 深入研究 如何在Nginx中实现对特定后缀文件的静态资源进行反向代理? Nginx中location指令的优先级是怎样确定的? 为什么在使用proxy_pass时要区分是否带有斜杠? N…...
Windows系统安全加固方案:快速上手系统加固指南(上)
无论是个人用户、小型企业还是大型机构,都需要采取措施保护其计算机系统免受各种威胁、系统加固常见的应用场景有个人用户、 AWD 比赛、公共机构以及企业环境等等 文档目录 一、Windows常用命令二、Windows常见端口三、账户安全3.1 默认账户安全3.2 按照用户分配账户…...
git连接远程仓库
一、本地新建代码,上传到远程仓库 1.git init #初始化本地仓库 2.git remote -v #查看当前仓库的远程地址 3.git remote add origin 远程仓库的URL 4.git branch master / git branch dev 创建 主分支或者 dev 分支 5.git checkout master/dev. 切换到主分支或者dev 分支…...
算法-----递归~~搜索~~回溯(宏观认识)
目录 1.什么是递归 1.1二叉树的遍历 1.2快速排序 1.3归并排序 2.为什么会用到递归 3.如何理解递归 4.如何写好一个递归 5.什么是搜索 5.1深度(dfs)优先遍历&优先搜索 5.2宽度(bfs)优先遍历&优先搜索 6.回溯 1.什…...
【云原生】Docker搭建知识库文档协作平台Confluence
目录 一、前言 二、企业级知识库文档工具部署形式 2.1 开源工具平台 2.1.1 开源工具优点 2.1.2 开源工具缺点 2.2 私有化部署 2.3 混合部署 三、如何选择合适的知识库平台工具 3.1 明确目标和需求 3.2 选择合适的知识库平台工具 四、Confluence介绍 4.2 confluence特…...
序列化与反序列化的本质
1. 将对象存储到本地 假如有一个student类,我们定义了好几个对象,想要把这些对象存储下来,该怎么办呢 from typing import List class Student:name: strage: intphones: List[str] s1 Student("xiaoming",10,["huawei&quo…...
飞牛爬虫FlyBullSpider 一款简单方便强大的爬虫,限时免费 特别适合小白!用它爬下Boss的2024年7月底Java岗位,分析一下程序员就业市场行情
一、下载安装FlyBullSpider 暂时支持Window,现在只在Win11上做过测试 1 百度 点击百度网盘 下载 链接:https://pan.baidu.com/s/1gSLKYuezaZgd8iqrXhk8Kg 提取码:Fly6 2 csdn https://download.csdn.net/download/fencer911/89584687 二、体验初…...
EXCEL 排名(RANK,COUNTIFS)
1.单列排序 需求描述:如有下面表格,需要按笔试成绩整体排名。 解决步骤: 我们使用RANK函数即可实现单列整体排名。 Number 选择第一列。 Ref 选择这一整列(CtrlShift向下箭头、再按F4)。 "确定"即可计算…...
【踩坑系列-JS】iframe中的url参数获取
Author:赵志乾 Date:2024-07-24 Declaration:All Right Reserved!!! 1. 问题描述 系统A的页面中以iframe的方式嵌入了系统B的页面,并需要将A页面url中的参数传递给B页面。 最初的实现方式是&am…...
测试工作中常听到的名词解释 : )
背景 很多名称其实看字面意思都挺抽象的,有时看群里的测试大佬在不停蹦这类术语,感觉很高大上,但其实很多你应该是知道的,只不过没想到别人是这样叫它的。又或者你的主编程语言不是 Java,所以看不懂他们在讲啥&#x…...
Linux内网离线用rsync和inotify-tools实现文件夹文件单向同步和双向同步
lsyncd实现方式可参考:https://www.jianshu.com/p/c075ccf89516 安装文件下载:相关文件下载 rsync默认都有,所以没有提供。 服务端和客户端均操作 服务端:双向同步其实都是服务端,只是单向同步时稍有区别 客户端&am…...
Spring Security学习笔记(二)Spring Security认证和鉴权
前言:本系列博客基于Spring Boot 2.6.x依赖的Spring Security5.6.x版本 上一篇博客介绍了Spring Security的整体架构,本篇博客要讲的是Spring Security的认证和鉴权两个重要的机制。 UsernamePasswordAuthenticationFilter和BasicAuthenticationFilter是…...
产品经理NPDP好考吗?
NPDP是新产品开发专业人员的资格认证,对于希望在产品管理领域取得认可的专业人士来说,NPDP认证是一项重要的资格。 那么,产品经理考取NPDP资格认证究竟难不难呢? 首先,NPDP考试的难易程度取决于考生的背景和准备情况…...
【C++】:红黑树的应用 --- 封装map和set
点击跳转至文章:【C】:红黑树深度剖析 — 手撕红黑树! 目录 前言一,红黑树的改造1. 红黑树的主体框架2. 对红黑树节点结构的改造3. 红黑树的迭代器3.1 迭代器类3.2 Begin() 和 End() 四,红黑树相关接口的改造4.1 Find…...
unity美术资源优化(资源冗余,主界面图集过多)
图片资源冗余: UPR unity的性能优化工具检查资源 1.检查纹理读/写标记 开启纹理资源的读/写标志会导致双倍的内存占用 检查Inspector -> Advanced -> Read/Write Enabled选项 2.检查纹理资源alpha通道 如果纹理的alpha通道全部为0,或者全部为2…...
【git】github中的Pull Request是什么
在 Git 中,"pull request"(简称 PR)是一种在分布式版本控制系统中使用的功能,特别是在使用 GitHub、GitLab、Bitbucket 等基于 Git 的代码托管平台时。Pull Request 允许开发者请求将他们的代码更改合并到另一个分支&am…...