wt_project_web_bak/src/views/resource/component/preview.vue

<template>
  <div>
    <div @click="detail" class="pointer">
      <slot name="title">
        <el-button type="primary" text>查看</el-button>
      </slot>
    </div>
    <el-image-viewer
      v-if="showImage"
      :url-list="preList"
      @close="showImage = false"
    />
    <el-drawer v-model="show" :size="1200" append-to-body>
      <template #title>
        <h4
          class="ml-20 black flex flex-center flex-justify-start full-width font-16 bold"
        >
          {{ data ? data.title : '' }}
        </h4>
      </template>
      <div>
        <div v-if="data">
          <div v-if="data.imgs.length === 0" class="flex flex-center">
            <div v-html="data.content" class="preview"></div>
          </div>
          <div v-else v-for="item in data.imgs" :key="item.id">
            <img :src="item.filePath" style="width: 1100px" />
          </div>
        </div>
        <div
          class="bottom flex flex-center flex-justify-center"
          v-if="isAccess === 2 || showAction"
        >
          <el-button type="primary" icon="Download" @click="downloadClick"
            >下 载
          </el-button>
          <share
            class="ml-20"
            :project-id="projectId"
            :ids="shareId"
            v-if="isAccess === 2"
          />
          <el-button
            class="ml-20"
            type="primary"
            @click="moreDetail"
            v-if="liButton"
            icon="Folder"
            >文件历史
          </el-button>
          <el-drawer v-model="liShow" :size="600">
            <template #title>
              <h3
                class="ml-5 black flex flex-center flex-justify-start full-width font-14 bold"
              >
                文件历史
              </h3>
            </template>
            <div class="ml-10 tips flex flex-align-center">
              <el-icon class="mr-5" color="#5acafa" :size="20">
                <WarningFilled />
              </el-icon>
              点击对应记录，可以查看历史文件
            </div>
            <div
              class="flex ml-20 item"
              v-for="(item, index) in fileHistoryList"
              :key="item.id"
              @click="newDetail(item)"
            >
              <div class="mt-10 flex flex-center flex-justify-start">
                <div class="font-18 bold-500">{{ index + 1 }}、</div>
                {{ item.coverUser }}在{{ item.createTime }}上传,编码:{{
                  item.fileVO.md5
                }}
              </div>
            </div>
          </el-drawer>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import api from '@/api/index.js'
import share from '@/views/resource/component/share.vue'

export default {
  components: {
    share
  },
  props: {
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    isAccess: {
      type: Number,
      default: 3
    },
    showAction: {
      type: Boolean,
      default: false
    },
    projectId: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: null
    },
    shareId: {
      type: String,
      default: ''
    }
  },
  watch: {
    id: {
      handler(val) {
        if (val != null) {
          this.fileId = val
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      fileId: '',
      liButton: false,
      liShow: false,
      show: false,
      data: null,
      preList: [],
      fileHistoryList: [1, 2, 3],
      showImage: false,
      watermarkOptions: {
        content: 'watermark',
        gap: [20, 20],
        offset: [10, 10],
        zIndex: 5,
        rotate: -20
      }
    }
  },
  methods: {
    newDetail(item) {
      this.liShow = false
      this.fileId = item.fileVO.id
      this.detail()
    },
    detail() {
      // 先判断是否存在历史列表
      this.$api.project
        .fileHistory({ fileId: this.fileId, current: 1, size: 100 })
        .then(res => {
          if (res.code === 200) {
            if (res.data.total > 0) {
              this.liButton = true
              this.fileHistoryList = res.data.records
            }
          }
        })
      if (Number(this.fileId, 10).toString() === 'NaN') {
        console.log('yyyy')
        // 如果id 不是数字开头，即mongo 62开头的id，查看文章详情
        this.$api.resource.fileDetail(this.fileId).then(res => {
          if (res.code === 200) {
            this.data = res.data
            this.show = true
          }
        })
      } else {
        this.$api.resource.fileInfo({ id: this.fileId }).then(res => {
          if (res.code === 200) {
            const tmp = res.data
            if (api.offices.includes(tmp.suffix)) {
              this.openByFile()
            } else {
              this.preList.length = 0
              this.preList.push(tmp.filePath)
              this.showImage = true
            }
          }
        })
      }
    },
    moreDetail() {
      // 显示侧边
      this.liShow = true
    },
    openByFile() {
      this.$api.resource.fileDetailByFile(this.fileId).then(res => {
        if (res.code === 200) {
          this.data = res.data
          this.show = true
        }
      })
    },
    // 将一个url转化为blob格式的
    getBlob(url) {
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.responseType = 'blob'
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response)
          }
        }
        xhr.send()
      })
    },
    // 最简单a标签那一套
    saveAs(blob, fileName) {
      const link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = fileName
      link.click()
    },

    async downloadClick() {
      this.getBlob(this.data.fileAttach.filePath).then(blob => {
        this.saveAs(blob, this.data.title)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.preview {
  width: 960px;
  padding: 20px;
}

.bottom {
  position: fixed;
  bottom: 0;
  box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.1);
  background-color: white;
  height: 30px;
  padding: 10px;
  width: 1200px;
  border: #e6e8ed solid 1px;
}

.tips {
  width: 580px;
  padding: 5px 5px;
  border-radius: 4px;
  background-color: #e2eaf5;
}

.item {
  background: #f7f8fa;
  border-radius: 4px;
  margin: 20px 10px;
  padding-bottom: 10px;
  padding-left: 5px;
}

.item:hover {
  background: #e6e8ed;
  border-radius: 4px;
  margin: 20px 10px;
  padding-bottom: 10px;
  padding-left: 5px;
}

:deep(.el-drawer__body) {
  padding: 0;
}
</style>