spfm-market-front/src/components/workflowUpload.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"
      :before-remove="beforeRemove"
      :on-exceed="handleExceed"
      :on-preview="clickDownload"
      :file-list="attList"
      :auto-upload="true"
      :show-file-list="fileInfo.type !== 'btn'"
      :before-upload="deforeUp"
      :http-request="signUpload"
    >
      <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"],
  data() {
    return {
      fileLists: [],
      attList: [],
      loading: false,
      num: 0,
      s: false,
    };
  },
  methods: {
    clickDownload(file) {
      this.$emit("clickDownload", file);
    },
    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);
          console.log(55555);
          this.$emit("delloadBack", this.attList);
        }
      }
    },
    beforeRemove(file) {
      console.log(file);
    },
    //数量限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.fileInfo.limit} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    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);
            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.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() {
   console.log(this.$refs["upload"].name);
    this.$refs["upload"].uploadFiles = [];
    console.log(this.$refs["upload"]);
    console.log(this.attList);
    
    // this.$refs.upload.clearFiles();
  },
  created() {
    this.attList = [];
    if (this.fileInfo.fileList != undefined) {
      console.log(this.fileInfo.fileList);
      for (let i = 0; i < this.fileInfo.fileList.length; i++) {
        this.attList.push({
          id: this.fileInfo.fileList[i].id,
          name: this.fileInfo.fileList[i].fileName,
          fileCode: this.fileInfo.fileList[i].fileCode,
          opName: this.fileInfo.fileList[i].opName,
          opNo: this.fileInfo.fileList[i].opNo,
          opTime: this.fileInfo.fileList[i].opTime,
          attchFileId: this.fileInfo.fileList[i].attchFileId,
          type: this.fileInfo.fileList[i].type,
        });
      }
    }

    // let list = {
    //   attchFileId: "",
    //   fileCode: "202209271105276441",
    //   name: "1231233333333333.xlsx",
    //   id: "202209271105276441",
    //   opName: "范岩",
    //   opNo: "fanyan",
    //   opTime: "2022-09-27 11:05:27",
    //   type: undefined,
    // };

    // this.fileList.push(list)
  },
  watch: {
    fileList: {
      handler(newVal, oldVal) {
        this.attList = [];
        if (this.fileList != undefined) {
          for (let i = 0; i < this.fileList.length; i++) {
            this.attList.push({
              id: this.fileList[i].id,
              name: this.fileList[i].name,
              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>