nxdt-web/src/components/pro-tabs/bns-file-list-tabs-new.vue

<template>
  <div class="file-list">
    <div v-if="items.length === 0" class="no-files">
      <img src="../../assets/file/no_file.png" alt="文件图标" />
    </div>
    <div v-for="(item, index) in items" :key="index" class="file-item">
      <div class="file-icon" @click="handView(item)" :title="item.fileName" style="cursor: pointer">
        <img v-if="getIconPaths(item.fileName) === 'word.png'" src="@/assets/file/word.png" alt="文件图标" />
        <img v-else-if="getIconPaths(item.fileName) === 'excel.png'" src="@/assets/file/excel.png" alt="文件图标" />
        <img v-else-if="getIconPaths(item.fileName) === 'pdf.png'" src="@/assets/file/pdf.png" alt="文件图标" />
        <img v-else-if="getIconPaths(item.fileName) === 'txt.png'" src="@/assets/file/txt.png" alt="文件图标" />
        <img v-else-if="getIconPaths(item.fileName) === 'ppt.png'" src="@/assets/file/ppt.png" alt="文件图标" />
        <img v-else-if="getIconPaths(item.fileName) === 'png'" :src="`${lookFile + item.filePath}`" alt="文件图标" />
      </div>
      <div class="file-details">
        <div class="file-name" :title="item.fileName">
          {{
            item.fileName.length > 8
              ? item.fileName.substring(0, 8) + '....' + item.fileName.split('.').pop().toLowerCase()
              : item.fileName
          }}
          <div class="file-info">
            <div class="file-size">{{ (item.fileSize / 1024).toFixed(2) + 'Kb' }}</div>
            <div class="file-time">{{ item.createTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="文件预览"
      :visible.sync="viewOpen"
      v-if="viewOpen"
      width="90%"
      append-to-body
      @closed="onCloseFileDialog"
    >
      <div style="width: 100%; height: 720px">
        <div>
          <bns-kkFile-preview :items="filePreview" v-on:fillInComments="handleFillInComments"></bns-kkFile-preview>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import bnsKkFilePreview from '@/components/pro-tabs/bns-kkFile-preview.vue'
import { getIconPath } from '@/utils/commonMethod'
import { lookFaceFile } from '@/utils/bonus'

export default {
  components: {
    'bns-kkFile-preview': bnsKkFilePreview,
  },
  props: {
    items: {
      type: Array,
      default: () => {
        return {
          label: '',
        }
      },
    },
    // 是否显示意见输入框 如是审核时则展示
    isShowOptions: {
      type: Boolean,
      default: false,
    },
    // 接收其他 taps 传递的意见
    opinionValueOther: {
      type: String,
      default: '',
    },
  },
  watch: {
    opinionValueOther: {
      handler(newValue) {
        this.opinionValue = newValue
      },
      deep: true,
    },
  },
  data() {
    return {
      viewOpen: false,
      filePreview: {
        filePreviewUrl: '',
        fileName: '',
        showDownloadButton: false,
      },
      iconSrc: '',
      lookFile: '',
      opinionValue: '',
    }
  },
  created() {
    this.lookFile = lookFaceFile()
  },
  methods: {
    getIconPaths(fileName) {
      return getIconPath(fileName)
    },
    handView(item) {
      //打开一个组件预览文件
      this.viewOpen = true
      this.filePreview = {
        filePreviewUrl: item.filePath,
        fileName: item.fileName,
      }
    },
    handleFillInComments: function (e) {
      console.log('handleFillInComments', e)
    },

    // 弹框关闭时触发
    onCloseFileDialog() {
      // 触发自定义事件传递意见框的值
      this.$emit('onCloseFileDialog', this.opinionValue)
    },
  },
}
</script>
<style scoped>
.file-list {
  display: flex;
  flex-wrap: wrap; /* 让文件列表自动换行 */
  margin-left: 2%;
}

.file-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px; /* 控制文件项之间的间距 */
  /*width: calc(20% - 20px); /* 每行显示两列，计算间距 */
}

.file-icon img {
  margin-top: 5px;
  width: 100px; /* 调整图标大小 */
  height: 100px;
  margin-right: 10px; /* 图标和详细信息之间的间距 */
}

.file-details {
  width: 160px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.file-name {
  width: 160px;
  display: flex;
  flex-direction: column;
}

.file-info {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.file-size {
}
.file-time {
  margin-top: 10px;
}

.no-files {
  text-align: center;
  padding: 20px;
  font-size: 24px;
  color: #999;
}
</style>