考场导入导出

src/api/examwork-task.js

@@ -25,3 +25,16 @@ export function importExamStudent({ examId, fileName, file, md5 }) {
     headers: { "Content-Type": "multipart/form-data", md5 },
   });
 }
+
+export function importInvigilator({ fileName, file, md5 }) {
+  const form = new FormData();
+  form.append("fileName", fileName);
+  form.append("file", file);
+  return httpApp.post("/api/admin/invigilateUser/import", form, {
+    headers: { "Content-Type": "multipart/form-data", md5 },
+  });
+}
+
+export function exportInvigilate() {
+  return httpApp.post("/api/admin/invigilateUser/export");
+}

src/features/examwork/InvigilateManagement/InvigilateImportDialog.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-dialog
+    ref="dialog"
+    :title="'导入' + '监考设置'"
+    width="450px"
+    :visible.sync="visible"
+    @close="closeDialog"
+  >
+    <el-form
+      :model="form"
+      ref="form"
+      :rules="rules"
+      label-position="right"
+      label-width="120px"
+    >
+      <el-row>
+        <el-form-item label="选择文件">
+          <input @change="selectFile" type="file" />
+        </el-form-item>
+      </el-row>
+      <el-row class="d-flex justify-content-center">
+        <el-button type="primary" @click="submitForm">导入</el-button>
+        <el-button @click="closeDialog">取消</el-button>
+      </el-row>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { importInvigilator } from "@/api/examwork-task";
+import MD5 from "js-md5";
+
+export default {
+  name: "InvigilateImportDialog",
+  data() {
+    return {
+      visible: false,
+      form: {
+        file: "",
+        fileName: "",
+      },
+      rules: {},
+    };
+  },
+  methods: {
+    openDialog() {
+      this.visible = true;
+    },
+    closeDialog() {
+      this.visible = false;
+    },
+    selectFile(e) {
+      this.form.file = e.target.files[0];
+      this.form.fileName = this.form.file?.name;
+    },
+    async submitForm() {
+      async function blobToArray(blob) {
+        return new Promise((resolve) => {
+          var reader = new FileReader();
+          reader.addEventListener("loadend", function () {
+            // reader.result contains the contents of blob as a typed array
+            resolve(reader.result);
+          });
+          reader.readAsArrayBuffer(blob);
+        });
+      }
+      const ab = await blobToArray(this.form.file);
+      const md5 = MD5(ab);
+
+      await importInvigilator({
+        file: this.form.file,
+        fileName: this.form.fileName,
+        md5,
+      });
+      this.$emit("reload");
+      this.closeDialog();
+    },
+  },
+};
+</script>
+
+<style></style>

src/features/examwork/InvigilateManagement/InvigilateManagement.vue

@@ -11,7 +11,9 @@
         <InvigilatorSelect v-model="form.userId"></InvigilatorSelect>
       </el-form-item>
       <el-button @click="searchForm">查询</el-button>
-      <el-button @click="add">导入</el-button>
+      <el-button @click="importDialog">导入考场设置</el-button>
+      <el-button @click="exportInvigilate">导出考场安排</el-button>
+      <a :href="downloadUrl" download class="mx-2">下载导入模板</a>
       <!-- <el-button>导入</el-button> -->
     </el-form>
 
@@ -54,16 +56,26 @@
       :user="selectedUser"
       @reload="searchForm"
     />
+
+    <InvigilateImportDialog
+      ref="theDialog2"
+      :examId="form.examId"
+      @reload="searchForm"
+    />
   </div>
 </template>
 
 <script>
 import InvigilateManagementDialog from "./InvigilateManagementDialog";
 import { searchInvigilators } from "@/api/examwork-invigilate";
+import { INVIGILATOR_IMPORT_TEMPLATE_DOWNLOAD_URL } from "@/constant/constants";
+import InvigilateImportDialog from "./InvigilateImportDialog";
+import { exportInvigilate } from "@/api/examwork-task";
 
 export default {
   name: "InvigilateManagement",
   components: {
+    InvigilateImportDialog,
     InvigilateManagementDialog,
   },
   data() {
@@ -77,6 +89,7 @@ export default {
       pageSize: 10,
       total: 10,
       selectedUser: {},
+      downloadUrl: INVIGILATOR_IMPORT_TEMPLATE_DOWNLOAD_URL,
     };
   },
   async created() {},
@@ -100,14 +113,17 @@ export default {
       this.currentPage = 1;
       this.searchForm();
     },
-    add() {
-      this.selectedUser = {};
-      this.$refs.theDialog.openDialog();
-    },
     edit(user) {
       this.selectedUser = user;
       this.$refs.theDialog.openDialog();
     },
+    importDialog() {
+      this.$refs.theDialog2.openDialog();
+    },
+    exportInvigilate() {
+      exportInvigilate();
+      this.$notify({ title: "导出调用成功" });
+    },
   },
 };
 </script>