yxk-electronic-archives/src/views/archivesManage/managementLibrary/module/uploadFile/index.vue

<template>
  <div class="upload-file">
    <!-- 上传附件curd -->
    <div v-if="isUploadDetail" class="upload-curd">
      <div class="upload-btn">
        <el-button icon="el-icon-plus" size="small" type="primary">添加</el-button>
        <input id="upFile" type="file" name="upFile" @change="changeFile($event)">
      </div>
      <el-button icon="el-icon-delete" :disabled="selections.length === 0" @click="toDelete(selections)">删除</el-button>
      <el-button icon="el-icon-sort" @click="showSort">排序</el-button>
    </div>

    <!--表格渲染-->
    <el-table
      ref="table"
      :data="tableData"
      style="min-width: 100%"
      height="calc(100vh - 382px)"
      @row-click="clickRowHandler"
      @selection-change="selectionChangeHandler"
    >
      <el-table-column v-if="isUploadDetail" type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column prop="file_name" label="文件名称" show-overflow-tooltip min-width="140" />
      <el-table-column prop="file_type" label="格式" min-width="60" align="center" />
      <el-table-column prop="file_size" label="大小" min-width="85" align="center">
        <template slot-scope="scope">
          {{ (scope.row.file_size / 1024).toFixed(2) + 'kB' }}
        </template>
      </el-table-column>
      <el-table-column prop="file_dpi" label="分辨率" min-width="100" align="center">
        <template slot-scope="scope">
          <div v-if="!scope.row.file_dpi"> - </div>
          <div v-else> {{ scope.row.file_dpi }} </div>
        </template>
      </el-table-column>
      <el-table-column prop="file_thumbnail" label="缩览图" min-width="60" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.file_type === 'jpg' || scope.row.file_type === 'jpeg' || scope.row.file_type === 'png' || scope.row.file_type === 'bmp'|| scope.row.file_type === 'gif'">
            <i class="fileIcon icon-image" />
          </div>
          <div v-else-if="scope.row.file_type === 'xlsx' || scope.row.file_type === 'xls'">
            <i class="fileIcon icon-excel" />
          </div>
          <div v-else-if="scope.row.file_type === 'docx' || scope.row.file_type === 'doc'">
            <i class="fileIcon icon-word" />
          </div>
          <div v-else-if="scope.row.file_type === 'pdf'">
            <i class="fileIcon icon-pdf" />
          </div>
          <div v-else-if="scope.row.file_type === 'ppt' || scope.row.file_type === 'pptx'">
            <i class="fileIcon icon-ppt" />
          </div>
          <div v-else-if="scope.row.file_type === 'zip' || scope.row.file_type === 'rar'">
            <i class="fileIcon icon-zip" />
          </div>
          <div v-else-if="scope.row.file_type === 'txt'">
            <i class="fileIcon icon-txt" />
          </div>
          <div v-else>
            <i class="fileIcon icon-other" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" min-width="110" align="center" />
      <!-- && !recycleMain.isRecycle -->
      <el-table-column v-if="!isUploadDetail " label="操作" min-width="80" align="center">
        <template slot-scope="scope">
          <el-button class="file-down iconfont icon-weibiaoti-2" @click="downloadFile(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 点击缩略图看大图 -->
    <el-dialog class="preview-dialog" :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose" :visible="showCoverVisible" title="查看大图">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog" style="max-height:calc(100vh - 230px); overflow:auto;">
        <img style="max-width:100%; object-fit: contain;" :src="previewSrc" :onerror="defaultImg">
      </div>
    </el-dialog>

    <!-- 排序 -->
    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="排序" :visible.sync="sortVisible" @opened="opened">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i>
        <el-table :data="sortTableData" class="file-sort" style="width: 100%;max-height: 70vh;" row-key="id">
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column prop="file_name" label="文件名称" />
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.native="handleSort">保存</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 删除附件 -->
    <el-dialog title="删除附件" :append-to-body="true" :close-on-click-modal="false" :visible.sync="deleteVisible" :before-close="handleClose">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <div class="dialog-delt">
          <p><span>确定删除已选择的附件吗？</span></p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.native="handleDeltConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { FetchInitArchiveFilesView, FetchEditFile, FetchDeleteFile, FetchFileSort } from '@/api/archivesManage/archivesList'
