pms-aomei/src/components/DialogUpload.vue

<template>
  <el-dialog
    v-loading='loadingStatus'
    element-loading-text="处理中，请耐心等待..."
    element-loading-background="rgba(0,0,0,0.1)"
    class="dialog-just-form"
    :visible="visible"
    @close="handleClose"
    width="30%"
    :title="title"
    :destroy-on-close="false"
    :close-on-click-modal="configs.clickModalToClose ?? false">
    <el-upload
      style="margin-top: 24px; text-align: center"
      drag
      :action="actionUrl"
      :headers="uploadHeaders"
      :show-file-list="false"
      :on-error="handleError"
      :on-success="handleSuccess"
      :on-progress="handleUploading"
      :before-upload="handleBeforeUploadCheck">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">{{ hint }}</div>
    </el-upload>

    <div slot="footer">
      <el-button
        type="success"
        @click="
          handleBtnClick({
            name: 'download-template',
            filename: savedFilename,
            url: templateUrl,
          })
        ">
        下载模板
      </el-button>
      <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { pick as __pick } from "@/utils/filters";
import Cookies from "js-cookie";
// import moment from "moment";

export default {
  name: "DialogUpload",
  props: {
    title: {
      type: String,
      default: "导入",
    },
    hint: {
      hint: String,
      default: "只能上传 Excel 文件",
    },
    filename: {
      hint: String,
      default: "default_file.xlsx",
    },
    url: {
      // 下载地址
      hint: String,
      default: "/importTemplates/orderImport.xlsx",
    },
    configs: {
      type: Object,
      default: () => ({
        clickModalToClose: false,
        forms: null,
      }),
    },
  },
  inject: ["urls"],
  data() {
    return {
      loadingStatus: false,
      visible: false,
    };
  },
  computed: {
    uploadHeaders() {
      return {
        token: Cookies.get("token") || "",
      };
    },
    actionUrl() {
      return window.SITE_CONFIG["apiURL"] + this.urls.importUrl;
    },
    savedFilename() {
      return "templateUrl" in this.urls ? this.urls.templateUrl.split("/").pop() : this.filename;
    },
    templateUrl() {
      return "templateUrl" in this.urls ? this.urls.templateUrl : this.url ?? "#";
    },
  },
  methods: {
    init(data) {
      this.visible = true;
    },

    fileTypeCheck() {
      // 上传前检查文件类型: Boolean
    },

    fileSizeCheck() {
      // 上传前检查文件大小: Boolean
    },

    handleUploading() {
      this.loadingStatus = true
    },

    handleBeforeUploadCheck(file) {
      if (typeof file !== "object") return false;
      if (!("name" in file) || !("type" in file)) return false;
      const isXlsx =
        file.name.split(".").pop() === "xlsx" &&
        file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      const isXls = file.name.split(".").pop() === "xls" && file.type === "application/vnd.ms-excel";
      if (isXls || isXlsx) return true;
      // false
      this.$message({
        message: "仅支持上传 Excel(.xls, .xlsx) 文件",
        type: "error",
        duration: 1500,
      });
      return false;
    },

    handleSuccess(response, file, fileList) {
      console.log("success response", response);
      this.loadingStatus = false
      try {
        if ("code" in response && response.code === 500) {
          this.$message({
            message: response.msg,
            type: "error",
            duration: 1500,
          });
          return;
        }

        let message = "";
        let isError = false;

        if (typeof response === "object" && "msg" in response) message = response.msg;
        if (typeof response === "object" && "data" in response) message = response.data.toString();
        if (typeof response === "string") {
          message = response;
          isError = true;
        }

        this.handleClose();
        this.$emit("uploadSuccess");
        this.$message({
          message,
          type: isError ? "error" : "info",
          duration: 2000,
        });
      } catch (err) {
        this.$message({
          message: response,
          type: "error",
          duration: 2500,
        });
        return;
      }
    },

    handleError(err, file, fileList) {
      this.loadingStatus = false
      console.log("err", err);
    },

    handleBtnClick(payload) {
      if ("name" in payload) {
        switch (payload.name) {
          case "cancel":
            this.handleClose();
            break;
          case "download-template":
            this.handleDownloadTemplate(payload.filename, payload.url);
            break;
        }
      }
    },

    handleDownloadTemplate(filename, href) {
      this.$notify({
        title: "提示",
        message: "开始下载，请稍后检查浏览器的下载选项或者下载目录",
        type: "success",
      });

      // 下载模板
      let a = document.createElement("a");
      a.href = href;
      a.download = filename ?? "orderTemplate.xlsx";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },

    handleUploadChange(file, fileList) {
      // console.log("[Upload] handleUploadChange...", file, fileList);
    },

    handleClose() {
      this.visible = false;

      setTimeout(() => {
        this.$emit("destroy-dialog");
      }, 200);
    },
  },
};
</script>

<style scoped>
.dialog-just-form >>> .el-dialog__body {
  /* padding-top: 16px !important;
  padding-bottom: 16px !important; */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.el-select,
.el-cascader,
.el-date-editor {
  width: 100% !important;
}

.dialog-just-form >>> .el-dialog__header {
  padding: 10px 20px 10px;
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
}

.h0 {
  height: 0;
  width: 0;
}

.dialog-just-form >>> .dialog-demo {
  text-align: center;
}
</style>