通用批量上传组件

src/components/Comon/batchImportDialog.vue

@@ -0,0 +1,190 @@
+<template>
+  <Base-dialog
+    title="导入"
+    width="660px"
+    :isShow.sync="isShow"
+    :isShowFooter="false"
+  >
+    <div>
+      <div class="swq">
+        <img
+          style="width: 182px; height: 168px"
+          src="@/assets/images/dr.png"
+          alt=""
+        />
+      </div>
+      <div style="padding-left: 100px">
+        <p>第一步：下载导入模板</p>
+        <p style="padding-left: 50px">
+          <i class="el-icon-upload"></i
+          ><span class="dowmStys" @click="getDowm">下载模板</span>
+        </p>
+        <p>第二步：(批量新增)：点击“上传Excel”完成导入</p>
+        <div
+          v-loading="loading"
+          element-loading-text="正在处理中"
+          style="margin: 0 0 20px 50px; width: 130px; height: 60px"
+        >
+          <label
+            v-show="!loading"
+            for="mobles"
+            class="el-button el-button--primary"
+            >上传Excel</label
+          ><input
+            style="display: none"
+            type="file"
+            id="mobles"
+            ref="input1"
+            @change="importMobleadd"
+          />
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isShow = false">取消</el-button>
+      </span>
+      <Base-dialog
+        title="提示"
+        width="660px"
+        :isShow.sync="isShowErr"
+        :appendToBody="true"
+        :isShowFooter="false"
+      >
+        <div>
+          <div>
+            <h4 style="margin-top: 0px; font-weight: bold; text-align: center">
+              导入失败原因
+            </h4>
+            <el-input
+              readonly
+              type="textarea"
+              :autosize="{ minRows: 6, maxRows: 24 }"
+              v-model="errorData"
+            >
+            </el-input>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="$emit('update:isShowErr', false)"
+              >确定</el-button
+            >
+          </span>
+        </div>
+      </Base-dialog>
+    </div>
+  </Base-dialog>
+</template>
+
+<script>
+import * as baseUrls from "@/utils/request.js";
+export default {
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+    temUrl: {
+      type: String,
+    },
+    apiKey: {
+      type: String,
+    },
+    newSujectApis: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    isShowErr: {
+      type: Boolean,
+      default: false,
+    },
+    errorData: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      loading: false,
+    };
+  },
+  methods: {
+    getDowm() {
+      let url = baseUrls.BASE_IMG_URL + this.temUrl;
+      let link = document.createElement("a");
+      let fileName = "导入模板" + ".xlsx";
+      document.body.appendChild(link);
+      link.href = url;
+      link.dowmload = fileName;
+      link.click();
+      link.remove();
+    },
+    importMobleadd(e) {
+      if (!this.newSujectApis.length) {
+        this.$message.error("请添加科目");
+        return;
+      }
+      var self = this;
+      var file = e.target.files[0];
+      if (file === undefined) {
+        e.target.value = "";
+        return;
+      }
+      var type = e.target.value.toLowerCase().split(".").splice(-1);
+      if (type[0] != "xlsx" && type[0] != "xls") {
+        self.$message.error("请上传excel文件,且上传格式需为：.xlsx");
+        return;
+      }
+      this.loading = true;
+      let formData = new FormData();
+      formData.append("businessJson", JSON.stringify(this.newSujectApis));
+      formData.append("file", file);
+      this.$api[this.apiKey](formData)
+        .then(async (res) => {
+          if (res.code === 200) {
+            this.$emit("success", res.data);
+          }
+        })
+        .finally(() => {
+          e.target.value = "";
+          this.loading = false;
+        });
+    },
+  },
+  computed: {
+    isShow: {
+      get() {
+        return this.dialogVisible;
+      },
+      set(val) {
+        this.$emit("update:dialogVisible", false);
+      },
+    },
+  },
+  watch: {
+    dialogVisible(val) {},
+  },
+};
+</script>
+
+<style  lang="less" scoped>
+.swq {
+  text-align: center;
+  border-bottom: 1px solid #eee;
+}
+.dowmStys {
+  color: blue;
+  cursor: pointer;
+}
+/deep/.el-dialog {
+  .el-dialog__body {
+    padding: 30px 20px 0;
+  }
+  .dialog-footer {
+    height: 80px;
+    border-top: 1px solid #e2e2e2;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+</style>

src/views/resource/videoManagement/festival/index.vue

@@ -72,18 +72,29 @@
             ><span class="dowmStys" @click="getDowm">下载模板</span>
           </p>
           <p>第二步：(批量新增)：点击“上传Excel”完成导入</p>
-          <label
-            for="mobles"
-            class="el-button el-button--primary"
-            style="margin-left: 50px; padding: 10px 20px"
-            >上传Excel</label
-          ><input
-            style="display: none"
-            type="file"
-            id="mobles"
-            ref="input1"
-            @change="importMobleadd"
-          />
+          <div
+            v-loading="loading"
+            element-loading-text="正在处理中"
+            style="
+              margin-left: 50px;
+              padding: 10px 20px;
+              width: 130px;
+              height: 60px;
+            "
+          >
+            <label
+              v-show="!loading"
+              for="mobles"
+              class="el-button el-button--primary"
+              >上传Excel</label
+            ><input
+              style="display: none"
+              type="file"
+              id="mobles"
+              ref="input1"
+              @change="importMobleadd"
+            />
+          </div>
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -323,6 +334,7 @@ export default {
       currentPage: 1, //当前页码
       errorData: "", //导入错误原因
       dialogERROR: false,
+      loading: false,
     };
   },
   mounted() {
@@ -386,6 +398,7 @@ export default {
         self.$message.error("请上传excel文件,且上传格式需为：.xlsx");
         return;
       }
+      this.loading = true;
       let formData = new FormData();
       formData.append("file", file);
       this.$api
@@ -411,6 +424,7 @@ export default {
         .finally(() => {
           self.search();
           e.target.value = "";
+          this.loading = false;
         });
     },
     moreActive() {

src/views/resource/videoManagement/moduleManagement/add/index.vue

@@ -425,18 +425,21 @@
             ><span class="dowmStys" @click="getDowm">下载模板</span>
           </p>
           <p>第二步：(批量新增)：点击“上传Excel”完成导入</p>
-          <label
-            for="mobles"
-            class="el-button el-button--primary"
-            style="margin-left: 50px; padding: 10px 20px"
-            >上传Excel</label
-          ><input
-            style="display: none"
-            type="file"
-            id="mobles"
-            ref="input1"
-            @change="importMobleadd"
-          />
+         <div
+            v-loading="loading"
+            element-loading-text="正在处理中"
+            style="margin-left: 50px; padding: 10px 20px;width:130px;height:60px"
+          >
+            <label v-show="!loading" for="mobles" class="el-button el-button--primary"
+              >上传Excel</label
+            ><input
+              style="display: none"
+              type="file"
+              id="mobles"
+              ref="input1"
+              @change="importMobleadd"
+            />
+          </div>
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -598,6 +601,7 @@ export default {
       errorData: "",
       dialogERROR: false,
       dialogDR: false,
+      loading:false
     };
   },
   watch: {
@@ -673,6 +677,7 @@ export default {
         self.$message.error("请上传excel文件,且上传格式需为：.xlsx");
         return;
       }
+      this.loading = true
       let formData = new FormData();
       formData.append("businessJson", JSON.stringify(this.newSujectApis));
       formData.append("file", file);
@@ -713,6 +718,7 @@ export default {
         })
         .finally(() => {
           e.target.value = "";
+          this.loading = false
         });
     },
     /**

src/views/resource/videoManagement/moduleManagement/edit/index.vue

@@ -370,7 +370,7 @@
       </span>
     </el-dialog>
     <el-dialog
-      :visible.sync="dialogDR"
+      :visible.sync="loading"
       width="660px"
       :show-close="false"
       :close-on-click-modal="false"
@@ -400,18 +400,29 @@
             ><span class="dowmStys" @click="getDowm">下载模板</span>
           </p>
           <p>第二步：(批量新增)：点击“上传Excel”完成导入</p>
-          <label
-            for="mobles"
-            class="el-button el-button--primary"
-            style="margin-left: 50px; padding: 10px 20px"
-            >上传Excel</label
-          ><input
-            style="display: none"
-            type="file"
-            id="mobles"
-            ref="input1"
-            @change="importMobleadd"
-          />
+          <div
+            v-loading="loading"
+            element-loading-text="正在处理中"
+            style="
+              margin-left: 50px;
+              padding: 10px 20px;
+              width: 130px;
+              height: 60px;
+            "
+          >
+            <label
+              v-show="!loading"
+              for="mobles"
+              class="el-button el-button--primary"
+              >上传Excel</label
+            ><input
+              style="display: none"
+              type="file"
+              id="mobles"
+              ref="input1"
+              @change="importMobleadd"
+            />
+          </div>
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -419,9 +430,18 @@
         <!-- <el-button type="primary" @click="submitChecksDR">确定</el-button> -->
       </span>
     </el-dialog>
+    <batch-import-dialoga
+      :dialogVisible.sync="dialogDR"
+      :isShowErr.sync="dialogERROR"
+      :errorData="errorData"
+      temUrl="/oss/images/file/20220617/1655453121157.xlsx"
+      apiKey="CoursemoduleimportData"
+      :newSujectApis="newSujectApis"
+      @success="success"
+    ></batch-import-dialoga>
     <el-dialog
       append-to-body
-      :visible.sync="dialogERROR"
+      :visible.sync="dialogVisible"
       width="660px"
       :show-close="false"
       :close-on-click-modal="false"
@@ -461,9 +481,10 @@ import * as baseUrls from "@/utils/request.js";
 import searchBoxNew from "@/components/searchBoxNew";
 import pagination from "@/components/pagination";
 import addChapter from "../addChapter.vue";
+import batchImportDialoga from "@/components/Comon/batchImportDialog.vue";
 export default {
   name: "ModuleManagementEdit",
-  components: { searchBoxNew, pagination, addChapter },
+  components: { searchBoxNew, pagination, addChapter, batchImportDialoga },
   data() {
     return {
       disabledBtn: false,
@@ -574,6 +595,7 @@ export default {
       errorData: "",
       dialogERROR: false,
       dialogDR: false,
+      loading: false,
     };
   },
   watch: {
@@ -631,13 +653,12 @@ export default {
         return;
       }
       this.dialogDR = true;
-    }
+    },
     /**
      *
      * @param {Object} e
      * @remards 导入逻辑
-     */,
-    importMobleadd(e) {
+     */ importMobleadd(e) {
       if (!this.newSujectApis.length) {
         this.$message.error("请添加科目");
         return;
@@ -645,14 +666,15 @@ export default {
       var self = this;
       var file = e.target.files[0];
       if (file === undefined) {
-        e.target.value = ""
+        e.target.value = "";
         return;
       }
       var type = e.target.value.toLowerCase().split(".").splice(-1);
-      if (type[0] != "xlsx"&& type[0] != "xls") {
+      if (type[0] != "xlsx" && type[0] != "xls") {
         self.$message.error("请上传excel文件,且上传格式需为：.xlsx");
         return;
       }
+      this.loading = true;
       let formData = new FormData();
       formData.append("businessJson", JSON.stringify(this.newSujectApis));
       formData.append("file", file);
@@ -693,6 +715,7 @@ export default {
         })
         .finally(() => {
           e.target.value = "";
+          this.loading = false;
         });
     },
     /**
@@ -728,6 +751,32 @@ export default {
           });
       });
     },
+    success({ importNo, errorLog }) {
+      console.log(importNo, errorLog)
+      this.awaitGetFestivalList(importNo, errorLog ? 2 : 1)
+        .then((result) => {
+          if (!errorLog) {
+            self.dialogDR = false;
+          } else {
+            let ary = errorLog.split("\r\n");
+            ary = ary
+              .filter((item) => {
+                return item.length > 0;
+              })
+              .reverse();
+            this.$message({
+              message: `${ary.length}条数据导入失败,请查看失败原因`,
+              customClass: "myMessageClass",
+            });
+            ary = ary.join("\r\n");
+            this.errorData = ary;
+            this.dialogERROR = true;
+          }
+        })
+        .catch(() => {
+          e.target.value = "";
+        });
+    },
     jumpChapter(v) {
       const jump = () => {
         this.$store.dispatch("changemodulePage", {
@@ -1177,7 +1226,7 @@ export default {
       }
       this.tableData = this.tableData.concat(this.activeLists);
       this.dialogVisible = false;
-      this.activeLists = []
+      this.activeLists = [];
       if (!int) {
         this.$message({
           type: "success",