对接批量上传试题功能

src/plugins/modules/axios.js

@@ -15,7 +15,6 @@ axios.defaults.headers.delete["Content-Type"] = "application/json;charset=utf-8"
 
 let config = {
   baseURL: process.env.VUE_APP_BASE_API || process.env.apiUrl || "",
-  // baseURL: "http://8.141.68.219:8080",
   timeout: 60 * 1000,
   withCredentials: false,
   crossDomain: true,

src/router/menu.js

@@ -65,10 +65,10 @@ export default [
           },
         ],
       },
-      // {
-      //   path: '/examQuestionManagement/batchImport',
-      //   meta: { title: '批量导入' },
-      // },
+      {
+        path: '/examQuestionManagement/batchImport',
+        meta: { title: '批量导入' },
+      },
     ],
   },
   {

src/views/examQuestionManagement/examQuestionBatchImport.vue

@@ -1,18 +1,30 @@
 <template>
-  <div class="app-container">
+  <div class="app-container question-batch-import">
     <a-spin :spinning="loading">
-      <div class="common-card">
-        <a-upload
-          name="file"
-          :show-upload-list="false"
-          accept=".pdf,.jpg,.png,.jpeg"
-          :headers="headers"
-          multiple
-          :before-upload="beforeUpload"
-          @change="uploadFileFun"
-        >
-          <a-button> <a-icon type="upload" /> Click to Upload </a-button>
-        </a-upload>
+      <div class="common-card basic-information-box">
+        <div class="basic-information-title">上传试题CSV文件</div>
+        <div class="basic-information-form">
+          <a-upload
+            name="file"
+            accept=".csv"
+            :headers="headers"
+            :show-upload-list="false"
+            multiple
+            :before-upload="beforeUpload"
+            @change="uploadFileFun"
+          >
+            <!-- ,.jpg,.png,.jpeg -->
+            <!-- <a-button>
+              <a-icon type="upload" /> <span>点击上传</span>
+            </a-button> -->
+            <div class="uploadButton">
+              <a-icon :type="loading ? 'loading' : 'upload'" />
+              <div class="uploadText">
+                Upload
+              </div>
+            </div>
+          </a-upload>
+        </div>
       </div>
     </a-spin>
     <div class="company-info">
@@ -48,17 +60,16 @@ export default {
     initDataFun() {},
     // 上传前
     beforeUpload(file) {
-      let isJpgOrPng =
-        file.type === 'application/pdf' ||
-        file.type === 'image/jpeg' ||
-        file.type === 'image/png' ||
-        file.type === 'image/jpg';
+      let isJpgOrPng = file.type === 'application/vnd.ms-excel';
+      // file.type === 'image/jpeg' ||
+      // file.type === 'image/png' ||
+      // file.type === 'image/jpg';
       if (!isJpgOrPng) {
-        this.$message.error('上传图片只能是 JPG，JPEG，PNG 格式！');
+        this.$message.error('上传图片只能是 .csv 格式！');
       }
       let isLtHalf1M = file.size / 1024 / 1024 < 0.5;
       if (!isLtHalf1M) {
-        this.$message.error('Image must smaller than 0.5MB!');
+        this.$message.error('文件必须小于 0.5M ！');
       }
       let bySelf = false;
       return isJpgOrPng && isLtHalf1M && bySelf;
@@ -66,28 +77,24 @@ export default {
     // 上传文件
     uploadFileFun(data) {
       this.loading = true;
-      console.log(data);
       const formData = new FormData();
       formData.append('file', data.file);
       this.$_http
         .post(this.$_API.INTERFACE_POST_IMAGE_UPLOAD, formData, {
           headers: {
-            'Content-Type': 'multipart/form-data',
+            'Content-Type': 'multipart/form-data;',
           },
         })
         .then((res) => {
-          console.log(res);
-          // if (info.file.status !== 'uploading') {
-          //   // console.log(info);
-          // }
-          // if (info.file.status === 'done') {
-          //   this.$message.success('上传文件成功');
-          // } else if (info.file.status === 'error') {
-          //   this.$message.error('上传文件失败');
-          // }
+          if (res.success && res.data) {
+            this.$message.success(`成功新建${res.data}道试题`);
+          } else {
+            this.$message.error(`${res.data || res.message}`);
+          }
           this.loading = false;
         })
-        .catch(() => {
+        .catch((err) => {
+          this.$message.error(`${err.response.data}`);
           this.loading = false;
         });
     },
@@ -95,7 +102,40 @@ export default {
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+@import '~@/styles/common/variable.less';
+.question-batch-import {
+  .uploadButton {
+    margin: @navTopHight 0;
+    padding: @paddingMarginVal;
+    width: 120px;
+    height: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px dashed @mainColorBorder;
+    cursor: pointer;
+    border-radius: 4px;
+    i {
+      color: @mainColorBlack65;
+      font-size: 30px;
+      margin-bottom: 8px;
+    }
+    .uploadText {
+      color: @mainColorBlack85;
+      font-size: 16px;
+    }
+    &:hover {
+      border: 1px dashed @mainColorBlueNormal;
+      i,
+      .uploadText {
+        color: @mainColorBlueNormal;
+      }
+    }
+  }
+}
+</style>
 
 <style lang="less" scoped>
 @import '~@/styles/common/variable.less';