learning-system-portal/src/views/course/Mylecnotes.vue

<template>
     <div style="padding: 12px 32px 10px 12px;">
      <div style="display: flex;justify-content: flex-start;">

        <div><el-input v-model="keyword" placeholder="输入课程名称搜索" clearable></el-input></div>
        <div style="padding-left: 10px;"><el-button @click="recordList()" type="primary" icon="el-icon-search">搜索</el-button></div>
        <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" @click="keyword = ''" type="primary" >重置</el-button></div>
        <div style="padding: 0px 5px;"><el-button type="primary" @click="exportFile()" icon="el-icon-search" size="small" round>导出</el-button></div>
      </div>
      <div class="Export">
        <!-- <div style="padding-left: 10px;"><el-button type="primary" @click="exportFile()" icon="el-icon-search" size="small" round>导出</el-button></div> -->
        <!-- <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary" size="small" round>导出学员信息</el-button></div> -->
      </div>
      <div style="margin-top:20px;">
        <el-table :data="pageData" border stripe>
            <el-table-column
            label="课程时间"
            prop="courseTime"
            width="200px">
            </el-table-column>
            <el-table-column
            label="课程名称"
            prop="courseName"
            width="200px">
            </el-table-column>
            <el-table-column
            label="开课场地"
            prop="address"
            width="240px">
            </el-table-column>
            <el-table-column
            label="所属课程"
            prop="parentCourse"
            width="120px">
            </el-table-column>
            <el-table-column
            label="所属项目"
            prop="parentProject"
            ></el-table-column>
            <el-table-column
            label="所属路径"
            prop="parentRoute"
            width="200px"
            ></el-table-column>
            <el-table-column
            label="学习总人数"
            prop="studentNumber"
            width="100px"
            ></el-table-column>
            <el-table-column
            label="时长(分钟)"
            width="100px"
            prop="period"
            ></el-table-column>
            <el-table-column
            label="评分"
            width="100px"
            prop="score"
             ></el-table-column>
            <!-- <el-table-column
            label="操作"
            align="center"
            width="150px"
            prop="cz"
            fixed="right"
             >
             <template v-slot="scope">
              <el-button type="primary" size="small">导出学员信息</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>

    <div style="text-align: center; margin-top:57px">
     <el-pagination
      background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
      </div>

    </div>
</template>

<script>
import apiCourse from '../../api/boe/courseRecord.js';
import { mapGetters } from 'vuex';
export default {
  data(){
    return {
        pageData:[],
        keyword:'',
        pageInfo:{},
    }
  },

  mounted() {
    this.recordList(1);

  },
  computed: {
    ...mapGetters(['userInfo'])
  },

  methods: {

      exportFile(){
        let req = {
          teacherId: this.userInfo.sysId
          // teacherId:"70F80F4E-34BA-10AB-894A-8FA812B19637"
        }
        apiCourse.courseRecordExport(req).then(res=>{
            const link = document.createElement('a');// 创建a标签
            let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'}); // 设置文件类型
            link.style.display = "none";
            link.href = URL.createObjectURL(blob); // 创建URL
            link.setAttribute("download", "授课记录.xls");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        })
      },

      recordList(pageIndex){
        let req = {
        //     teacherId:"70F80F4E-34BA-10AB-894A-8FA812B19637",
            teacherId: this.userInfo.sysId,
            keyword:this.keyword,
            page:pageIndex,
            pageSize:10
        }
        apiCourse.courseRecordList(req).then(res=>{
          if(res.status == 200) {
            this.pageData = res.result.list;
            this.pageInfo = res.result.pageInfo;
          } else {
             this.$message({
              type: 'error',
              message: res.message
            });
          }
        })
      },

      // 每页显示的条数事件
      handleSizeChange(val){
        this.pageInfo.pageSize = val;
        this.recordList(1);
      },
      // 显示制定页的数据
      handleCurrentChange(val){
        this.pageInfo.pageIndex = val;
        this.recordList(this.pageInfo.pageIndex);
      },

  },

}
</script>

<style lang="scss" scoped>
.Export{
  display: flex;
  padding-top: 10px;
}
</style>