dvcp_v2_webapp/src/components/headerTools/downloanCenterBtn.vue

<template>
  <section class="downloanCenterBtn">
    <el-badge :value="badgeNum" :hidden='badgeNum==0'>
      <div class="btn" @click="openDrawer()">下载中心</div>
    </el-badge>
    <el-drawer title="下载中心" :visible.sync="drawer" :modal-append-to-body="false" size="520">
      <div class="downLoad_main">
        <div class="search_top ">
          <p style="color:#999999;">仅显示最近90天的记录</p>
          <el-input size="mini" v-model="fileName" placeholder="文件名" clearable prefix-icon="iconfont iconSearch"
                    style="width:240px;" @change="getFiles()"/>
        </div>
        <ul class="infinite-list">
          <li v-for="(item,i) in filesList" class="infinite-list-item " :key="i">
            <div class="left">
              <svg class="svg" aria-hidden="true">
                <use xlink:href="#iconZip"/>
              </svg>
            </div>
            <div class="middle">
              <p class="fileName">{{ item.fileName }}【密码：{{ item.pwd }}】</p>
              <p>
                <span>来源:</span>
                <span>{{ $dict.getLabel('fileFrom', item.fileFrom) }}</span>
                <span>{{ (item.size / 1000).toFixed(2) + "KB" }}</span>
                <span>{{ item.createTime }}</span>
              </p>
            </div>
            <div class="right">
              <span class="iconfont iconResetting" v-if="item.status==0">处理中</span>
              <span v-if="item.status==2">已下载</span>
              <i class="iconfont iconDownload" @click="downFile(item)" v-if="item.status!=0">下载</i>
            </div>
          </li>
        </ul>
      </div>
    </el-drawer>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "downloanCenterBtn",
  data() {
    return {
      badgeNum: 0,
      drawer: false,//抽屉
      filesList: [],
      fileName: '',
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    openDrawer() {
      this.drawer = true;
      this.getFiles();
    },
    getFiles() {
      this.$request.post(`/app/sysuserdownload/list`, null, {
        params: {
          userId: this.user.info.id,
          fileName: this.fileName,
          current: 1,
          size: 1000,
        }
      }).then(res => {
        if (res?.data) {
          this.filesList = res.data.records;
          this.searchNum()
        }
      });
    },
    //查询未完成数量
    searchNum() {
      this.$request.post(`/app/sysuserdownload/queryCountByUserId`, null, {
        params: {
          userId: this.user.info.id
        }
      }).then(res => {
        if (res?.data) {
          this.badgeNum = res.data;
        }
      })
    },
    downFile(item) {
      this.changeStatus(item.id);
      // window.open(item.accessUrl);
      let elemIF = document.createElement('iframe');
      elemIF.src = item.accessUrl;
      elemIF.style.display = 'none';
      document.body.appendChild(elemIF);
    }
  },
  created() {
    this.searchNum()
  }
}
</script>

<style lang="scss" scoped>
.downloanCenterBtn {
  .downLoad_main {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;

    .search_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 8px;
    }

    .infinite-list {
      width: 100%;
      height: 100%;

      .infinite-list-item {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(208, 212, 220, 1);
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 30px;

          .svg {
            width: 24px;
            height: 24px;
            vertical-align: middle;
          }
        }

        .middle {
          flex: 1;

          .fileName {
            color: #333333;
            font-size: 14px;
          }

          p:nth-child(2) {
            color: #999999;
            font-size: 12px;

            span {
              padding: 0 4px;
            }

            span:nth-child(2) {
              border-right: solid 1px #999999;
            }

            span:nth-child(3) {
              border-right: solid 1px #999999;
            }
          }
        }

        .right {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          width: 90px;
          text-align: center;

          span {
            color: #999999;
          }

          i {
            display: block;
            width: 50px;
            color: #5088FF;
            font-size: 12px;
            cursor: pointer;
          }
        }

      }

    }

    ::-webkit-scrollbar {
      width: 4px;
      background-color: #eee;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #8888;

    }
  }
}

:deep(.el-drawer__wrapper) {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  right: 0;

  .el-drawer__header > span:focus {
    outline: 0
  }
}
</style>