index.vue

<template>
    <div class="testStat">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px">

        <el-form-item label="考试名称" prop="courseName">
          <el-input
            v-model="queryParams.courseName"
            placeholder="请输入课程名称"
            clearable
            size="small"
          />
        </el-form-item>

        <el-form-item label="类型" prop="dataKind">
          <el-select v-model="queryParams.dataKind">
            <el-option label="培训考试" value="0" />
            <el-option label="随机考试" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="发布时间" prop="releaseTimeBegin">
          <el-date-picker
            v-model="releaseTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateFormat">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="search"
          >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetClick"
          >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="testStatData">
        <el-table-column label="序号" width='100' align="center" prop="courseNum"/>
        <el-table-column label="考试名称" align="center" prop="courseName"/>
        <el-table-column label="发布时间" align="center" prop="releaseTime"/>
        <el-table-column label="类型" align="center" prop="dataKind">
          <template slot-scope="scope">
            <span v-if="scope.row.dataKind == '0'">培训考试</span>
            <span v-else>随机考试</span>
          </template>
        </el-table-column>
        <el-table-column label="应参加人数" align="center" prop="count"/>
        <el-table-column label="实际考试人数" align="center" prop="test"/>
        <el-table-column label="合格人数" align="center" prop="pass"/>
<!--        <el-table-column label="合格率" align="center" prop="rate">-->
<!--          <template slot-scope="scope">-->
<!--            {{scope.row.rate}}%-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template v-slot="{ row: { courseId ,courseName}}">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="courseDetail(courseId,courseName)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getTestList"
      />

      <!--考试详情 -->
      <el-dialog :title="'考试详情：'+courseName" :visible.sync="testStatDetailOpen" append-to-body :close-on-click-modal="false">

        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          style="position: relative;left: 16px;top: -17px;"
        >导出</el-button>

        <el-table v-loading="loading" :data="testStatDetailData">
          <el-table-column label="序号" width='100' align="center" prop="detailNum"/>
          <el-table-column label="考试人员" align="center" prop="staffName"/>
          <el-table-column label="所属部门" align="center" prop="deptName">
            <span slot-scope="scope" v-if="scope.row.deptName">{{scope.row.deptName}}</span>
            <span v-else>-</span>
          </el-table-column>
          <el-table-column label="考试时间" align="center" prop="examinationTime">
            <span slot-scope="scope" v-if="scope.row.examinationTime">{{scope.row.examinationTime}}</span>
            <span v-else>-</span>
          </el-table-column>
          <el-table-column label="得分" align="center" prop="examinationResult">
            <span slot-scope="scope" v-if="scope.row.examinationResult">{{scope.row.examinationResult}}</span>
            <span v-else>-</span>
          </el-table-column>
          <el-table-column label="考试结果" align="center" prop="state">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 0">未考试</span>
              <span v-if="scope.row.state == 1">不合格</span>
              <span v-if="scope.row.state == 2">合格</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="totalDetail > 0"
          :total="totalDetail"
          :page.sync="queryDetailParams.pageNum"
          :limit.sync="queryDetailParams.pageSize"
          @pagination="getTestStatDetails"
        />
      </el-dialog>
    </div>
</template>

<script>
  import {statisticsTrainCourse,testPersonDetailByCourseId,exportDeviceInfo} from "@/api/educationPlanExam/lessonsProgram.js";
  export default {
    name: "testStat",
    data(){
        return{
          // 遮罩层
          loading: false,
          // 总条数
          total: 0,
          releaseTime: "",
          courseName:"",
          queryParams:{
            pageNum: 1,
            pageSize: 10,
            courseName: "",
            dataKind: "",
            releaseTimeBegin: "",
            releaseTimeEnd: ""
          },
          // 导出遮罩层
          exportLoading: false,
          testStatData:[],
          testStatDetailOpen: false,
          testStatDetailData: [],
          totalDetail: 0,
          queryDetailParams:{
            pageNum: 1,
            pageSize: 10,
            courseId: 0
          }
        }
    },
    created(){
      this.getTestList();
    },
    methods: {
      /** 导出按钮操作 */
      handleExport() {
        this.$confirm('是否确认导出所有考试详细数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportDeviceInfo(this.queryDetailParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
      },
      getTestList(){
        console.log("this.queryParams:",this.queryParams)
        statisticsTrainCourse(this.queryParams).then(res=>{
          this.testStatData = res.rows.map((item, index) => {
            return {
              courseNum:
                index +
                1 +
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
                ...item,
            };
          });
          this.total = res.total;
        }) .finally(() => {
            this.loading = false;
        });
      },
      dateFormat(picker){
        this.queryParams.releaseTimeBegin = picker[0];
        this.queryParams.releaseTimeEnd = picker[1];
      },
      search(){
        this.getTestList();
      },
      resetClick(){
        this.releaseTime = "";
        this.queryParams={
            pageNum: 1,
            pageSize: 10,
            courseName: "",
            dataKind: "",
            releaseTimeBegin: "",
            releaseTimeEnd: ""
        };
        this.getTestList();
      },
      courseDetail(courseId,courseName){
        this.testStatDetailOpen = true;
        this.courseName=courseName;
        this.queryDetailParams.courseId=courseId;
        this.getTestStatDetails();
      },
      getTestStatDetails(){
        //this.queryDetailParams.courseId = courseId;
        testPersonDetailByCourseId(this.queryDetailParams).then(res =>{
          this.testStatDetailData = res.rows.map((item, index) => {
            return {
              detailNum:
              index +
              1 +
              (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
              ...item,
          };
        });
          this.totalDetail = res.total;
        }) .finally(() => {
            this.loading = false;
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .testStat{
    margin: 10px;
  }
</style>