yos_web/src/components/file-block/index.vue

<template>
  <div class="file10" v-if="fileData">
    <div class="item-file" :style="[{width:(!itemStyle.itemWidth ? '100%' : itemStyle.itemWidth + 'px')},{'margin-right':itemStyle.margin + 'px'}]" v-for="(item,index) in fileData" :key="index">
      <div class="left">
        <div class="icon" :style="{width:itemStyle.img.width+'px',height:itemStyle.img.height+'px',}">
          <img :src="item.cover" alt  />
        </div>
        <div class="text">
          <p>{{item.document}}</p>
          <p>{{item.createdate}}</p>
        </div>
      </div>
      <div class="right">
        <p class="see" @click="seeClick(item)" v-if="tool.checkAuth($route.name,'read')">预览</p>
        <p @click="deleteFile(item)" v-if="isDelete && tool.checkAuth($route.name,'delete')" class="delete">删除</p>
        <button @click="downLoad(item)" v-if="isDownLoad && tool.checkAuth($route.name,'download')">下载</button>
      </div>
    </div>
    <see-File ref="seeFile" :fileData="seeFile"></see-File>
  </div>
</template>

<script>
import SeeFile from '@/components/file-block/components/SeeFile'

import removeFile from '@/utils/removeFile'
export default {
  name: 'index',
  data () {
    return {
      seeFile: '',
      isSeeFileShow:false
    };
  },
  props: {
    isDownLoad: Boolean,
    itemStyle: Object,
    isDelete:Boolean,
    fileData: {
      default() {
        return []
      }
    },
    sat_noticeid:''
  },
  components: {
    SeeFile,
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
    deleteFile(item) {
      let temp = item
      removeFile.removeFileList([item]).then(res => {
        this.tool.showMessage(res,() => {
          this.$emit('deleteSuccess',temp)
        })
      })
    },
    //预览
    seeClick(item) {
      if(item.fileType == 'image' || item.fileType == 'pdf' || item.fileType == 'video') {
        this.seeFile = item
        this.$refs.seeFile.dialogVisible = true
      } else {
        this.$notify({
          title:'提示',
          message:'该文件暂不支持',
          type:'warning'
        })
      }
    },
    downLoad(item) {
      this.$emit('updateDownLoadRecord',item)
      window.open(item.url,'_self')
    }
  },
};
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.file10 {
  display: flex;
  flex-wrap: wrap;
}
.item-file {
  width: 334px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #cccccc;
  margin: 0 0 10px 0;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
}
.item-file .left {
  display: flex;
  align-items: center;
}
.item-file .left .icon {
  width: 29px;
  height: 29px;
  margin-right: 16px;
}
.item-file .left .icon img {
  width: 100%;
  height: 100%;
}
.item-file .left .text {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.item-file .left .text p:first-child {
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 160px;
}
.item-file .left .text p:last-child {
  font-size: 10px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
}
.item-file .right {
  display: flex;
  align-items: center;
}
.item-file .right .see {
  font-size: 14px;
  font-weight: 400;
  color: #3874f6;
  cursor: pointer;
}
.item-file .right .delete {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  margin-left: 40px;
  cursor: pointer;
}
.item-file .right button {
  width: 70px;
  height: 32px;
  background: #3874f6;
  border-radius: 52px;
  border: none;
  color: #ffffff;
  margin-left: 16px;
  cursor: pointer;
}
.no-file {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 10px;
}
.el-empty {
  height: 150px;
  transform: scale(70%);
}
/deep/.el-dialog__wrapper {
  z-index: 9999;
}
</style>