yos_web/src/SManagement/archives/components/FileList.vue

<template>
  <div class="file-list">
    <el-empty description="暂无文件" v-if="fileData.length == 0"></el-empty>
    <div
      v-for="(item,index) in fileData"
      :key="index"
      class="file-item"
      @mouseenter="isIconShowIndex = index"
      @mouseleave="isIconShowIndex = 10000000000"
      @click="fileClick(item)">
      <div class="image">
        <el-image
          style="width: 100%; height: 100%"
          :src="item.cover || require('../../../assets/file_icons/unknow.png')"
          fit="fill">
        </el-image>
      </div>
      <p>{{item.document}}</p>
      <div class="icon" v-show="item.fileType != 'folder' && isCollect == true && isIconShowIndex === index || $route.path == '/archivesmag_list'">
        <img
          src="@/assets/file_icons/收藏.png"
          alt
          v-show="item.isCollect == 1 || $route.path == '/archivesmag_list'"
          @click.stop="collectClick(item)"
        />
        <img
          src="@/assets/file_icons/未收藏.png"
          alt
          v-show="item.isCollect == 0"
          @click.stop="collectClick(item)"
        />
      </div>
    </div>
    <!--文件信息面板-->
    <drawer ref="drawer" 
                        :currentSelectFile="currentSelectFile" 
                        v-show="currentSelectFile"
                        @downLoad="dialogVisible = true">
    </drawer>
  </div>
</template>

<script>
import Drawer from '@/SManagement/archives/components/Drawer'
export default {
  name: "FileList",
  data() {
    return {
      //收藏配置
      params: {
        accesstoken: "6de4ba3e3e8967a875ae42ab24c2da48",
        classname: "system.attachment.MediaCenter",
        method: "collectAttachment",
        content: {
          collecttype: "营销物料",
          attachmentid: 1
        }
      },
      //当前悬浮在什么位置
      isIconShowIndex: '',
      //当前选中的文件
      currentSelectFile: '',
    };
  },
  components: {
    Drawer,

  },
  props: {
    fileData: {
      default() {
        return [];
      }
    },
    //是否显示收藏
    isCollect: {
      type: Boolean
    }
  },
  computed: {},
  watch: {},
  created() {

  },
  methods: {
    //文件单击事件
    fileClick(item) {
      if (item.postfix == "folder") {
        this.$emit("upFileData", item.parentid, item.document,item.attachmentid);
      } else {
        this.currentSelectFile = this.fileType.fileList(item)
        this.$refs.drawer.isFileInfoPanlShow = true
      }
    },
    //收藏
    collectClick(item) {
      let id = item.isCollect == 0 ? 1 : 0;
      if (item.isCollect == 0) {
        this.params.method = "collectAttachment";
        this.params.content.collecttype = "营销物料",
        this.params.content.attachmentid = item.attachmentid
      } else {
        this.params.method = "uncollectAttachment";
        this.params.content.attachmentid = item.attachmentid;
      }
      //发送收藏请求
      this.$api.requested(this.params).then(res => {
        if (res.code == 1) {
          this.$emit("statusChange", id, item);
          if(this.params.method == "collectAttachment") {
            this.$notify({
              title: "提示",
              message: "收藏成功",
              type: "success"
            });
          } else {
            this.$notify({
              title: "提示",
              message: "取消收藏",
              type: "success"
            });
          }
        } else {
          this.$notify({
            title: "提示",
            message: "操作失败",
            type: "error"
          });
        }
      })
    },
  },
  
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.file-list {
  display: flex;
  flex-wrap: wrap;
  }
.file-list .file-item {
  padding: 16px 0 12px 0;
  margin-right: 12px;
  cursor: pointer;
  border-radius: 4px;
  position: relative;
}
.file-list .file-item:hover {
  background: #f1f4f9;
}
.file-list .file-item .image {
  width: 64px;
  height: 64px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.file-list .file-item .image img {
  width: 100%;
  height: 100%;
}
.file-list .file-item p {
  font-size: 14px;
  width: 120px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  text-align: center;
  padding: 0 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-list .file-item .icon {
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 8px 0 0;
}
/deep/.el-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);  
  }
</style>