前端上传文件

src/components/drawers/TaskFaceIn.vue

@@ -8,14 +8,14 @@
   >
     <div class="drawerMain">
       <!-- 2022-11-30注释 后面放开 -->
-      <!-- <div class="header">
+       <div class="header">
         <div class="headerTitle">批量面授报名</div>
         <img
           style="width: 29px; height: 29px; cursor: pointer"
           src="../../assets/images/basicinfo/close.png"
           @click="closeDrawer"
         />
-      </div> -->
+      </div>
       <div class="main">
         <div class="minatitl">
           <div class="up1">请下载</div>
@@ -25,18 +25,154 @@
         <div class="upload">
           <div class="text">上传：</div>
           <div class="right">
-            <div class="load">
+            <div style="height: 176px; margin-bottom: 20px">
+              <a-upload-dragger
+                v-model:fileList="fileList"
+                :action="importLeader"
+                name="uploadFile"
+                :multiple="true"
+                @change="handleChange"
+                :showUploadList="false"
+              >
+                <p class="ant-upload-drag-icon">
+                  <inbox-outlined></inbox-outlined>
+                </p>
+                <p class="ant-upload-text">点击或将文件拖拽到此处上传</p>
+                <p class="ant-upload-hint">支持扩展名：.xls/.xlsx</p>
+              </a-upload-dragger>
+            </div>
+            <!-- <div class="load">
               <div class="cloud"></div>
               <div class="tip">点击或将文件拖拽到此处上传</div>
               <div class="tipz">支持扩展名：.xls/.xlsx</div>
-            </div>
+            </div> -->
+            <div class="loadstate">
+              <div
+                class="loadborder"
+                v-if="uploadpercent < 100 && uploadpercent !== -1"
+              >
+                <div class="content">
+                  <div class="img"></div>
+                  <div class="timebox">
+                    <div class="timetop">
+                      <div class="tit">{{ fileName }}</div>
+                      <div class="stateloading">正在上传</div>
+                    </div>
+                    <a-progress :percent="uploadpercent" />
+                    <!-- <div class="prog">
+                        <div class="inprogloading"></div>
+                      </div> -->
+                  </div>
+                  <div class="curloading">
+                    <!-- <div class="cur">55%</div> -->
+                    <!-- <div class="cancel" style="margin-left: 20px">暂停</div>
+                      <div class="cancel" style="margin-left: 15px">取消</div> -->
+                  </div>
+                </div>
+              </div>
+              <div class="loadborder" v-if="uploadErr">
+                <div class="content">
+                  <div class="img"></div>
+                  <div class="timebox">
+                    <div class="timetop">
+                      <div class="tit">{{ fileName }}</div>
+                      <div class="statedefeat">上传失败</div>
+                    </div>
+                    <a-progress :percent="uploadpercent" />
+                    <!-- <div class="prog">
+                        <div class="inprogdefeat"></div>
+                      </div> -->
+                  </div>
 
+                  <div class="curloading">
+                    <!-- <div class="cur">55%</div> -->
+                    <div
+                      style="color: #387df7; margin-left: 20px; cursor: pointer"
+                    >
+                      下载失败数据
+                    </div>
+                    <!-- <div class="cancel" style="margin-left: 20px">暂停</div>
+                      <div class="cancel" style="margin-left: 15px">取消</div> -->
+                  </div>
+                  <div
+                    class="defeat"
+                    style="display: flex; align-items: center"
+                  >
+                    <div style="color: #ff7474">
+                      {{ succNum }}条数据导入成功，{{ errNum }}条数据导入失败
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!--  v-if="uploadpercent === 100" -->
+              <div class="loadborder" v-if="uploadpercent === 100">
+                <div class="content">
+                  <div class="img"></div>
+                  <div class="timebox">
+                    <div class="timetop">
+                      <div class="tit">{{ fileName }}</div>
+                      <div class="statesucce">上传成功</div>
+                    </div>
+                    <a-progress :percent="uploadpercent" />
+                    <!-- <div class="prog">
+                        <div class="inprogsucce"></div>
+                      </div> -->
+                  </div>
+                  <div class="curloading">
+                    <!-- <div class="cur">100%</div> -->
+                    <div
+                      class="cancel"
+                      style="margin-left: 20px; cursor: pointer"
+                      @click="removeUpload"
+                    >
+                      删除
+                    </div>
+                  </div>
+                </div>
+                <div v-if="errNum">
+                  <div class="downloadErr" @click="downloadEeeorData">
+                    下载失败数据
+                  </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>
         </div>
       </div>
       <div class="btnn">
-        <button class="btn1" @click="exitDraw">取消</button>
-        <button class="btn2" @click="exitDraw">确定</button>
+        <button class="btn1" @click="closeDrawer">取消</button>
+        <button class="btn2" @click="closeDrawer">确定</button>
       </div>
     </div>
   </a-drawer>
@@ -44,6 +180,9 @@
 
 <script>
 import { reactive, toRefs } from "vue";
