From 51b435c46b94ca053c3c1ae2c099a7f0b4f5159e Mon Sep 17 00:00:00 2001
From: yuping <82253452@qq.com>
Date: Tue, 21 Feb 2023 03:02:34 +0800
Subject: [PATCH] =?UTF-8?q?fix=20--=20=E5=AF=BC=E5=85=A5=E7=BB=84=E9=95=BF?=
 =?UTF-8?q?=E5=92=8C=E8=B7=AF=E5=BE=84=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../drawers/project/ImpoterGroupLeader.vue    | 562 ++++++------------
 src/utils/useCommon.js                        |  45 ++
 src/views/learningpath/LearningPath.vue       |  16 +-
 src/views/projectcenter/TaskPage.vue          |  15 +-
 4 files changed, 261 insertions(+), 377 deletions(-)
 create mode 100644 src/utils/useCommon.js

diff --git a/src/components/drawers/project/ImpoterGroupLeader.vue b/src/components/drawers/project/ImpoterGroupLeader.vue
index f5eb9355..f24712c2 100644
--- a/src/components/drawers/project/ImpoterGroupLeader.vue
+++ b/src/components/drawers/project/ImpoterGroupLeader.vue
@@ -1,18 +1,20 @@
 <template>
+  <div @click="openDrawer">
+    <slot></slot>
+  </div>
   <a-drawer
-    :visible="ImpoterGroupLeaderV"
-    class="drawerStyle impotergroupleader"
-    placement="right"
-    width="800px"
-    @after-visible-change="afterVisibleChange"
+      :visible="visible"
+      class="drawerStyle impotergroupleader"
+      placement="right"
+      width="800px"
   >
     <div class="drawerMain">
       <div class="header">
         <div class="headerTitle">导入小组长</div>
         <img
-          style="width: 29px; height: 29px; cursor: pointer"
-          src="../../../assets/images/basicinfo/close.png"
-          @click="closeDrawer"
+            style="width: 29px; height: 29px; cursor: pointer"
+            src="../../../assets/images/basicinfo/close.png"
+            @click="closeDrawer"
         />
       </div>
       <div class="main">
@@ -28,146 +30,58 @@
           <div class="right">
             <div style="height: 176px; margin-bottom: 20px">
               <a-upload-dragger
-                v-model:fileList="fileList"
-                :action="importLeader"
-                name="uploadFile"
-                :multiple="true"
-                @change="handleChange"
-                :showUploadList="false"
+                  :data="data"
+                  :multiple="true"
+                  :accept="accept"
+                  :action="uploadUrl"
+                  @change="handleChange"
+                  v-model:file-list="fileList"
+                  :before-upload="beforeUpload"
               >
                 <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>
+                <template #itemRender="{ file }">
+                  <div class="loadstate">
+                    <div class="loadborder">
+                      <div class="content">
+                        <div class="img"></div>
+                        <div class="timebox">
+                          <div class="timetop">
+                            <div class="tit">{{ file.name }}</div>
+                            <div class="stateloading">{{
+                                {
+                                  done: '上传成功',
+                                  uploading: '正在上传',
+                                  error: '上传失败',
+                                  removed: '正在上传',
+                                }[file.status]
+                              }}
+                            </div>
+                          </div>
+                          <a-progress :percent="file.percent"/>
+                        </div>
+                        <div class="curloading">
+                          <div class="cur">{{ file.percent }}%</div>
+                          <div style="color: #387df7; margin-left: 20px; cursor: pointer"
+                               v-if="file.uploadState?.status === 'FAILED'" @click="downloadErrorData(file.uploadState?.url)">
+                            下载失败数据
+                          </div>
+                        </div>
+                      </div>
+                      <a-spin :spinning="true" v-if="file.uploadState?.status === 'START'"/>
+                      <div :class="file.uploadState?.status === 'SUCCESS'?'succebox':'defeatbox'" v-if="file.uploadState?.status === 'FAILED'">
+                        <img style="width: 14px; height: 14px; margin-left: 16px"
+                             :src="file.uploadState?.status === 'SUCCESS' ? success:err"/>
+                        <div class="tacl">{{file.uploadState?.successNum || 0}}条数据导入成功，{{file.uploadState?.failedNum || 0}}条数据导入失败</div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
               </a-upload-dragger>
             </div>
-            <!-- <div class="load">
-                <div class="cloud"></div>
-                <div class="tip">点击或将文件拖拽到此处上传</div>
-                <div class="tipz">支持扩展名：.xls/.xlsx</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>
@@ -176,235 +90,62 @@
         <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>
