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="Number(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) {
      window.location.href = this.$store.state.FILEURL+item.filePath;
      // 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>