element 导入

最新推荐文章于 2024-08-03 14:25:09 发布

上课都不放假

最新推荐文章于 2024-08-03 14:25:09 发布

阅读量393

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50561985/article/details/126625828

版权

— 个人纪录

父组件

  <InitializationImport v-if="isDrawer" :isDrawer="isDrawer" @showModal="showModal" @fetchData="fetchData" />

子组件

<template>
  <el-dialog title="导入" :visible="isDrawer" width="25%" :before-close="handleCancles">
    <div class="dialog">
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
      >
        <el-button size="small" type="primary">选择文件</el-button>
        <div slot="tip" class="el-upload__tip">一次只能导入一个文件,（支持xls、xlsx格式）</div>
      </el-upload>
      <div class="export">
        <span> 下载导入模板：</span>
        <a @click="importClick"> 库存初始化导入模板.xlsx</a>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="button-color" size="small" type="primary" @click="save">导 入</el-button>
      <el-button size="small" @click="handleCancles">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { BASE_URL } from "@/services/api";
export default {
  props: {
    isDrawer: Boolean,
  },
  data() {
    return {
      // 用户导入参数
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: localStorage.getItem("Authorization") },
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 上传的地址
        url: BASE_URL + "/erp/stock/init/importStock/" + JSON.parse(localStorage.getItem("companyInfo")).companyId,
      },
    };
  },
  created() {
    // console.log(localStorage.getItem("Authorization"));
  },
  methods: {
    importClick() {
      window.open("/ERP/库存初始化导入模板.xlsx", "_blank");
    },
    handleCancles() {
      this.$emit("showModal");
    },
    save() {
      this.$refs.upload.submit();
    },
    // 提交上传文件
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      // console.log(event, file, fileList);
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      var msg;
      if (response.code === 0) {
        msg = "导入成功";
      } else {
        msg = response.msg;
      }
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + msg + "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.$emit("showModal");
      this.$emit("fetchData");
      msg = null;
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/pages/ERP/index.less";
/deep/.el-dialog__header {
  border-bottom: 1px solid #f0f0f0;
}
/deep/.el-dialog__footer {
  border-top: 1px solid #f0f0f0;
}
.dialog {
  margin-left: 30px;
}
.export {
  margin-top: 20px;
  > span {
    font-weight: bold;
    font-style: normal;
    font-size: 14px;
    letter-spacing: normal;
    color: #333333;
  }
}
</style>