IESM项目实训十——教务提交记录显示学生成绩列表和提交记录

Gou_Rong

已于 2022-06-06 17:33:43 修改

阅读量207

点赞数

分类专栏： IESM项目实训项目记录文章标签： vue.js bash 前端

于 2022-06-06 17:32:48 首次发布

本文链接：https://blog.csdn.net/Gou_Rong/article/details/125147197

版权

IESM项目实训项目记录专栏收录该内容

12 篇文章 1 订阅

订阅专栏

IESM项目实训十

教务查看课程成绩提交列表情况，可以显示每一门课程的学生成绩列表和提交记录。提交记录也可查看历史提交的学生成绩列表。撤销不是将原有记录覆盖，而是直接插入新数据，保留所有记录。
在这里插入图片描述

添加所需组件Modal

import TemporaryStuScoresListModal from "@views/score/modules/TemporaryStuScoresListModal";
import SubmitRecordListModal from "@views/score/modules/SubmitRecordListModal";
components: {
      TemporaryStuScoresListModal,
      SubmitRecordListModal,
      TemporaryScoresModal,
      JInput
    },

学生成绩列表组件：

 <temporary-stu-scores-list-modal ref="TemporaryStuScoresListModal"></temporary-stu-scores-list-modal>

提交记录列表组件：

 <submit-record-list-modal ref="SubmitRecordListModal"></submit-record-list-modal>

两个组件都是在框架自动生成的代码上进行了改动。将原来的list页面改为Modal组件，然后将整个页面改为

显示按钮

<a @click="handleTemShowStuList(record)">学生成绩列表</a>
<a @click="handleShowSubmitRecord(record)">提交记录</a>

响应事件：
学生成绩列表如果教师已经提交则可以查看，否则不可查看。
提交记录是是单独存放，提交至总库和临时库都可以查看，所以需要区分查看。

handleTemShowStuList:function (record){
       if(record.inputState=="已提交") {
            this.$refs.TemporaryStuScoresListModal.showTemporaryStuScoresList(record);
       }else{
            this.$message.info("该课程成绩未提交，不可查看最新的学生成绩列表！");
       }
 },
  handleShowSubmitRecord(record){
        let temp="tem";
        this.$refs.SubmitRecordListModal.showSubmitRecordList(record,temp);
      },

在这里插入代码片

//TemporaryStuScoresListModal.vue如下
<template>
  <a-modal

    :title="title"
    :width="1200"
    :visible="ListModalVisible"
    :confirmLoading="false"
    @ok="handleCancel"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-card :bordered="false">

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" icon="download" @click="handleExportXls('临时学生成绩表')">导出</a-button>
      </div>

      <!-- table区域-begin -->
      <div>

        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          class="j-table-force-nowrap"
          @change="handleTableChange">

          <span slot="action" slot-scope="text, record">
           <a @click="handleDetail(record)">详情</a>
        </span>

        </a-table>
      </div>

      <temporary-stu-scores-modal ref="modalForm" @ok="modalFormOk"></temporary-stu-scores-modal>
    </a-card>
  </a-modal>
</template>

SubmitRecordListModal.vue
<template>
  <a-modal
      :title="title"
      :width="1200"
      :visible="ListModalVisible"
      :confirmLoading="false"
      @ok="handleCancel"
      @cancel="handleCancel"
      cancelText="关闭">
  <a-card :bordered="false">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('成绩提交记录表')">导出</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleShowStuList(record)">学生成绩列表</a>         
        </span>
      </a-table>
    </div>
    <submit-record-modal ref="modalForm" @ok="modalFormOk"></submit-record-modal>
    <temporary-stu-scores-list-modal ref="TemporaryStuScoresListModal"></temporary-stu-scores-list-modal>
    <all-stu-scores-list-modal ref="AllStuScoresListModal"></all-stu-scores-list-modal>
  </a-card>
  </a-modal>
</template>

在两个页面中添加显示方式，传递显示列表参数。两个getQueryParams进行了修改，添加了显示条件，主要是按照提交时间与数据库中该课程学生的创建时间对比，找到两者一致或者相差最小的（因为改写录入状态和成绩录入存在微小的差别，可能是一秒左右），即为对应提交记录的学生成绩列表。

//学生成绩列表显示
showTemporaryStuScoresList(record){
      this.lesOrd=record.lesOrd;
      this.lesId=record.lesId;
      this.submitTime=record.submitTime;
      this.stuNum=record.coursenum;
      this.temStuScoresID=record.id;
      this.ListModalVisible=true;
      this.loadData();
    },
     //重写默认的获取查询条件方法
    getQueryParams:function() {
      //获取查询条件
      let sqp = {}
      console.log("课序号" + this.lesOrd);
      console.log("课序号" + this.csId);
      const les_ord = {les_ord: this.lesOrd};
      const les_id = {les_id: this.lesId};
      const submit_time={submit_time:this.submitTime};
      const stu_num={stu_num:this.stuNum};
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters,les_id,les_ord,submit_time,stu_num);
      param.field = this.getQueryField();
      if (this.cTable === true) {
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
      }
      return filterObj(param);
    },

