feat:增加导入成绩

src/components/drawers/ExportScore.vue

@@ -6,6 +6,7 @@
     placement="right"
     width="700px"
     @after-visible-change="afterVisibleChange"
+    :zIndex="999"
   >
     <div class="drawerMain">
       <div class="header">
@@ -29,7 +30,7 @@
               <a-upload-dragger
                 v-model:fileList="fileList"
                 :action="importHomeWork"
-                name="file"
+                name="uploadFile"
                 :multiple="true"
                 @change="handleChange"
                 :showUploadList="false"
@@ -99,11 +100,12 @@
                     style="display: flex; align-items: center"
                   >
                     <div style="color: #ff7474">
-                      20条数据导入成功，5条数据导入失败
+                      {{ succNum }}条数据导入成功，{{ errNum }}条数据导入失败
                     </div>
                   </div>
                 </div>
               </div>
+              <!--  v-if="uploadpercent === 100" -->
               <div class="loadborder" v-if="uploadpercent === 100">
                 <div class="content">
                   <div class="img"></div>
@@ -119,9 +121,49 @@
                   </div>
                   <div class="curloading">
                     <!-- <div class="cur">100%</div> -->
-                    <div class="cancel" style="margin-left: 20px">删除</div>
+                    <div
+                      class="cancel"
+                      style="margin-left: 20px; cursor: pointer"
+                      @click="removeUpload"
+                    >
+                      删除
+                    </div>
                   </div>
                 </div>
+                <div>
+                  <div class="downloadErr">下载失败数据</div>
+                </div>
+              </div>
+              <div
+                v-if="uploadpercent === 100"
+                class="defeat"
+                style="
+                  display: flex;
+                  align-items: center;
+                  width: 500px;
+                  height: 40px;
+                "
+                :style="{
+                  background: errNum
+                    ? 'rgba(255, 116, 116, 0.1)'
+                    : 'rgba(53, 174, 105, 0.1)',
+                  border: errNum ? '1px solid #ff7474' : '1px solid #35AE69',
+                }"
+              >
+                <img
+                  style="width: 14px; height: 14px; margin-left: 16px"
+                  :src="
+                    errNum
+                      ? require('../../assets/images/err.png')
+                      : require('../../assets/images/success.png')
+                  "
+                />
+                <div
+                  style="margin-left: 8px"
+                  :style="{ color: errNum ? '#ff7474' : 'rgba(0,0,0,0.65)' }"
+                >
+                  {{ succNum }}条数据导入成功，{{ errNum }}条数据导入失败
+                </div>
               </div>
             </div>
           </div>
@@ -132,6 +174,10 @@
         <button class="btn2" @click="closeDrawer">确定</button>
       </div>
     </div>
+    <!--  加载动画 -->
+    <div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
+      <a-spin :spinning="addLoading" tip="" />
+    </div>
   </a-drawer>
 </template>
 <script>
@@ -163,6 +209,10 @@ export default {
         process.env.VUE_APP_BASE_API + "admin/student/importHomeWork",
       uploadpercent: -1,
       uploadErr: false, //上传失败
+      addLoading: false,
+      fileList: [],
+      succNum: 0, //成功数据数
+      errNum: 0, //失败数据数
     });
     const closeDrawer = () => {
       ctx.emit("update:eScorevisible", false);
@@ -175,34 +225,51 @@ export default {
     //上传文件
     const handleChange = (info) => {
       console.log("info11111", info);
-      state.uploadpercent = info.file.percent;
-      // let timer = setInterval(() => {
-      //   state.uploadpercent = info.file.percent;
-      //   if (state.uploadpercent === 100) {
-      //     clearInterval(timer);
-      //   }
-      //   console.log("我是文件上传的进度---------->", info.file.percent);
-      // }, 1000);
+      const isType =
+        info.file.name.indexOf(".xlsx") !== "-1" ||
+        info.file.name.indexOf(".xls") !== "-1";
+      if (!isType) {
+        message.destroy();
+        message.error("仅支持xls、xlsx格式!");
+        return;
+      }
+      state.addLoading = true;
+      state.uploadpercent = parseInt(info.file.percent);
       console.log("我是文件上传的进度---------->", info.file.percent);
       const status = info.file.status;
       if (status !== "uploading") {
         console.log(info.file, info.fileList);
       }
       if (status === "done") {
-        const formData = new FormData();
-        formData.append("uploadFile", info.file);
-        // formData.append("offcoursePlanId", props.id);
-        console.log("info.file", info.file);
-        api.batchImportScore(formData).then((res) => {
-          if (res.data.code === 200) {
-            console.log("上传成功");
-          }
-          console.log("上传成绩", res);
-        });
-        message.success(`${info.file.name} file uploaded successfully.`);
+        let i = 0;
+        let timer = setInterval(() => {
+          let uid = info.file.response.data;
+          api
+            .getImportStatus(uid)
+            .then((res) => {
+              console.log("查询导入状态", res);
+              if (res.data.code === 200) {
+                if (res.data.data.status !== "START") {
+                  i++;
+                  if (i === 1) {
+                    message.destroy();
+                    message.success(`${info.file.name}上传成功`);
+                    state.addLoading = false;
+                  }
+                  state.succNum = res.data.data.successNum;
+                  state.errNum = res.data.data.failedNum;
+                  clearInterval(timer);
+                }
+              }
+            })
+            .catch((err) => {
+              clearInterval(timer);
+              console.log("查询导入状态失败", err);
+            });
+        }, 500);
       } else if (status === "error") {
         state.uploadErr = true;
-        message.error(`${info.file.name} file upload failed.`);
+        message.error(`${info.file.name}上传失败`);
       }
     };
     const beforeUpload = (file) => {
@@ -240,6 +307,13 @@ export default {
     const handleUpload = (e) => {
       console.log("handleUpload", e);
     };
+
+    //删除
+    const removeUpload = () => {
+      state.fileList = [];
+      state.uploadpercent = -1;
+      state.uploadErr = false; //上传失败
+    };
     return {
       ...toRefs(state),
       afterVisibleChange,
@@ -248,6 +322,7 @@ export default {
       BATCH_IMPORT_SCORE,
       beforeUpload,
       handleUpload,
+      removeUpload,
     };
   },
 };
@@ -346,7 +421,9 @@ export default {
               border: 1px dashed #eaeaea;
               margin-bottom: 30px;
               display: flex;
-              align-items: center;
+              flex-direction: column;
+              justify-content: center;
+              position: relative;
               .content {
                 display: flex;
                 margin-left: 20px;
@@ -440,6 +517,24 @@ export default {
                   }
                 }
               }
+              .downloadErr {
+                width: 120px;
+                height: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 2px;
+                border: 1px solid #387df7;
+                font-size: 14px;
+                font-weight: 400;
+                color: #387df7;
+                line-height: 20px;
+                cursor: pointer;
+                margin-left: 66px;
+                margin-top: 16px;
+                position: absolute;
+                bottom: 28;
+              }
             }
           }
         }

src/components/drawers/project/ProjectHomeWorkManage.vue

@@ -5,6 +5,7 @@
     placement="right"
     width="60%"
     @after-visible-change="afterVisibleChange"
+    :zIndex="100"
   >
     <div class="drawerMain">
       <div class="header">

src/components/drawers/router/RouterHomeworkManage.vue

@@ -6,6 +6,7 @@
     placement="right"
     width="60%"
     @after-visible-change="afterVisibleChange"
+    :zIndex="100"
   >
     <div class="drawerMain">
       <div class="header">