spfm-market-front/src/components/upload.vue

<template>
  <div v-loading="loading">
    <el-upload
      class="upload-demo"
      :drag="fileInfo.type !== 'btn'"
      multiple
      :limit="fileInfo.limit"
      ref="upload"
      action="string"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :file-list="attList"
      :auto-upload="true"
      :show-file-list="fileInfo.type !== 'btn'"
      :before-upload="deforeUp"
      :http-request="signUpload"
      :on-preview="defUp"
      :disabled="disabled"

    >
      <div v-if="fileInfo.type !== 'btn'">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">点击上传</div>
      </div>
      <div v-if="fileInfo.type === 'btn'">
        <el-button
          :size="fileInfo.size ? fileInfo.size : 'medium'"
          :type="fileInfo.btntype"
          >{{ fileInfo.typename }}</el-button
        >
      </div>
    </el-upload>
  </div>
</template>
<script>
export default {
  // props: ["fileInfo", "fileList", "type"],
  props: {
    fileInfo: {
      type: Object,
      default: () => {}
    },
    fileList: {
      type: Array,
      default: () => []
    },
    type: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: () => {},
    },
  },
  data() {
    return {
      fileLists: [],
      attList: [
        // {
        //   attchFileId: "",
        //   fileCode: "202209271105276441",
        //   name: "1231233333333333.xlsx",
        //   id: "202209271105276441",
        //   opName: "范岩",
        //   opNo: "fanyan",
        //   opTime: "2022-09-27 11:05:27",
        //   type: 'success',
        // },
      ],
      loading: false,
      num: 0,
      s: false,
    };
  },
  // props:{
  //    disabled: {
  //     type: Boolean,
  //     default: () => {},
  //   },
  // },
  methods: {
    signUpload() {},
    //删除
    handleRemove(file) {
      console.log(file);
      console.log(this.attList);
      for (let i = 0; i < this.attList.length; i++) {
        if (this.attList[i].name === file.name) {
          this.attList.splice(i, 1);
          
           
         
          // this.$emit("clickDownload",this.attList);
        }
      }
     console.log(this.attList)
    this.$emit("uploadBack", this.attList);
    },
   
    //数量限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.fileInfo.limit} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    defUp(file){
        this.$emit("clickDownload",this.attList);
    },
    deforeUp(file) {
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 20MB!");
        return false;
      }
      if (this.fileInfo.type == "img") {
        const isImg = file.type.split("/")[0] == "image";
        if (!isImg) {
          this.$message.error("请上传图片格式文件!");
          return false;
        }
      }
      if (this.fileInfo.typexz == "ppt") {
        const isImg = file.name.split(".")[1] == "pptx";
        console.log(file.name.split(".")[1] == "pptx");
        if (!isImg) {
          this.$message.error("请上传ppt格式文件!");
          return false;
        }
      }
      if (this.fileInfo.typexz == "csv") {
        const isImg = file.name.split(".")[1] == "csv";
        if (!isImg) {
          this.$message.error("请上传csv格式文件!");
          return false;
        }
      }
      if (this.fileInfo.typexz == "xlsx") {
        const isImg = file.name.split(".")[1] == "xlsx";
        if (!isImg) {
          this.$message.error("请上传xlsx格式文件!");
          return false;
        }
      }
      this.loading = true;
      let query = new FormData();
      query.append("file", file);
      if (this.fileInfo.typename == "新增素材") {
        query.append("advType", this.fileInfo.advType);
        query.append("advTypeName", this.fileInfo.advTypeName);
      }
      if (
        this.fileInfo.url == "/market/cIllegalCallTask/importTempByProv" ||
        this.fileInfo.url ==
          "/market/cChannelInfo/cIllegalCallTask/importTempByProv"
      ) {
        query.append("taskId", this.fileInfo.taskId);
        query.append("tempId", this.fileInfo.tempId);
      }
      //违规外呼
      if (this.fileInfo.uploadType == "outCall") {
        query.append("uploadType", "outCall");
        query.append("relId", this.fileInfo.relId);
      }
      if (this.fileInfo.uploadType == "train") {
        query.append("uploadType", "train");
        query.append("relId", this.fileInfo.relId);
      }
      //运营类项目考核及结算
      if (this.fileInfo.url == "/market/cmkAttachInfo/upload") {
        query.append("uploadType", this.fileInfo.uploadType);
      }
      if (this.fileInfo.url == "/market/cStoreOutWo/importData") {
        query.append("woNo", this.fileInfo.woNo);
      }
      if (this.fileInfo.url == "/market/cStoreScheTrainEva/importDataEva") {
        query.append("evaId", this.fileInfo.evaId);
      }
      this.num++;
      let _this = this;
      this.$http({
        url: this.fileInfo.url,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: query,
      })
        .then((res) => {
          if (this.fileInfo.type === "btn") {
            this.$refs["upload"].clearFiles();
            this.$emit("uploadBack", res);
            
            this.$emit("clickDownload",res);
            if (res.data.result == 0) {
              this.$emit("onSuccess", file);
              _this.$message({
                message: res.data.desc,
                type: "success",
              });
            } else if (res.data.result == 1) {
              _this.$message({
                message: res.data.desc,
                type: "error",
              });
            } else if (res.data.result == 2) {
              _this.$message({
                message: res.data.desc,
                type: "warning",
              });
            } else if (res.data.result == 3) {
              _this.$message({
                message: res.data.desc,
                type: "info",
              });
            } else {
              _this.$message({
                message: res.data.desc,
                type: "success",
              });
            }
            this.num--;
            if (this.num == 0) {
              this.loading = false;
            }
            return;
          }
          if (this.fileInfo.type === "voice") {
            this.attList = res.data;
          } else {
            this.attList.push({
              id: res.data.body.id,
              name: res.data.body.fileName,
              fileCode: res.data.body.fileCode,
              opName: res.data.body.opName,
              opNo: res.data.body.opNo,
              opTime: res.data.body.opTime,
              attchFileId: res.data.body.attchFileId,
              type: res.data.body.type,
            });
          }
          this.$emit("uploadBack", this.attList);
          // this.$emit("clickDownload",this.attList);
          this.num--;
          if (this.num == 0) {
            this.loading = false;
          }
          return true;
        })
        .catch((res) => {
          this.$message({
            message: file.name + "上传失败",
            type: "error",
          });
          this.num--;
          if (this.num == 0) {
            this.loading = false;
          }
          for (let i = 0; i < this.$refs["upload"].uploadFiles.length; i++) {
            if (file.name == this.$refs["upload"].uploadFiles[i].name) {
              this.$refs["upload"].uploadFiles.splice(i, 1);
            }
          }
          return false;
        });
    },
  },
  mounted() {},
  created() {
    this.attList = [];
    console.log(this.fileList);
    if(this.fileList){
      for (let i = 0; i < this.fileList.length; i++) {
        this.attList.push({
            id: this.fileList[i].id,
            name: this.fileList[i].fileName,
            fileCode: this.fileList[i].fileCode,
            opName: this.fileList[i].opName,
            opNo: this.fileList[i].opNo,
            opTime: this.fileList[i].opTime,
            attchFileId: this.fileList[i].attchFileId,
            type: this.fileList[i].type,
        })
    }
    }
    
    console.log(this.attList);
  },
  watch: {
    fileList() {
      this.attList = [];
      for (let i = 0; i < this.fileList.length; i++) {
        this.attList.push({
          id: this.fileList[i].id,
          name: this.fileList[i].fileName,
          fileCode: this.fileList[i].fileCode,
          opName: this.fileList[i].opName,
          opNo: this.fileList[i].opNo,
          opTime: this.fileList[i].opTime,
          attchFileId: this.fileList[i].attchFileId,
          type: this.fileList[i].type,
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
</style>