Merge branch 'dev_v4.0.1' of http://git.qmth.com.cn/examcloud-frontend/examcloud-admin-web into dev_v4.0.1

src/modules/oe/views/export_task_list.vue

@@ -1,11 +1,236 @@
 <template>
-  <div>todo</div>
+  <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="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-column label="ID" prop="id" width="80px" sortable />
+      <el-table-column label="考试ID" prop="examId" width="100px" sortable />
+      <el-table-column
+        label="任务类型"
+        prop="typeTitle"
+        width="110px"
+        sortable
+      />
+      <el-table-column
+        label="任务状态"
+        prop="statusTitle"
+        width="110px"
+        sortable
+      />
+      <el-table-column label="状态描述" prop="statusMsg" />
+      <el-table-column
+        label="创建时间"
+        prop="creationTime"
+        width="160px"
+        sortable
+      />
+      <el-table-column
+        label="更新时间"
+        prop="updateTime"
+        width="160px"
+        sortable
+      />
+
+      <el-table-column label="操作" width="120px">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            icon="el-icon-download"
+            :disabled="scope.row.status != 'SUCCESS'"
+            @click="download(scope.row)"
+            plain
+            >下载
+          </el-button>
+        </template>
+      </el-table-column>
+    </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 {
-  name: "export_task_list"
+  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;
+        }
+      );
+    },
+    download(row) {
+      window.location.href = row.filePath;
+    },
+    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></style>
+<style scoped>
+.page {
+  margin-top: 10px;
+}
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
+.w180 {
+  width: 180px;
+}
+</style>