import { archivesUpload } from '@/utils/upload'
import { downloadFile, getCurrentTime } from '@/utils/index'
import { mapGetters } from 'vuex'
import { form } from '@crud/crud'
import Sortable from 'sortablejs'
export default {
  name: 'UploadFile',
  components: {},
  mixins: [
    form({})
  ],
  // inject: ['recycleMain'],
  props: {
    isUploadDetail: {
      type: Boolean,
      default: true
    },
    categoryId: {
      type: String,
      default: function() {
        return ''
      }
    },
    arcId: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      defaultImg: 'this.src="' + require('@/assets/images/cover-bg.png') + '"',
      tableData: [], // 附件list
      selections: [], // table - 选中的
      showCoverVisible: false, // 查看大图dialog
      sortTableData: [], // 排序data
      sortVisible: false, // 排序dialog
      deleteVisible: false, // 删除附件 dialog
      deleteData: [], // 删除选中的data
      file: null, // 附件 change
      fileNames: '', // 附件 - name
      formatType: '', // 附件 - type
      postfix: '', // 附件 - 文件后缀
      fileSize: '', // 附件 - 大小
      filePath: '', // 附件 - path
      px: '', // 附件 - 分辨率
      nowDate: '', // 当前时间
      previewSrc: '' // 查看大图src
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  watch: {
    arcId: function(newValue, oldValue) {
    }
  },
  methods: {
    // 选择附件
    async changeFile(e) {
      this.file = e.target.files[0]
      this.fileSize = this.file.size
      this.formatType = this.file.type.substring(0, this.file.type.indexOf('/'))
      this.fileNames = this.file.name
      this.postfix = this.file.name.substring(
        this.fileNames.lastIndexOf('.') + 1,
        this.fileNames.length
      )
      if (this.formatType === 'image') {
        const fileBase64 = await this.getBase64(this.file)
        const res = await this.getImgPx(fileBase64)
        this.px = res.width + 'px*' + res.height + 'px'
      } else {
        this.px = ''
      }
      // 上传附件
      archivesUpload(this.baseApi + '/api/archives/uploadFile', this.file, this.categoryId).then(res => {
        if (res.data.code === 200) {
          this.filePath = res.data.data
          this.uploadSave()
        }
      })
    },
    // 上传附件 - 选择上传即保存
    uploadSave() {
      this.nowDate = getCurrentTime()
      const json = {
        'file_name': this.fileNames,
        'file_size': this.fileSize,
        'file_type': this.postfix,
        'file_path': this.filePath,
        'sequence': null,
        'archive_id': this.arcId,
        'file_dpi': this.px,
        'file_thumbnail': '',
        'create_time': this.nowDate,
        'id': null
      }
      const arrayUpload = []
      arrayUpload.push(json)
      const params = {
        'categoryId': this.categoryId,
        'jsonString': JSON.stringify(arrayUpload)
      }
      FetchEditFile(params).then(data => {
        this.$message.success('上传附件成功!')
        this.crud.refresh()
        this.getFileList()
      })
    },
    // 将上传的图片转为base64
    getBase64(file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      return new Promise((resolve) => {
        reader.onload = () => {
          resolve(reader.result)
        }
      })
    },
    // 获取图片的分辨率
    getImgPx(img) {
      const image = new Image()
      image.src = img
      return new Promise((resolve) => {
        image.onload = () => {
          const width = image.width
          const height = image.height
          resolve({ width, height })
        }
      })
    },
    // 上传list
    getFileList() {
      const params = {
        'categoryId': this.categoryId,
        'archiveId': this.arcId
      }
      FetchInitArchiveFilesView(params).then(data => {
        this.tableData = data.returnlist
      })
    },
    // 下载附件
    downloadFile(row) {
      const url = this.baseApi + '/downloadFile' + row.file_path
      fetch(url).then(res => res.blob()).then(blob => {
        downloadFile(blob, row.file_name.split('.')[0], row.file_type)
      }).catch(() => {
        this.$message.error('下载文件失败!')
      })
    },
    // 选择删除
    toDelete(data) {
      this.deleteData = data
      this.deleteVisible = true
    },
    // 确认删除
    handleDeltConfirm() {
      this.deleteVisible = false
      const ids = []
      this.deleteData.forEach(val => {
        ids.push(val.id)
      })
      const params = {
        'ids': ids,
        'categoryId': this.categoryId
      }
      // 删除fetch
      FetchDeleteFile(params).then(res => {
        this.crud.delAllLoading = false
        this.$message.success('删除成功!')
        this.crud.refresh()
        this.getFileList()
      })
    },
    // 排序 -  行拖拽
    rowDrop(className, targetName) {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
      const that = this
      Sortable.create(tbody, {
        // 指定父元素下可被拖拽的子元素
        draggable: '.el-table__row',
        onEnd({ newIndex, oldIndex }) {
          if (newIndex === oldIndex) return
          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
        }
      })
    },
    // 排序
    opened() {
      this.rowDrop('file-sort', 'sortTableData')
    },
    showSort() {
      this.sortVisible = true
      this.sortTableData = JSON.parse(JSON.stringify(this.tableData))
    },
    // 排序 - 保存
    handleSort() {
      const ids = []
      const sequences = []
      this.sortTableData.map((value, index) => {
        ids.push(value.id)
        sequences.push(index + 1)
      })
      const params = {
        'categoryId': this.categoryId,
        'ids': ids,
        'sequences': sequences
      }
      FetchFileSort(params).then((res) => {
        this.sortVisible = false
        this.$message.success('附件排序成功!')
        this.crud.refresh()
        this.getFileList()
      })
    },
    // table
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    // table
    selectionChangeHandler(val) {
      this.selections = val
    },
    // dialog - close
    handleClose(done) {
      this.showCoverVisible = false
      done()
    },
    // 查看大图
    showCoverPreview(row) {
      this.showCoverVisible = true
      this.previewSrc = this.baseApi + '/downloadFile' + row.file_path
    }
  }
}
</script>

<style lang="scss" scoped>
.svg-style{
  width: 60px;
  height: 32px;
}
</style>