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 style="padding: 0px 5px;">
        <el-button type="primary" @click="exportStudentOfTearcher()" 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="index"
          width="100px">
          <template v-slot="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="课程名称"
          prop="courseName"
          width="200px">
        </el-table-column>
        <el-table-column
          label="课程日期"
          prop="teachingDate"
          width="200px">
        </el-table-column>
        <el-table-column
          label="内容分类"
          prop="courseTypeName"
          width="200px">
        </el-table-column>
        <el-table-column label="课程类型" prop="type" width="120px">
          <template v-slot="scope">
                <span>{{
                    {
                      "0": "在线课",
                      "1": "面授课",
                      "2": "课程开发",
                      "3": "作业员入模培训",
                      "4": "其他",
                    }[scope.row.type + '']
                  }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="学习总人数"
          prop="studys"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="授课时长(分钟)"
          prop="teaching"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="评分"
          prop="score"
          width="100px"
        ></el-table-column>
        <el-table-column label="开课状态" width="100px" prop="courseStatus">
          <template v-slot="scope">
                <span>{{
                    {
                      "0": "未开课",
                      "1": "已开课",
                    }[scope.row.courseStatus + '']
                  }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          width="200px"
          prop="remark"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="150px"
          prop="cz"
          fixed="right"
        >
          <template v-slot="scope">
            <el-button type="text" @click="exportStudentOfCourse(scope.row.courseId, scope.row.courseType)"
                       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 = {
        userId: this.userInfo.sysId
      }
      apiCourse.courseRecordExport2(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);
      })
    },

    // 导出课程下的学员信息
    exportStudentOfCourse(courseId, courseType) {
      apiCourse.exportStudentOfCourse2(courseId, courseType).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);
      })
    },

    // 导出教师下的所有授课记录下的学员信息
    exportStudentOfTearcher() {
      let userId = this.userInfo.sysId;
      apiCourse.exportStudentOfTearcher2(userId).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) {
      // 如果pageIndex未定义或未赋值，则默认初始值
      pageIndex = pageIndex || 1;

      let req = {
        userId: this.userInfo.sysId,
        courseName: this.keyword,
        page: pageIndex,
        pageSize: 10
      }
      apiCourse.getListByToken(req).then(res => {
        if (res.status == 200) {
          this.pageData = res.data.records;
          this.pageInfo.pageSize = res.data.size;
          this.pageInfo.total = res.data.pages;
          this.pageInfo.page = res.data.current;
        } 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>