examcloud-admin-web/src/modules/oe/views/export_task_list.vue

<template>
  <section style="margin-top: 0px;">
    <el-form
      :model="formSearch"
      :inline="true"
      style="border-bottom: 1px solid rgb(221, 221, 221);margin-bottom: 10px;"
    >
      <el-form-item label="考试名称">
        <el-select
          v-model="formSearch.examId"
          :remote-method="getExams"
          @clear="getExams"
          placeholder="请选择"
          remote
          filterable
          clearable
          size="small"
          class="w180"
        >
          <el-option
            v-for="item in examList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="类型">
        <el-select
          v-model="formSearch.type"
          size="small"
          class="w180"
          placeholder="请选择"
          @clear="clearTypeValue"
          clearable
        >
          <el-option label="考试明细" value="EXAM_DETAIL"></el-option>
          <el-option label="成绩统计" value="SCORE_STATISTIC"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态">
        <el-select
          v-model="formSearch.status"
          size="small"
          class="w180"
          placeholder="请选择"
          @clear="clearStatusValue"
          clearable
        >
          <el-option label="未开始" value="NONE"></el-option>
          <el-option label="导出中" value="EXPORTING"></el-option>
          <el-option label="成功" value="SUCCESS"></el-option>
          <el-option label="失败" value="ERROR"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="doSearch(1)"
          >查询
        </el-button>

        <el-button size="small" icon="el-icon-refresh" @click="resetSearchForm">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="tableData"
      element-loading-text="数据加载中"
      style="width:100%;"
      border
      stripe
    >
    </el-table>

    <div class="page pull-right">
      <el-pagination
        @current-change="handlePagerNo"
        :current-page="formSearch.pageNo"
        @size-change="handlePagerSize"
        :page-size="formSearch.pageSize"
        :page-sizes="[10, 20, 50, 100, 200, 300]"
        :total="totalElements"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </section>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      formSearch: {
        examId: "",
        type: null,
        status: null,
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      tableData: [],
      totalElements: 0,
      examList: []
    };
  },
  methods: {
    getExams(examName) {
      if (!examName) {
        examName = "";
      }
      this.$http
        .get("/api/ecs_exam_work/exam/queryByNameLike", {
          params: {
            name: examName,
            examTypes: "ONLINE#OFFLINE#ONLINE_HOMEWORK"
          }
        })
        .then(response => {
          this.examList = response.data;
        });
    },
    doSearch(pageNo) {
      this.formSearch.pageNo = pageNo;

      this.loading = true;
      let url = "/api/ecs_oe_admin/export/task/list";
      this.$http.post(url, this.formSearch).then(
        response => {
          this.tableData = response.data.content;
          this.totalElements = response.data.totalElements;
          this.loading = false;
        },
        error => {
          console.log(error);
          this.loading = false;
        }
      );
    },
    handlePagerNo(pageNo) {
      this.doSearch(pageNo);
    },
    handlePagerSize(pageSize) {
      this.formSearch.pageSize = pageSize;
      this.doSearch(1);
    },
    clearTypeValue() {
      this.formSearch.type = null;
    },
    clearStatusValue() {
      this.formSearch.status = null;
    },
    resetSearchForm() {
      this.formSearch.examId = "";
      this.formSearch.type = null;
      this.formSearch.status = null;
      this.doSearch(1);
    }
  },
  computed: {
    ...mapState({ user: state => state.user })
  },
  created() {
    this.getExams();
    this.doSearch(1);
  }
};
</script>

<style scoped>
.page {
  margin-top: 10px;
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.w180 {
  width: 180px;
}
</style>