zhgh_cug/src/main/resources/static/components/plugins/sysFilePreview/H5Index.vue

<template>
  <div>
    <div class="file-preview-container" v-if="fileList && fileList.length > 0">
      <div class="file-item" v-for="item in fileList" :key="item.id">
        <img
            v-if="item.suffix === 'jpg' || item.suffix === 'png' || item.suffix === 'jpeg' || item.suffix === 'gif'"
            :src="item.thumbnail"
            @click.stop="$commonUtil.previewFile(item)"
            class="file-image"
        />

        <img
            v-else
            :src="$commonUtil.getFileItemShowIcon(item.suffix)"
            @click.stop="$commonUtil.previewFile(item)"
            class="file-image"
        />

        <div class="file-download" @click="$downLoad(item.downloadPath)">
          <i class="el-icon-download"></i>
          {{ item.name }}
        </div>
      </div>
    </div>
    <div v-else class="empty-container">
      <div class="empty-text">暂无</div>
    </div>
  </div>
</template>

<script>
module.exports = {
  name: "H5Index",
  props: {
    files: {
      type: [String, Array],
      default: undefined,
      required: false
    },
    complete_result: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  watch: {
    files: {
      handler(val) {
        if (val) {
          this.buildEchoFileObject(val)
        } else {
          this.fileList = []
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    buildEchoFileObject(val) {
      let ids = []
      if (this.complete_result) {
        if (Array.isArray(val)) {
          ids = val.map((item) => this.resolveFileId(item)).filter((id) => id)
        } else {
          try {
            ids = JSON.parse(val).map((item) => this.resolveFileId(item)).filter((id) => id)
          } catch (err) {
            this.fileList = []
          }
        }
      } else {
        //那就是链接 没有直接存id的吧。。
        if (Array.isArray(val)) {
          ids = val.map((item) => {
            return item.substring(item.lastIndexOf("=") + 1)
          })
        } else {
          ids = val.split(",").map((item) => {
            return item.substring(item.lastIndexOf("=") + 1)
          })
        }
      }
      this.requestFullFile(ids)
    },

    // 新版上传组件保存 response.data，迁移的历史附件保留原文件主键 id。
    resolveFileId(item) {
      if (!item) {
        return ""
      }
      const fileValue = item.response && item.response.data ? item.response.data : item.id
      if (typeof fileValue !== "string" || !fileValue) {
        return ""
      }
      return fileValue.includes("=") ? fileValue.substring(fileValue.lastIndexOf("=") + 1) : fileValue
    },

    requestFullFile(ids) {
      this.$axios.post("/platform/sys/file/previewFileData", {ids: JSON.stringify(ids)}).then((res) => {
        if (res.code === 0) {
          this.fileList = res.data
        }
      })
    }
  }
}
</script>

<style scoped>
.file-preview-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.file-preview-container .file-item {
    aspect-ratio: 1;
    position: relative;
    transition: all 300ms;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.file-preview-container .file-item:active {
  background: #e9ecef;
  transform: scale(0.98);
}

.file-preview-container .file-item .file-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
}

.file-preview-container .file-item .file-download {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 28px;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 8px 8px;
  font-size: 12px;
  padding: 0 8px;
  box-sizing: border-box;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  color: #999;
}

.empty-text {
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .file-preview-container {
        gap: 4px;
        padding: 4px;
    }

    .file-preview-container .file-item .file-image {
        width: 40px;
        height: 40px;
    }

    .file-preview-container .file-item .file-download {
        height: 20px;
        line-height: 20px;
        font-size: 10px;
    }
}
</style>