-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: "EScore",
-  props: {
-    ImpoterGroupLeaderV: {
-      type: Boolean,
-      default: false,
-    },
-    projectId: {
-      type: Number,
-      default: null,
-    },
+<script setup>
+import {defineEmits, defineProps, ref} from "vue";
+import {getImportStatus} from "@/api/index1";
+import {useTimeout} from "@/utils/useCommon";
+import err from "@/assets/images/err.png";
+import success from "@/assets/images/success.png";
 
-    //type=1 路径图 type=2 项目
-    type: {
-      type: String,
-      default: null,
-    },
-    id: {
-      type: Number,
-      default: null,
-    },
-    targetId: {
-      type: Number,
-      default: null,
-    },
-    taskId: {
-      type: Number,
-      default: null,
-    },
-    chapterId: {
-      type: Number,
-      default: null,
-    },
-    pid: {
-      type: Number,
-      default: null,
-    },
-    searchTaskList: {
-      type: Function,
-      default: null,
-    },
-  },
-  setup(props, ctx) {
-    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:ImpoterGroupLeaderV", false);
-      state.fileList = [];
-      state.uploadpercent = -1;
-      state.uploadErr = false; //上传失败
-    };
+const props = defineProps({
+  url: String,
+  accept: String,
+  fileType: Object,
+  data: Object,
+  templateUrl: String,
+})
+const emit = defineEmits({})
 
-    const afterVisibleChange = (bool) => {
-      console.log("state", bool);
-      if (bool) {
-        console.log("当前是 1 项目 2 路径图", props.type);
-      }
-    };
+const visible = ref(false)
+const fileList = ref([])
+const uploadUrl = ref(process.env.VUE_APP_BASE_API + props.url);
+const {start} = useTimeout(async ({uuid,file}) => {
+  const {data: {data: upData}} = await getImportStatus(uuid)
+  file.uploadState = upData;
+  fileList.value=[...fileList.value]
+  if (upData && upData.status !== "START" && upData.status !== "NULL") {
+    emit('change','end')
+    throw Error("查询任务结束")
+  }
+}, 1000)
 
-    //上传文件
-    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);
-    }
-
-    return {
-      ...toRefs(state),
-      afterVisibleChange,
-      closeDrawer,
-      handleChange,
-      downTemplate,
-      BATCH_IMPORT_SCORE,
-      beforeUpload,
-      handleUpload,
-      removeUpload,
-      downloadEeeorData,
-    };
-  },
+const closeDrawer = () => {
+  visible.value = false;
+  fileList.value = [];
 };
+
+function openDrawer() {
+  visible.value = true
+}
+
+function downTemplate() {
+  window.open(process.env.VUE_APP_BASE_API + props.templateUrl);
+}
+
+function downloadErrorData(url) {
+  window.open(process.env.VUE_APP_BASE_API + url)
+}
+
+function handleChange({file}) {
+  emit('change','start');
+  file && file.response && start({uuid:file.response.data,file})
+}
 </script>
 
