SpringCloud+Vue3多对多，多表联查

于 2024-07-27 17:21:33 发布
阅读量763 收藏 12
点赞数 23
文章标签： spring cloud spring 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50684356/article/details/140738148
版权

♥️作者：小宋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>
  }
}

小宋1021
关注
  • 23
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Cloud + Vue 开发企业级在线视频课程系统课程【升级版17章全】
10-21
Spring Cloud + Vue 开发企业级在线视频课程系统课程【升级版17章全】 课程用当下热门的Spring Cloud和Vue，带你一起开发企业级的在线视频课程系统，了解视频学习系统的核心业务特色，用一门课程掌握前后端技术，并...
course:Spring Cloud + Vue 企业级在线视频课程系统
04-30
【标题】"Spring Cloud + Vue 企业级在线视频课程系统" 涵盖了现代互联网应用开发中的两个关键技术和框架，即Spring Cloud和Vue.js。Spring Cloud是微服务架构的首选工具集，而Vue.js则是一款高效、轻量级的前端...
spring-cloud+ nacos+feign 增删改查（多表）
Dwiwhwjd的博客
11-17 2976
spring-cloud+ nacos+feign 增删改查（多表） 环境准备 数据库 学生自行创建数据库，根据提供的sql创建表和数据,每个表单独一个数据库 后台 学生自行搭建SpringCloud+Feign+Nacos+GateWay+MyBatis后台环境 前台 学生自行创建前台vue环境，实现测试要求 后端：以book和category为例 如图所示：book 是主，category是从 book.pom文件 和category.pom文件 <properties>
Springboot+Flask+Neo4j+Vue2+Vuex+Uniapp+Mybatis+Echarts+Swagger+JWT+Nginx+VueRouter综合项目学习笔记【包括项目部署】
qq_51201910的博客
07-15 1523
Neo4j高性能图数据库从入门到实战医学知识图谱问答系统neo4j知识图谱 Vue+flask 中药中医方剂大数据可视化系统ECharts数据可视化项目、D3js数据可视化入门D3.js展示地址：数据可视化子绝父相立即执行函数(function(){})();ECharts官网：Apache ECharts随屏幕自适应变化 拐点 B站pink老师 二选一：速成教程Flask web框架实战爬取网站：http://www.zhongyoo.com/name/数据处理：pandas提取关键字：textrank、
SpringCloud---SSO单点登录
一睹人间盛世颜
06-15 2252
文章目录学习流程服务设计创建sso父工程创建sso-system子工程创建sso-auth子工程创建sso-resource子工程创建sso-gateway子工程创建sso-ui前端业务子工程数据库表结构设计sql语句方案一: 单次查询方案二: 嵌套查询方案三: 多表关联查询SSO-system业务实现概述controllerserviceUserServiceUserServiceImplpojoUserdaoUserMapper测试SSO-auth业务实现概述一pom依赖yml配置启动类测试一servi
结合电商模式打造校园交易平台SpringCloud项目环境搭建+项目流程（基础篇）
xjx666666的博客
10-17 2090
自定义校验有三步：第一步是编写一个自定义的校验注解，它有三个必须的属性。第二步是编写一个自定义的校验器。第三步是把自定义的注解和自定义的校验器进行关联。具体做法是在我们自定义的注解上的@Constraint注解配置它的validatedBy属性值为自定义的校验器的class类。
基于JPA实现多表连接查询
weixin_44157608的博客
08-21 6885
基于 JPA 显示城市信息一、JPAJPA 定义二、任务实战1.项目结构2.项目配置信息3.实体4.映射5.控制器6.UI三、效果图 一、JPA JPA 定义 Java 持久化 API Java 官方定义的 ORM 规范，只是一套规范，并没有提供底层的实现（基于抽象工厂设计模式，将定义与实现解耦），Hibernate 、TopLink 都是 JPA 的提供商，它们实现了 JPA 规范 JPA 基于注解的方式实现了 实体类 到 关系表 之间的映射 @Entity @Table @Id @Column @O
vue和SpringBoot搭建项目(原创)
m0_54560405的博客
01-12 2033
1.element官网https://element.eleme.cn/#/zh-CN/component/installation2.element介绍Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。使用 Element 前提必须要有 Vue。组件：组成网页的部件，例如 超链接、按钮、图片、表格等等~3.element下载4.element引入推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。在main.js中引入5.vue中使用
基于Vue+SpringBoot的电影订票系统
Q1744828575的博客
11-28 830
6.1总结本课题阐述了前后端分离模式进行开发电影院订票系统的全过程，前端使用技术栈Vue加上ElementUI支撑整个页面设计以及前端逻辑处理，后端使用Java，,前后端以JSON进行数据交互，后端配置了Swagger向前端展示了各个接口，并使用了Mysql5.5作为数据库。
Mybatis-Plus前后端分离多表联查模糊查询分页
Z15800020057的博客
11-07 712
前后端分离，mybatis-plus多表查询，模糊，分页，swagger2
Java高频面试题 - Java、SpringCould、中间件
a111042555的博客
04-19 6446
面试题
在线考试系统，采用SpringCloud+Vue3.zip
12-29
在线考试系统，采用SpringCloud+Vue3，完成遗传算法自动组卷、文本批量导入题目、班级码。完成课程、考试、题库、试卷、考试、班级相关功能， 前端：Vue 3、Vite、Pinia、Arco UI，Echarts 后端：SpringBoot、S…....
基于Spring cloud + vue 的前后端分离社团管理系统源码.zip
05-03
基于Spring cloud + vue 的前后端分离社团管理系统，因学校没有成熟的社团管理系统，一为满足学校需求， 其次开源的社团管理项目，多为mvc ssm框架 很少有前后端分离的微服务框架，为了科技的发展， 更好学习解决高...
spring cloud + vue 全家桶实现快速搭建企业级微服务项目.zip
04-24
模拟商城，完整的购物流程、后端运营平台，使用 spring cloud + vue 全家桶实现快速搭建 企业级微服务项目。 模拟商城，完整的购物流程、后端运营平台，使用 spring cloud + vue 全家桶实现快速搭建企业级微服务...
SpringBoot整合Elastic-Job 2.1.53版本任务调度，手动任务，动态添加任务演示
小哇
07-23 364
zookeeper安装并成功运行。
SpringBoot启动命令过长
tiantiantbtb的博客
07-24 305
Error running 'DromaraApplication': Command line is too long. Shorten command line for DromaraApplication or also for Spring Boot default configuration?
Spring Security学习笔记（二）Spring Security认证和鉴权
最新发布
飞！！！的博客
07-24 654
用户认证的基础Filter，只有UsernamePasswordAuthenticationFilter这一个实现类。...//主要方法//先校验请求url与表单校验提交的url是否一致，不一致执行下一个Filter//一致的话就执行认证逻辑，一般默认的表单提交url是"/login"if (!} else {try {//实现类执行具体的认证逻辑return;//由子类实现具体的验证逻辑...
springboot之自动装配
weixin_50153914的博客
07-23 507
Spring Boot 通过一系列注解和条件配置实现了自动装配机制，使得开发者无需手动配置大量的 XML 文件或 Java 配置类。自动配置机制利用文件中的自动配置类，并结合条件注解和组件扫描，实现了灵活且强大的自动装配功能。这样，开发者可以专注于业务逻辑的实现，而无需处理繁琐的配置细节。
springcloud+vue
08-27
Spring Cloud和Vue.js是两个不同的技术栈，分别用于构建分布式微服务和前端应用。 Spring Cloud是一个基于Spring框架的分布式系统开发工具集，它提供了一系列的组件和模块，帮助我们构建和管理微服务架构。通过使用Spring Cloud，我们可以快速搭建分布式系统中常用的功能，如服务注册与发现、负载均衡、熔断器、网关等。 Vue.js是一种用于构建用户界面的JavaScript框架。它专注于视图层，通过组件化的方式来构建交互式的前端应用。Vue.js具有简洁的语法、高效的性能和灵活的扩展性，被广泛应用于单页应用程序（SPA）和复杂的前端项目开发中。 在实际项目中，可以将Spring Cloud和Vue.js结合使用。通常情况下，Spring Cloud负责提供后端的业务逻辑和数据接口，而Vue.js负责前端用户界面的展示和交互。通过这种方式，可以实现前后端的分离开发，并且各自独立演进。 总结起来，Spring Cloud用于构建分布式微服务架构，而Vue.js用于构建前端用户界面。它们可以协同工作，提供一个完整的、高效的分布式系统解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值