+import { message } from "ant-design-vue";
+import * as api from "../../api/index1";
+import { BATCH_IMPORT_SCORE } from "@/api/config";
 export default {
   name: "TaskImpStu",
   props: {
@@ -53,24 +192,180 @@ export default {
     },
   },
   setup(props, ctx) {
-    const state = reactive({});
+    console.log(1222)
+    const state = reactive({
+      fileType: ["xls", "xlsx"],
+      importLeader:
+        process.env.VUE_APP_BASE_API +
+        `/admin/studentGroup/importGroup/${props.projectId}`,
+      uploadpercent: -1,
+      uploadErr: false, //上传失败
+      addLoading: false,
+      fileList: [],
+      succNum: 0, //成功数据数
+      errNum: 0, //失败数据数
+      downloadErrUrl: null, //下载失败数据
+      fileName: "",
+      locationHref:
+        location.href.indexOf("http://") !== -1
+          ? "http://43.143.139.204:12016/"
+          : location.href.slice(0, location.href.indexOf("/m")) + "/upload/",
+      template: process.env.VUE_APP_UP_LOAD_STUDENT_SCORE_TEMPLATE,
+    });
     const closeDrawer = () => {
+     
+      ctx.emit("closeDraw", true);
       ctx.emit("update:TaskFaceImpStuvisible", false);
+      state.fileList = [];
+      state.uploadpercent = -1;
+      state.uploadErr = false; //上传失败
     };
 
     const afterVisibleChange = (bool) => {
       console.log("state", bool);
+      if (bool) {
+        console.log("当前是 1 项目 2 路径图", props.type);
+      }
     };
 
-    const exitDraw = () => {
-      ctx.emit("update:TaskFaceImpStuvisible", false);
+    //上传文件
+    const handleChange = (info) => {
+      if (info) {
+        var FileExt = info.file.name.replace(/.+\./, "");
+        if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
+          state.fileList = [];
+          state.uploadpercent = -1;
+          message.destroy();
+          message.error("请上传正确的文件格式");
+          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") {
+        state.fileName = info.file.name;
+        let i = 0;
+        let timeouts = setTimeout(() => {
+          clearInterval(timer);
+          state.addLoading = false;
+          message.destroy();
+          message.error(`文件导入超时`);
+        }, 30000);
+
+        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;
+                    props.searchTaskList && props.searchTaskList();
+                  }
+                  state.succNum = res.data.data.successNum;
+                  state.errNum = res.data.data.failedNum;
+                  state.downloadErrUrl = res.data.data.url;
+                  console.log("props.getStudent", props.getStudent);
+                  clearInterval(timer);
+                  clearTimeout(timeouts);
+                }
+              }
+            })
+            .catch((err) => {
+              state.addLoading = false;
+              clearInterval(timer);
+              clearTimeout(timeouts);
+              console.log("查询导入状态失败", err);
+            });
+        }, 500);
+      } else if (status === "error") {
+        state.uploadErr = true;
+        message.error(`${info.file.name}上传失败`);
+      }
+    };
+    const beforeUpload = (file) => {
+      return new Promise((resolve, reject) => {
+        // const isJpgOrPng =
+        //   file.name.indexOf(".xlsx") !== "-1" ||
+        //   file.name.indexOf(".xls") !== "-1";
+
+        // if (!isJpgOrPng) {
+        //   message.destroy();
+        //   message.error("仅支持xls、xlsx格式!");
+        //   return reject(false);
+        // }
+        const formData = new FormData();
+        formData.append("uploadFile", file);
+        // let progress = { percent: 1 };
+
+        // const intervalId = setInterval(() => {
+        //   if (progress.percent < 100) {
+        //     progress.percent++;
+        //     file.onProgress(progress);
+        //   } else {
+        //     clearInterval(intervalId);
+        //   }
+        // }, 100);
+        api.batchImportScore(formData).then((res) => {
+          if (res.data.code === 200) {
+            console.log("上传成功", res);
+            return reject(true);
+          }
+        });
+        return reject(false);
+      });
+    };
+    const handleUpload = (e) => {
+      console.log("handleUpload", e);
+    };
+
+    //删除
+    const removeUpload = () => {
+      state.fileList = [];
+      state.uploadpercent = -1;
+      state.uploadErr = false; //上传失败
+      state.succNum = 0;
+      state.errNum = 0;
+      state.downloadErrUrl = null;
+      state.addLoading = false;
+    };
+    // 下载失败数据
+    const downloadEeeorData = () => {
+      if (state.downloadErrUrl !== "") {
+        window.open(process.env.VUE_APP_FILE_PATH + state.downloadErrUrl);
+      }
+    };
+    function downTemplate() {
+      // console.log(state.locationHref + state.template);
+      // window.open(state.locationHref + state.template);
     }
+    // const exitDraw = () => {
+    //   ctx.emit("update:TaskFaceImpStuvisible", false);
+    // }
 
     return {
       ...toRefs(state),
       afterVisibleChange,
       closeDrawer,
-      exitDraw
+      handleChange,
+      downTemplate,
+      BATCH_IMPORT_SCORE,
+      beforeUpload,
+      handleUpload,
+      removeUpload,
+      downloadEeeorData,
+      // exitDraw
       // change,
     };
   },