-<style scoped lang="scss" >
+<style scoped lang="scss">
 .impotergroupleader {
   .drawerMain {
     min-width: 600px;
@@ -412,6 +153,7 @@ export default {
     overflow-x: auto;
     display: flex;
     flex-direction: column;
+
     .header {
       height: 73px;
       border-bottom: 1px solid #e8e8e8;
@@ -421,6 +163,7 @@ export default {
       // background-color: red;
       margin-bottom: 20px;
       flex-shrink: 0;
+
       .headerTitle {
         font-size: 18px;
         font-weight: 600;
@@ -429,15 +172,18 @@ export default {
         // margin-left: 24px;
       }
     }
+
     .main {
-      overflow-y: auto;
+
       .minatitl {
         display: flex;
+
         .up1 {
           font-size: 16px;
           font-weight: 400;
           color: #333333;
         }
+
         .up2 {
           font-size: 16px;
           font-weight: 400;
@@ -445,16 +191,21 @@ export default {
           margin-left: 4px;
         }
       }
+
       .upload {
         margin-top: 32px;
         display: flex;
+
         .text {
           font-size: 14px;
           font-weight: 400;
           color: #333333;
         }
+
         .right {
           margin-left: 6px;
+          width: 500px;
+
           .load {
             width: 500px;
             height: 176px;
@@ -466,12 +217,14 @@ export default {
             flex-direction: column;
             align-items: center;
             margin-bottom: 20px;
+
             .cloud {
               margin-top: 52px;
               width: 28px;
               height: 28px;
               background-image: url(../../../assets/images/basicinfo/cloud.png);
             }
+
             .tip {
               font-size: 14px;
               font-weight: 400;
@@ -479,6 +232,7 @@ export default {
               margin-top: 15px;
               cursor: pointer;
             }
+
             .tipz {
               font-size: 14px;
               font-weight: 400;
@@ -486,9 +240,10 @@ export default {
               margin-top: 10px;
             }
           }
+
           .loadstate {
             width: 500px;
-            margin-bottom: 100px;
+            margin-bottom: 50px;
 
             .loadborder {
               width: 500px;
@@ -500,27 +255,45 @@ export default {
               flex-direction: column;
               justify-content: center;
               position: relative;
+
               .content {
                 display: flex;
                 margin-left: 20px;
                 position: relative;
+
                 .defeat {
-                  width: 400px;
+                  width: 262px;
+                  padding: 10px 20px;
                   position: absolute;
                   left: 46px;
-                  top: 38px;
+                  top: 42px;
                   font-size: 14px;
                   font-weight: 500;
-                  justify-content: space-between;
+                  height: 32px;
+                  border-radius: 2px;
+                  border: 1px solid #387df7;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  cursor: pointer;
+
+                  .detext {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #387df7;
+                  }
                 }
+
                 .img {
                   width: 30px;
                   height: 34px;
                   background-image: url(../../../assets/images/basicinfo/exl.png);
                 }
+
                 .timebox {
                   margin-left: 15px;
                   margin-top: -5px;
+
                   .timetop {
                     display: flex;
                     width: 262px;
@@ -531,27 +304,32 @@ export default {
                       font-weight: 400;
                       color: #333333;
                     }
+
                     .stateloading {
                       font-size: 14px;
                       font-weight: 400;
                       color: #4ea6ff;
                     }
+
                     .statedefeat {
                       font-size: 14px;
                       font-weight: 400;
                       color: #ff7474;
                     }
+
                     .statesucce {
                       font-size: 14px;
                       font-weight: 400;
                       color: #35ae69;
                     }
                   }
+
                   .prog {
                     width: 262px;
                     height: 5px;
                     background: #eaf1fe;
                     border-radius: 4px;
+
                     .inprogloading {
                       width: 55%;
                       height: 5px;
@@ -559,6 +337,7 @@ export default {
 
                       background: #4ea6ff;
                     }
+
                     //下载失败条
                     .inprogdefeat {
                       width: 55%;
@@ -567,6 +346,7 @@ export default {
 
                       background: #ff7474;
                     }
+
                     //下载成功条
                     .inprogsucce {
                       width: 100%;
@@ -577,15 +357,18 @@ export default {
                     }
                   }
                 }
+
                 .curloading {
                   margin-left: 15px;
                   margin-top: 15px;
                   display: flex;
+
                   .cur {
                     font-size: 14px;
                     font-weight: 400;
                     color: #333333;
                   }
+
                   .cancel {
                     font-size: 14px;
                     font-weight: 400;
@@ -593,6 +376,7 @@ export default {
                   }
                 }
               }
+
               .downloadErr {
                 width: 120px;
                 height: 32px;
@@ -612,10 +396,56 @@ export default {
                 bottom: 28;
               }
             }
+
+            .defeatbox {
+              width: 500px;
+              height: 40px;
+              margin-top: 20px;
+              background: rgba(255, 116, 116, 0.1);
+              border: 1px solid #ff7474;
+              display: flex;
+              align-items: center;
+
+              .lefimg {
+                width: 14px;
+                height: 14px;
+                margin-right: 8px;
+                background-size: 100%;
+              }
+
+              .tacl {
+                font-size: 14px;
+                font-weight: 400;
+                margin-left: 17px;
+                color: #ff7474;
+              }
+            }
+            .succebox {
+              width: 500px;
+              height: 40px;
+              background: rgba(53, 174, 105, 0.1);
+              border: 1px solid #35ae69;
+              display: flex;
+              align-items: center;
+              .lefimg {
+                width: 14px;
+                height: 14px;
+                margin-left: 17px;
+                margin-right: 8px;
+                background-size: 100%;
+              }
+              .tacl {
+                font-size: 14px;
+                font-weight: 400;
+
+                color: rgba(0, 0, 0, 0.65);
+              }
+            }
           }
         }
       }
     }
+
     .btnn {
       height: 72px;
       width: 100%;
@@ -627,6 +457,7 @@ export default {
       align-items: center;
       justify-content: center;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+
       .btn1 {
         width: 100px;
         height: 40px;
@@ -636,6 +467,7 @@ export default {
         background-color: #fff;
         cursor: pointer;
       }
+
       .btn2 {
         cursor: pointer;
         width: 100px;
diff --git a/src/utils/useCommon.js b/src/utils/useCommon.js
new file mode 100644
index 00000000..d55a0cc5
--- /dev/null
+++ b/src/utils/useCommon.js
@@ -0,0 +1,45 @@
+import {ref} from "vue";
+import {message} from "ant-design-vue";
+
+export function useInterval(fun, time) {
+    const timer = ref();
+
+    function start(d) {
+        clearInterval(timer.value)
+        timer.value = setInterval(async () => {
+            if (await fun(d)) {
+                clearInterval(timer.value)
+            }
+        }, time);
+    }
+
+    return {start}
+}
+
+export function useTimeout(asyncFun, time) {
+    const timer = ref();
+    const maxCount = ref(0);
+
+    function start(d) {
+        clearTimeout(timer.value)
+        maxCount.value = 0
+        execute(d)
+    }
+
+    async function execute(d) {
+        if (maxCount.value > 300) {
+            message.error("等待超时，请联系管理员！")
+            throw Error("等待超时 查询任务结束")
+        }
+        try {
+            await asyncFun(d)
+            maxCount.value = maxCount.value + 1
+            timer.value = setTimeout(() => execute(d), time);
+        } catch (e) {
+            clearTimeout(timer.value)
+            console.log(e)
+        }
+    }
+
+    return {start}
+}
diff --git a/src/views/learningpath/LearningPath.vue b/src/views/learningpath/LearningPath.vue
index 099351de..a01d8184 100644
--- a/src/views/learningpath/LearningPath.vue
+++ b/src/views/learningpath/LearningPath.vue
@@ -232,7 +232,7 @@
                     pathBgId === item.code
                       ? '2px solid rgba(78, 166, 255, 1)'
                       : '1px solid #C7CBD2',
-                  'background-image': 'url(' + item.value + ')',
+                  'background-image': 'url(' + item.value[0] + ')',
                   display: index >= 5 ? 'none' : 'flex',
                 }"
                 style="background-size: 100% 100%"
@@ -1185,6 +1185,10 @@ export default {
         message.destroy();
         return message.warning("请选择背景图");
       }
+      if (!state.mobilePicUrl) {
+        message.destroy();
+        return message.warning("未配置H5背景图，请联系管理员！");
+      }
       if (!state.validate) {
         message.destroy();
         message.warning("路径图名称重复");
@@ -1208,7 +1212,8 @@ export default {
         status: 0,
         organizationId: state.organizationSelectId,
         organizationName: state.organizationSelectName,
-        picUrl: state.pathBg,
+        picUrl: state.pathBg.split(',')[0],
+        mobilePicUrl: state.pathBg.split(',')[1],
       }).then(id => {
           message.destroy();
           message.success("创建成功");
@@ -1298,6 +1303,10 @@ export default {
         message.destroy();
         return message.warning("请选择背景图");
       }
+      if (!state.mobilePicUrl) {
+        message.destroy();
+        return message.warning("未配置H5背景图，请联系管理员！");
+      }
       if (!state.validate) {
         message.destroy();
         return message.warning("路径图名称重复");
@@ -1324,7 +1333,8 @@ export default {
       let obj = {
         routerId: state.editPathId,
         name: state.pathName,
-        picUrl: state.pathBg,
+        picUrl: state.pathBg.split(',')[0],
+        mobilePicUrl: state.pathBg.split(',')[1],
         remark: state.pathIntro,
         organizationName: state.organizationSelectName,
         organizationId: state.organizationSelectId,
diff --git a/src/views/projectcenter/TaskPage.vue b/src/views/projectcenter/TaskPage.vue
index 6abb5e12..65a29af1 100644
--- a/src/views/projectcenter/TaskPage.vue
+++ b/src/views/projectcenter/TaskPage.vue
@@ -758,9 +758,12 @@
                   <div class="btn2" @click="exportGroup">
                     <span class="btn2text">导出小组</span>
                   </div>
-                  <div class="btn2" @click="importGroupLeader">
-                    <span class="btn2text">导入小组长</span>
-                  </div>
+                  <ImpoterGroupLeader :url="`/admin/studentGroup/importGroup`" :template-url="`/admin/studentGroup/exportGroup/${projectId}`">
+                    <div class="btn2">
+                      <span class="btn2text">导入小组长</span>
+                    </div>
+                  </ImpoterGroupLeader>
+
                 </div>
                 <!-- 小组列表  -->
                 <div class="groupmain">
@@ -2106,12 +2109,6 @@
       :checkgroupStuId="checkgroupStuId"
     />
     <!-- 换组弹窗 -->
-    <!-- 导入小组长 -->
-    <ImpoterGroupLeader
-      v-model:ImpoterGroupLeaderV="ImpoterGroupLeaderV"
-      :projectId="projectId"
-    />
-    <!-- 导入小组长 -->
   </div>
 </template>
 <script>