SpringCloud+Vue3多对多,多表联查

avatar
作者
猴君
阅读量:0

♥️作者:小宋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      */     @TableId     private 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 {      @Resource     private 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.students          FROM teach_class_manage tcm         INNER JOIN (         SELECT tcmc.class_id,string_agg(htm.teacher_name, ',') AS teacherNames,string_agg(tcm.course_name, ',') AS courseNames          FROM teach_class_manage_course tcmc         INNER JOIN hr_teacher_manage htm ON htm."id" = tcmc.teacher_id         INNER JOIN teach_course_manage tcm ON tcm."id" = tcmc.course_id         GROUP BY tcmc.class_id         ) tcmc ON tcm."id" = tcmc.class_id         LEFT JOIN (         SELECT tcms.class_id,COALESCE(COUNT(*), 0) AS students          FROM teach_class_manage_student tcms         GROUP BY tcms.class_id         ) tcms ON  tcm."id" = tcms.class_id         WHERE 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 BY         tcm.create_time desc     </select>      <select id="selectCheck" resultType="com.todod.education.module.study.dal.dataobject.cancleclass.CancleClassDO">         SELECT         tcm.class_name,         ss.sts_student_name,         ss.sts_phone,         tcs.student_id,         tcmc.course_id,         tcm2.course_name,         htm.teacher_name         FROM         teach_class_manage tcm         JOIN teach_class_manage_student tcs ON tcm.id = tcs.class_id         JOIN study_student ss ON tcs.student_id = ss.id  -- 这里假设study_student的id字段对应于student_id         JOIN teach_class_manage_course tcmc ON tcm.id = tcmc.class_id         JOIN teach_course_manage tcm2 ON tcmc.course_id = tcm2.id         JOIN hr_teacher_manage htm ON tcmc.teacher_id = htm.id         WHERE         tcm.id = #{id}         ORDER BY         tcs.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 {      @Resource     private CancleClassMapper cancleClassMapper;     @Override     public CancleClassDO getCancleClass(Long id) {         return cancleClassMapper.selectById(id);     }      @Override     public CancleClassDO getCancleClass2(Long id) {         return cancleClassMapper.selectById(id);     }      @Override     public PageResult<CancleClassDO> getCancleClassPage(CancleClassPageReqVO pageReqVO) {         return cancleClassMapper.selectPage(pageReqVO);     }      @Override     public 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());     }      @Override     public List<CancleClassDO> selectCheck(Long id) {         return cancleClassMapper.selectCheck(id);     } }

前端

index.vue

<template>     <div >   <ContentWrap>     <!-- 搜索工作栏 -->     <el-form       class="-mb-15px"       :model="queryParams"       ref="queryFormRef"       :inline="true"       label-width="68px"     >       <el-form-item label="班级名称" prop="className" style="width: 21.8%;">         <el-input           v-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-picker           v-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-picker           v-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-select           v-model="queryParams.reportCourse"           placeholder="请选择所报课程"           clearable           class="!w-240px"         >         <el-option             v-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-button           type="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-dialog       v-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-column     label="序号"     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-column         label="上课时间"         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-column         label="消课时间"         align="center"         prop="cancelClassTime"         :formatter="dateFormatter3"         width="180px"       />       <el-table-column label="操作" align="center">         <template #default="scope">           <el-button               link               type="primary"           @click="cancleCourse('update', scope.row.classId)"            >               消课            </el-button>           <el-button               link               type="primary"               @click="details('update', scope.row.classId)"               v-hasPermi="['study:add-course-record:query']"            >               详情            </el-button>            <el-button               link               type="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-drawer     v-model="drawer"     title="详情"     :direction="direction"     v-if="drawer"     size ="71%"     class="drawer"     destory-on-close   >     <DetailForm  ref="detailRef"  :detailId="detailId"/>   </el-drawer>     <!-- 表单弹窗:详情 -->    <el-drawer     v-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 = true   try {     const data = await CancleClassApi.getCancleClassPage2(queryParams)     list.value = data.list     total.value = data.total   } finally {     loading.value = false   } }  const classref = ref()  /** 搜索按钮操作 */ const handleQuery = () => {   queryParams.pageNo = 1   getList() } // 课时核对 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=true   detailId.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=true   detailId.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-button           type="primary"           plain                   >           消课         </el-button>   <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">     <el-table-column     label="序号"     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-column       label="上课时间"       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 = true   loading.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 // 主键id   className: 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 })   },    // 导出消课记录 Excel   exportCancleClass: 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 } = config  const request = (option: any) => {   const { url, method, params, data, headersType, responseType, ...config } = option   return 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>   } } 

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!