zhgdyun/src/views/projectAdmin/fileCenter.vue

<template>
  <div class="fullHeight pages">
    <vhead :titleName="'资料中心'" showR="true"></vhead>
    <div class="pageContainer">
      <div class="pageDataContainer">
        
      
    <div class="searchBox whiteBlock">
      <el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
        <el-form-item :label="$t('message.docManage.table.fileName')" prop="fileName" class="last">
          <el-input v-model="searchForm.fileName" :placeholder="$t('message.docManage.dialog_file_renaming.placeholder')" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getListData">{{$t('message.docManage.query')}}</el-button>
          <el-button type="warning" plain @click="resetForm">{{$t('message.docManage.refresh')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="25">
      <el-col :span="6" v-for="(item,index) in tableData" :key="index">
        <div class="whiteBlock fileContent">
          <div class="fileBox">
            <img class="fileImg-small" :src="parseFileImgFn(item.filePath)" alt srcset />
            {{item.fileName}}
          </div>
          <div class="right">
            <img src="@/assets/images/eye.png" @click="viewFn(item)" />
            <img src="@/assets/images/download.png" @click="downFn(item)" />
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="placeholderBox" v-show="tableData.length==0">
            <img src="@/assets/images/noData.png">
            <p>暂无消息</p>
        </div>
        <el-pagination v-show="tableData.length>0"
          class="pagerBox"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
          background
        ></el-pagination>
    </div>
    </div>
  </div>
</template>
<script>
import {
  getCompanyFileListApi,
  updateFileDownloadNumApi,
} from "@/assets/js/api/doc.js";
import vhead from '@/components/header'
export default {
  components:{vhead},
  data() {
    return {
      searchForm: {
        fileName: "",
      },
      total: 0,
      pageNo: 1,
      pageSize: 20,
      tableData: [],
      fileImg1: require("../../assets/images/ppt.png"),
      fileImg2: require("../../assets/images/excel.png"),
      fileImg3: require("../../assets/images/pdf.png"),
      fileImg4: require("../../assets/images/word.png"),
    };
  },
  created() {
    this.getListData();
  },
  methods: {
    parseFileImgFn(url) {
      var type = url.split(".")[1];
      if (type == "ppt" || type == "pptx") {
        return this.fileImg1;
      }
      if (type == "xls" || type == "xlsx") {
        return this.fileImg2;
      }
      if (type == "pdf") {
        return this.fileImg3;
      }
      if (type == "doc" || type == "docx") {
        return this.fileImg4;
      }
    },
    //获取列表数据
    getListData() {
      let data = this.searchForm;
      data.pageNo = this.pageNo;
      data.pageSize = this.pageSize;
      data.companySn = this.$store.state.userInfo.headquartersSn;
      getCompanyFileListApi(data).then((res) => {
        console.log(res);
        this.tableData = res.result.page.records;
        this.total = res.result.page.total;
        this.totalInfo = res.result.totalNum;
      });
    },
    viewFn(item){
      // window.open( “https://view.officeapps.live.com/op/view.aspx?src=” + this.yuming + “/zhengCe?id=” + row.id, “_blank”);
      // window.open( "http://139.217.224.209:8080/qyb/html/look-document.html?fileName=https://zhihui.blob.core.chinacloudapi.cn/zhgdfile1/202005/4bde4ddeeed24412a78af4dede1509fe.pptx", "_blank");
      // window.open( "http://139.217.224.209:8080/qyb/html/look-document.html?fileName=" + this.$store.state.FILEURL + item.filePath, "_blank");
      window.open( "https://view.officeapps.live.com/op/view.aspx?src=" + this.$store.state.FILEURL + item.filePath, "_blank");
    },
    //下载文件
    downFn(item) {
      updateFileDownloadNumApi({ id: item.id }).then((res) => {
        let blob = new Blob([this.$store.state.FILEURL + item.filePath], {
          type: "application/octet-stream",
        });
        // application/octet-stream //下载文件的通用格式
        if (window.navigator.msSaveBlob) {
          window.navigator.msSaveBlob(blob, item.fileName); //处理IE下载的兼容性
        } else {
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = item.fileName; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        }
      });
    },
    resetForm() {
      this.$refs["searchForm"].resetFields();
      this.getListData();
    },
    //查看条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getListData();
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getListData();
    },
  },
};
</script>
<style lang="less" scoped>
.fileContent {
  border-radius: 3px;
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 20px;
  justify-content: space-between;
  .right {
    display: flex;
    align-items: center;
    img {
      margin-left: 18px;
      cursor: pointer;
    }
  }
}
.pageContainer{
  height: calc(100% - 61px);
}
</style>