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

<template>
  <div class="back-box">
    <div v-for="item in infolist" :key="item.id" @click="downcheck(item)">
      <i class="iconfont icon-word" v-if="item.type === 'word'"></i>
      <i class="iconfont icon-excel" v-if="item.type === 'excel'"></i>
      <i class="iconfont icon-ppt" v-if="item.type === 'ppt'"></i>
      <i class="iconfont icon-wenjian" v-if="item.type === 'wenjian'"></i>
      <i class="el-icon-picture" v-if="item.type === 'png'"></i>
      <el-tooltip
        class="item"
        effect="dark"
        :content="item.fileName"
        placement="right"
        :enterable="false"
      >
        <span class="tab-long">{{ item.fileName }}</span>
      </el-tooltip>
      <div class="seedown" v-if="datalist.type === 2">
        <a @click="uploaddown(item)">下载</a>
        <a @click="uploadsee(item)">预览</a>
      </div>
    </div>
    <div class="if-box-top" v-if="ifrshow" @keyup.esc="ifrshow = false">
      <i class="el-icon-close" @click="ifrshow = false"></i>
      <iframe height="100%" width="100%" :src="srcsc"> </iframe>
    </div>
  </div>
</template>
<script>
export default {
  props: ["datalist", "dialogStatus"],
  data() {
    return {
      infolist: [],
      status: false,
      srcsc: "",
      ifrshow: false,
    };
  },
  methods: {
    downcheck(v) {
      if (this.datalist.type === 1) {
        this.uploaddown(v);
      }
    },
    uploadsee(v) {
      let url = encodeURIComponent(v.callPath);
      this.srcsc = "http://114.215.71.182:8012/onlinePreview?url=" + url;
      this.ifrshow = true;
      // window.open('http://114.215.71.182:8012/onlinePreview?url=' + url);
    },
    //下载e
    uploaddown(v) {
      let fileData = v;
      this.$http({
        url: this.datalist.url,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        data: { id: fileData.id, fileName: fileData.fileName },
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          window.navigator.msSaveOrOpenBlob(blob, fileData.fileName);
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = fileData.fileName;
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
    },
    dataHandle() {
      this.infolist = this.datalist.attList;
      if (this.infolist) {
        for (let i = 0; i < this.infolist.length; i++) {
          let f = this.infolist[i].fileName.split(".");
          let type = f[f.length - 1];
          if (type === "doc" || type === "docx") {
            this.infolist[i].type = "word";
          } else if (type === "ppt") {
            this.infolist[i].type = "ppt";
          } else if (type === "xlsx" || type === "xls") {
            this.infolist[i].type = "excel";
          } else if (
            type === "png" ||
            type === "jpg" ||
            type === "svg" ||
            type === "gif" ||
            type === "psd"
          ) {
            this.infolist[i].type = "png";
          } else {
            this.infolist[i].type = "wenjian";
          }
        }
      }
    },
  },
  mounted() {
    this.dataHandle();
    console.log(this.infolist);
  },
  created() {},
  watch: {
    dialogStatus() {
      this.$forceUpdate();
      let _this = this;
      _this.dataHandle();
    },
  },
};
</script>
<style scoped lang="scss">
.if-box-top {
  background: #fff;
  width: 80vw;
  height: 80vh;
  margin-top: 10vh;
  margin-left: 10vw;
}

.iconfont {
  font-size: 42px;
}

.icon-excel {
  color: #67db63;
}

.icon-word {
  color: #ff654e;
}

.icon-ppt {
  color: #ff8943;
}

.icon-wenjian {
  color: #ccc;
}

.el-icon-picture {
  font-size: 36px;
  color: #ccc;
  background: #fff;
  padding: 4px 2px;
  margin-bottom: 2px;
  border-radius: 3px;
}

.back-box {
  margin-top: 20px;
  background: #f2f2f2;
  padding: 20px;

  div {
    display: inline-block;
    text-align: center;
    margin-right: 20px;
    cursor: pointer;

    span {
      display: block;
      width: 80px;
      overflow: hidden;
      padding-top: 5px;
      margin: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
      -webkit-line-clamp: 1; /* 控制最多显示几行 */
      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
    }
  }

  .seedown {
    margin: 0;
    margin-top: 5px;

    a {
      font-size: 12px;
      padding: 2px 5px;
      border: 1px solid transparent;
      color: #999;
    }

    a:hover {
      color: #0b82ff;
    }
  }
}
</style>