wt_project_web_bak/src/views/home/his_files.vue

<template>
  <div class="full-width full-height white-bg mb-10">
    <div class="flex flex-col">
      <div class="flex flex-align-center padding border-bottom bold title-sp">
        <span class="flex-1"></span>
        <span style="flex: 2">文件/文件夹名称</span>
        <span style="flex: 1">更新（上传）时间</span>
        <span class="flex-1">文件大小</span>
<!--        <span class="flex-1">是否同步</span>-->
        <span class="flex-1">上传人</span>
        <span style="flex: 3">操作</span>
      </div>
      <el-empty v-if="fileData && fileData.length === 0"/>
      <div v-for="item in fileData" :key='item.id' class="flex flex-center  border-bottom padding content-sp">
        <div class="flex-1" v-if='item.type === 1 '>
          <img v-if="item.suffix === 'docx'" class="icon" src="../../assets/svg/folder/doc.svg">
          <img v-else-if="item.suffix === 'pdf'" class="icon" src="../../assets/svg/folder/pdf.svg">
          <img v-else-if="item.suffix === 'xlsx'" class="icon" src="../../assets/svg/folder/xls.svg">
          <img v-else class="icon" src="../../assets/svg/folder/other.svg">
        </div>
        <div class="flex-1" v-if='item.type ===  2 '>
          <img v-if="item.isAccess === 1" class="icon" src="../../assets/svg/folder/see.svg">
          <img v-else-if="item.isAccess === 2" class="icon" src="../../assets/svg/folder/edit.svg">
          <img v-else class="icon" src="../../assets/svg/folder/invisible.svg">
        </div>
        <span style="flex: 2">{{ item.title }}</span>
        <span style="flex: 1">{{ item.updateTime }}</span>
        <span class="flex-1" >{{ item.type !== 2 ? item.size: '-' }}</span>
<!--        <span class="flex-1">{{ item.status }}</span>-->
        <span class="flex-1">{{ item.createUserName }}</span>
        <div class="flex flex-center" style="flex: 3">
          <main-button icon="View" title="详情" width="85" @click="fileView(item)"/>
          <main-button icon="Download" v-if='item.type !== 2' title="下载" width="85" @click="downFile(item)"/>
<!--          <main-button icon="UploadFilled" title="同步" width="85"/>-->
          <main-button icon="Delete" title="删除" v-if='item.isAccess === 2' width="85" @click="removeFile(item)"/>
        </div>
      </div>
    </div>
    <!-------分页----->
    <div v-if="fileData && fileData.length !== 0" class="mt-20 flex flex-center flex-justify-end"
         style="margin-right: 50px;padding-bottom: 20px">
      <span class="mr-20">共{{ fileData.total }}条</span>
      <el-pagination :total="fileData.total" background layout="prev, pager, next"/>
    </div>
    <el-image-viewer
        v-if='showImage'
        :url-list="imgList"
        @close='showImage = false'
    />
  </div>
</template>

<route>
{
name: '历史文件',
}
</route>

<script>
import mainButton from '../../components/main-button.vue'
import { bytesToSize } from '../../utils/tools.js'
import api from '@/api/index.js'

export default {
  name: 'his_files',
  components: { mainButton },
  data () {
    return {
      showImage: false,
      imgList: [],
      id: '',
      fileData: []
    }
  },
  created () {
    this.id = this.$route.query.id
    this.getFileList()
  },
  methods: {
    getFileList () {
      this.$api.project.fileList({ id: this.id, isHistory: 1 }).then(res => {
        if (res.code === 200) {
          this.fileData = res.data.records.map(e => {
            e.size = bytesToSize(e.volume)
            return e
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    fileView (item) {
      if (item.type === 2) {
        // 文件夹
        this.$api.project.fileList({ id: item.id, isHistory: 1 }).then(res => {
          if (res.code === 200) {
            this.fileData = res.data.records.map(e => {
              e.size = bytesToSize(e.volume)
              return e
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        if (api.offices.includes(item.suffix)) {
          const routeData = this.$router.resolve({ path: '/home/file_detail', query: { id: item.fileId } })
          window.open(routeData.href, '_blank')
        } else {
          this.imgList = [item.url]
          this.showImage = true
        }
      }
    },
    downFile (item) {
      window.open('/api/wutong-file/minio/file/downFile/' + item.dowloadFileId, '')
    },
    removeFile (item) {
      if (item.hasChildren || item.fileAmount > 0) {
        this.$confirm('该文件夹不为空，请先删除子文件', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        return
      }
      this.$confirm('确认是否删除该文件？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$api.project.fileRemove({ ids: item.id }).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.getFileList()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
        )
    }
  }
}
</script>

<style lang="scss" scoped>
.title-sp {
  color: #596A8A;
  height: 55px;
}

.content-sp {
  color: #707070;
}

.flex-1 {
  flex: 0.5;
}

.icon {
  width: 43px;
  height: 45px;
}
</style>