....

src/modules/examwork/view/examStudentImport.vue

@@ -1,14 +1,364 @@
 <template>
-  <div><section class="content"></section></div>
-</template>
+  <div>
+    <section class="content" style="margin-top: -10px;">
+      <div class="box box-info">
+        <!-- 正文信息 -->
+        <div class="box-body">
+          <el-form
+            :inline="true"
+            :model="formSearch"
+            label-position="right"
+            label-width="100px"
+          >
+            <el-form-item class="pull-right buttonframe">
+              <el-button size="small" type="primary" icon="upload2" @click="imp"
+                >导入
+              </el-button>
+            </el-form-item>
+          </el-form>
+
+          <!-- 导入弹窗 -->
+          <el-dialog
+            title="考生信息导入页"
+            size="tiny"
+            :visible.sync="studentImportDialog"
+          >
+            <el-form :model="studentImportForm" ref="studentImportForm">
+              <el-row>
+                <el-form-item
+                  style="margin-left:30px"
+                  label="考试"
+                  prop="value"
+                >
+                  <el-select
+                    class="input"
+                    :remote-method="queryExams"
+                    remote
+                    :loading="queryExamsLoading"
+                    filterable
+                    clearable
+                    v-model="studentImportForm.examId"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in examList"
+                      :label="item.name"
+                      :value="item.id"
+                      :key="item.id"
+                      :disabled="!item.enable"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item style="margin-left:30px">
+                  <el-upload
+                    class="form_left"
+                    ref="upload"
+                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                    :action="uploadAction"
+                    :headers="uploadHeaders"
+                    :data="uploadData"
+                    :before-upload="beforeUpload"
+                    :on-progress="uploadProgress"
+                    :on-success="uploadSuccess"
+                    :on-error="uploadError"
+                    :file-list="fileList"
+                    :auto-upload="false"
+                    :multiple="false"
+                  >
+                    <el-button size="small" slot="trigger" type="primary"
+                      >选择文件</el-button
+                    >
+                    <el-button
+                      size="small"
+                      style="margin-left:10px;"
+                      type="success"
+                      @click="submitUpload"
+                      >确认上传
+                    </el-button>
+                    <el-button
+                      size="small"
+                      style="margin-left: 10px;"
+                      type="danger"
+                      @click="removeFile"
+                      >清空文件
+                    </el-button>
+                    <el-button size="small" type="info" @click="exportFile"
+                      >下载模板
+                    </el-button>
+                    <div slot="tip" class="el-upload__tip">
+                      只能上传xlsx文件
+                    </div>
+                  </el-upload>
+                </el-form-item>
+              </el-row>
+            </el-form>
+          </el-dialog>
 
+          <!-- 页面列表 -->
+          <el-table
+            :data="tableData"
+            border
+            style="width: 100%;text-align:center;"
+          >
+            <el-table-column prop="id" width="100" label="ID"></el-table-column>
+            <el-table-column prop="rootOrgName" width="170" label="顶级机构">
+            </el-table-column>
+            <el-table-column prop="examName" width="170" label="考试">
+            </el-table-column>
+            <el-table-column prop="fileName" width="170" label="上传文件名">
+            </el-table-column>
+            <el-table-column prop="statusDesc" width="170" label="状态">
+            </el-table-column>
+            <el-table-column prop="errorDesc" label="异常"> </el-table-column>
+            <el-table-column prop="creationTime" width="170" label="上传时间">
+            </el-table-column>
+            <el-table-column label="操作" width="190">
+              <template slot-scope="scope">
+                <div>
+                  <el-button
+                    size="mini"
+                    type="warning"
+                    @click="getUploadedFile(scope.row.id);"
+                    >下载导入文件
+                  </el-button>
+                  <el-button
+                    v-if="
+                      scope.row.status == 'DATA_PROCESSING_COMPLETE' ||
+                        scope.row.status == 'ERROR'
+                    "
+                    size="mini"
+                    type="warning"
+                    @click="getReports(scope.row.id);"
+                    >导出报告
+                  </el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="page pull-right">
+            <el-pagination
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-size="pageSize"
+              layout="total, prev, pager, next, jumper"
+              :total="total"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<style scoped></style>
 <script>
