fj-dc-ui/.svn/pristine/6d/6d3150a657a03ffe9e8ee9a1fa1bb4edb615f1cd.svn-base

<template>
  <div class="inline-auto-upload">
    <el-upload
      ref="upload"
      :action="url"
      :headers="header"
      :accept="accept"
      :auto-upload="true"
      :limit="limit"
      :on-change="changeFileList"
      :on-remove="handleRemove"
      :on-success="uploadSuccess"
      :on-error="upError"
      :file-list="fileList"
      :before-upload="beforeAvatarUpload"
      :on-exceed="handleExceed"
    >
      <el-button size="mini" type="primary" class="el-icon-upload2">{{desc}}</el-button>
      <div slot="tip" class="el-upload__tip">{{autoComment}}</div>
    </el-upload>
  </div>
</template>
<script>

export default {
  components: {},
  props: ["url", "accept", "gwComFiles", "fileDesc", "comment","uuid","limit"], // 上传基础路径
  data() {
    return {
      fileList: [],
      resList: [],
      length: 0, // 上传列表长度
      sum: 0, // 上传成功次数
      allurl: "", // 上传完整路径
      header: {
          'persId': localStorage.getItem('userid'),
          'accessToken' : localStorage.getItem('accessToken'),
          'orgId': localStorage.getItem('currentOrgId')
      },
      desc: "直接导入",
      autoComment: "注：.xls格式，不超过50MB",
      autoUrl: "",
      filePath: "",
      fileName: "",
      dialogVisible: false
    };
  },
  created() {},
  mounted() {
    if (this.gwComFiles) {
      this.fileList = this.gwComFiles;
    }

    if (this.fileDesc) {
      this.desc = this.fileDesc;
    }

    if (this.comment) {
      this.autoComment = this.comment;
    }

    // if (this.url) {
    //   this.autoUrl = this.url;
    // }
  },
  computed: {},
  methods: {
    // 初始化，
    init() {
        this.length = 0;
        this.sum = 0;
        this.resList = [];
        this.$refs.upload.clearFiles();
    },
    // 开始上传，文件列表为空直接返回turn表示结束，不为空触发上传并返回false，由uploadOver判断结束时间
    submitUpload() {
      if (this.length) {
        this.$nextTick(() => {
          this.$refs.upload.submit();
        });
        return false;
      } else {
        return true;
      }
    },
    // 上传出错，向上触发结束
    upError(err, file, fileList) {
      this.$message.error("上传出错，请修改文件！");
      this.$emit("uploadOver");
      this.init();
    },
    // 全部上传成功，向上触发结束
    uploadSuccess(response, file, fileList) {
      if (!response.success) {
          this.$message.error("上传出错，请修改文件！");
          this.$emit("uploadOver");
          this.init();
          return;
      }
      this.$message.success("上传文件成功");
      this.resList.push(response.data);
      console.log(this.resList);
      this.sum = this.sum + 1;
      if (this.sum == this.length) {
        this.$emit("uploadOver");
        this.init();
      }
    },
    // 及时更新列表长度
    changeFileList(file, fileList) {
      this.length = fileList.length;
      this.$emit("changeFileList", fileList);
    },
    handleRemove(file, fileList) {
      this.length = fileList.length;
      this.$emit("handleRemove", fileList);
    },
    beforeAvatarUpload(file) {
      let extArr = file.name.split(".");
      let acceptExt = this.accept;
      let fileSize = file.size / 1024  <= 51200;
      if (extArr && acceptExt.indexOf(extArr[extArr.length - 1]) < 0) {
          this.$message.error("上传文件格式只能为.xls格式");
          return false;
      }
      if(!fileSize){
          this.$message.error("上传文件大小不超过50MB");
          return false;
      }
      return true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style scoped>
  .el-dialog__wrapper /deep/.el-dialog__title{
    font-size: 20px !important;
    font-weight: bold;
    color:red;
  }
  .inline-auto-upload{
     display: inline-flex!important;
  }
  .inline-auto-upload div:first-child{
    display:flex;
  }
  .el-upload__tip{
    font-size:10px;
    color:red;
  }
</style>