//提交记录显示
 showSubmitRecordList(record,temp){
        this.lesOrd=record.lesOrd;
        this.lesId=record.lesId;
        this.temStuScoresID=record.id;
        this.ListModalVisible=true;
        this.temp=temp;
        this.loadData();
      },
 //重写默认的获取查询条件方法
      getQueryParams:function() {
        //获取查询条件
        let sqp = {}
        const les_ord = {les_ord: this.lesOrd};
        const les_id = {les_id: this.lesId};
        if (this.superQueryParams) {
          sqp['superQueryParams'] = encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters, les_id, les_ord);
        param.field = this.getQueryField();
        if (this.cTable === true) {
          param.pageNo = this.ipagination.current;
          param.pageSize = this.ipagination.pageSize;
        }
        return filterObj(param);
      },

后端方法：
学生成绩列表相关（对应实体：TemporaryStuScoresController）

@ApiOperation(value="临时学生成绩表-分页列表查询", notes="临时学生成绩表-分页列表查询")
   @GetMapping(value = "/list")
    public Result<Page<TemporaryStuScores>> queryPageList(TemporaryStuScores scores,
                                              @RequestParam(name="les_id")String les_id,
                                              @RequestParam(name="les_ord")String les_ord,
                                              @RequestParam(name="submit_time")String submit_time,
                                              @RequestParam(name ="stu_num")Integer stu_num,
                                              @RequestParam(name = "pageNo", defaultValue = "1") Integer pageNo,
                                              @RequestParam(name = "pageSize", defaultValue = "30") Integer pageSize,
                                              HttpServletRequest req) {
        Result<Page<TemporaryStuScores>> result = new Result<>();
       if(pageSize>stu_num){
           pageSize=stu_num;
       }
        Page<TemporaryStuScores> pageList = new Page<TemporaryStuScores>(pageNo, pageSize);
        pageList=temporaryStuScoresService.getStudentList(pageList,les_id,les_ord,submit_time,stu_num);
        result.setSuccess(true);
        result.setResult(pageList);
        return result;
    }

ITemporaryStuScoresService接口

    public Page<TemporaryStuScores> getStudentList(Page<TemporaryStuScores> page, String les_id, String les_ord,String submit_time,Integer stu_num);

TemporaryStuScoresServiceImpl接口实现

@Override
    @Transactional
    public Page<TemporaryStuScores> getStudentList(Page<TemporaryStuScores> page, String les_id, String les_ord,String submit_time,Integer stu_num) {
        List<TemporaryStuScores> list=temporaryStuScoresMapper.getStudentList(page,les_id,les_ord,submit_time,stu_num);
        return page.setRecords(list);
    }

TemporaryStuScoresMapper对应数据库接口

public List<TemporaryStuScores> getStudentList(Page<TemporaryStuScores> page,
                                                   @Param("les_id") String cs_id,
                                                   @Param("les_ord") String les_ord,
                                                   @Param("submit_time")String submit_time,
                                                   @Param("stu_num")Integer stu_num);

关键的数据库操作TemporaryStuScoresMapper.xml，按照所需提交时间成绩对比，按照与其相差大小排序，取排序后结果的对应课程学生数即所需学生列表。

 <select id="getStudentList" resultType="org.jeecg.modules.demo.ScoresInput.entity.TemporaryStuScores">
        SELECT *
        FROM (SELECT *
        FROM temporary_stu_scores
        WHERE
            les_id = #{les_id} and les_ord=#{les_ord}
        ORDER BY ABS(TIMESTAMPDIFF(second, create_time, #{submit_time})) LIMIT #{stu_num}) as `a*`
    </select>

提交记录列表显示对应课程所有的记录：

@ApiOperation(value="成绩提交记录表-分页列表查询", notes="成绩提交记录表-分页列表查询")
   @GetMapping(value = "/list")
    public Result<Page<SubmitRecord>> queryPageList(SubmitRecord submitRecord,
                                                    @RequestParam(name="les_id")String les_id,
                                                    @RequestParam(name="les_ord")String les_ord,
                                                    @RequestParam(name = "pageNo", defaultValue = "1") Integer pageNo,
                                                    @RequestParam(name = "pageSize", defaultValue = "30") Integer pageSize,
                                                    HttpServletRequest req) {
        Result<Page<SubmitRecord>> result = new Result<>();
        Page<SubmitRecord> pageList = new Page<>(pageNo, pageSize);
        pageList=submitRecordService.getList(pageList,les_id,les_ord);
        result.setSuccess(true);
        result.setResult(pageList);
        return result;
    }

ISubmitRecordService接口

public Page<SubmitRecord> getList(Page<SubmitRecord> page, String cs_id, String les_ord);

SubmitRecordServiceImpl接口实现

@Resource
    private SubmitRecordMapper submitRecordMapper;
    @Override
    @Transactional
    public Page<SubmitRecord> getList(Page<SubmitRecord> page, String cs_id, String les_ord) {
        return page.setRecords(submitRecordMapper.getList(page,cs_id,les_ord));
    }

SubmitRecordMapper数据库接口

    public List<SubmitRecord> getList(Page<SubmitRecord> page, @Param("les_id")String les_id, @Param("les_ord")String les_ord);

SubmitRecordMapper数据库操作

<select id="getList" parameterType="java.lang.String" resultType="org.jeecg.modules.demo.ScoresInput.entity.SubmitRecord">-->
    SELECT *
    FROM submit_record
    where   les_id = #{les_id} and les_ord=#{les_ord}
    </select>