+import { TASK_API, EXAM_WORK_API } from "@/constants/constants.js";
+import { mapState } from "vuex";
+
+let _this = null;
+
 export default {
   data() {
-    return {};
+    return {
+      formSearch: {},
+      uploadAction: TASK_API + "/examStudentImport/import",
+      studentImportDialog: false,
+      examList: [],
+      uploadHeaders: {},
+      uploadData: { examId: "" },
+      fileList: [],
+      fileLoading: false,
+      queryExamsLoading: false,
+      studentImportForm: {
+        examId: null
+      },
+
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    };
+  },
+  computed: {
+    ...mapState({ user: state => state.user })
   },
-  methods: {},
-  created() {}
+  methods: {
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.queryTableDatas();
+    },
+    imp() {
+      this.studentImportDialog = true;
+      this.initUpload();
+    },
+    initUpload() {
+      if (this.$refs.studentImportForm) {
+        this.$refs.studentImportForm.resetFields();
+      }
+      this.fileList = [];
+      this.studentImportForm.examId = null;
+      this.examList = [];
+    },
+    beforeUpload(file) {
+      console.log(file);
+    },
+    uploadProgress(event, file, fileList) {
+      console.log("uploadProgress");
+      console.log(event);
+      console.log(file);
+      console.log(fileList);
+    },
+    uploadSuccess(response, file, fileList) {
+      console.log("uploadSuccess");
+      console.log(response);
+      console.log(file);
+      console.log(fileList);
+      this.$notify({
+        message: "上传成功",
+        type: "success"
+      });
+      this.fileLoading = false;
+      this.studentImportDialog = false;
+      this.queryTableDatas();
+    },
+    uploadError(response, file, fileList) {
+      console.log("uploadError");
+      console.log(response);
+      console.log(file);
+      console.log(fileList);
+      var jsonStr = response.message.substring(4);
+      var resp = eval("(" + jsonStr + ")");
+      if (response.status == 500) {
+        this.$notify({
+          message: resp.desc,
+          type: "error"
+        });
+      }
+      this.fileLoading = false;
+    },
+    //确定上传
+    submitUpload() {
+      if (!this.checkUpload()) {
+        return false;
+      }
+      this.$refs.upload.submit();
+      this.fileLoading = true;
+    },
+    checkUpload() {
+      if (!this.studentImportForm.examId) {
+        this.$notify({
+          message: "请选择考试批次",
+          type: "error"
+        });
+        return false;
+      } else {
+        this.uploadData.examId = this.studentImportForm.examId;
+      }
+      var fileList = this.$refs.upload.uploadFiles;
+      if (fileList.length == 0) {
+        this.$notify({
+          message: "上传文件不能为空",
+          type: "error"
+        });
+        return false;
+      }
+      if (fileList.length > 1) {
+        this.$notify({
+          message: "每次只能上传一个文件",
+          type: "error"
+        });
+        return false;
+      }
+      for (let file of fileList) {
+        if (!file.name.endsWith(".xlsx")) {
+          this.$notify({
+            message: "上传文件必须为xlsx格式",
+            type: "error"
+          });
+          this.initUpload();
+          return false;
+        }
+      }
+      return true;
+    },
+    //清空文件
+    removeFile() {
+      this.$refs.upload.clearFiles();
+    },
+    //下载模板
+    exportFile() {
+      window.location.href =
+        "/api/ecs_exam_work/exam_student/downloadTemplate?$key=" +
+        this.user.key +
+        "&$token=" +
+        this.user.token;
+    },
+    //下载报告
+    getReports(id) {
+      window.location.href =
+        TASK_API +
+        "/examStudentImport/getReports/" +
+        id +
+        "?$key=" +
+        this.user.key +
+        "&$token=" +
+        this.user.token;
+    },
+    //下载导入文件
+    getUploadedFile(id) {
+      window.location.href =
+        TASK_API +
+        "/examStudentImport/getUploadedFile/" +
+        id +
+        "?$key=" +
+        this.user.key +
+        "&$token=" +
+        this.user.token;
+    },
+    queryExams(name) {
+      console.log("queryExams; name: " + name);
+      this.queryExamsLoading = true;
+      this.$http
+        .get(EXAM_WORK_API + "/exam/queryByNameLike?name=" + name)
+        .then(response => {
+          this.queryExamsLoading = false;
+          this.examList = response.data;
+        })
+        .catch(response => {
+          if (response.status == 500) {
+            this.$notify({
+              showClose: true,
+              message: response.data.desc,
+              type: "error"
+            });
+          }
+          this.queryExamsLoading = false;
+        });
+    },
+    queryTableDatas: function() {
+      var url =
+        TASK_API +
+        "/examStudentImport/all/" +
+        (this.currentPage - 1) +
+        "/" +
+        this.pageSize;
+      this.$http.get(url).then(response => {
+        console.log(response);
+        _this.tableData = response.data.list;
+        _this.total = response.data.total;
+      });
+    }
+  },
+  created() {
+    _this = this;
+    this.queryTableDatas();
+    this.uploadHeaders = {
+      key: this.user.key,
+      token: this.user.token
+    };
+  }
 };
 </script>
-<style scoped></style>

vue.config.js

@@ -38,6 +38,10 @@ const proxy = {
   "/api/ecs_prt": {
     target: process.env.VUE_APP_PRINT_HOST_URL || "http://192.168.10.39:8009",
     changeOrigin: true
+  },
+  "/api/ctr/task": {
+    target: process.env.VUE_APP_PRINT_HOST_URL || "http://192.168.10.39:8011",
+    changeOrigin: true
   }
 };