zc_saas_admin/src/views/resource/bankManagement/topicManagement/excelPop.vue

<template>
  <div>
    <div class="swq">
      <img
        style="width: 182px; height: 168px"
        src="@/assets/images/dr.png"
        alt=""
      />
    </div>
    <div style="padding-left: 100px">
      <p>第一步：下载excel导入模板</p>
      <p style="padding-left: 50px">
        <i class="el-icon-upload"></i
        ><span class="dowmStys" @click="getDowm">下载模板</span>
      </p>
      <p>第二步：点击“上传Excel”</p>
      <label for="mobles2" class="el-button el-button--primary el-button--mini"
        >上传Excel</label
      ><input
        style="display: none"
        type="file"
        id="mobles2"
        ref="input2"
        @change="importMobleadd"
      />
    </div>
  </div>
</template>

<script>
import * as baseUrls from "@/utils/request.js";
export default {
  data() {
    return {};
  },
  methods: {
    getDowm() {
      let url =
        baseUrls.BASE_IMG_URL +
        "/oss/images/file/20220307/1646623385198.xlsx" +
        `?time=${this.$methodsTools.getNewTime()}`;
      let link = document.createElement("a");
      let fileName = "导入模板" + ".xlsx";
      document.body.appendChild(link);
      link.href = url;
      link.dowmload = fileName;
      link.click();
      link.remove();
    },
    importMobleadd(e) {
      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;
      }
      let formData = new FormData();
      formData.append("file", file);
      this.$api
        .importDatabankquestion(formData)
        .then((res) => {
          if (res.msg == "操作成功") {
            self.$message.success("导入成功");
          } else {
            let url = baseUrls.baseURL + "common/download?fileName=" + res.msg;
            let link = document.createElement("a");
            let fileName = "导入模板" + ".xlsx";
            document.body.appendChild(link);
            link.href = url;
            link.dowmload = fileName;
            link.click();
            link.remove();
            self.$message.warning("导入有误，请打开文档查看错误原因");
          }
        })
        .finally(() => {
          e.target.value = "";
          self.$emit("search", 2);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.swq {
  text-align: center;
  border-bottom: 1px solid #eee;
}
.dowmStys {
  color: blue;
  cursor: pointer;
}
</style>