xps-web-aqpt/src/views/system/doc/components/FileList.vue

<template>
  <div class="content-container">
    <el-row class="tool-bar">
      <el-col :span="12" class="left">
        <div class="content-title">
          <i class="el-icon-folder" /> {{ title }}
        </div>
      </el-col>
      <el-col :span="8" class="right">
        <el-input v-model="conditions.keywords" class="search-input m-right-15" placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search" @click="getData()" />
        </el-input>

      </el-col>
      <el-col :span="4" class="right">
        <el-upload
          multiple
          :http-request="handleUploadFile"
          :before-upload="beforeFileUpload"
          :show-file-list="false"
          action=""
        >
          <el-button size="small" type="primary">上传</el-button>
        </el-upload>
      </el-col>
    </el-row>

    <el-row class="content-body">
      <el-table v-loading="listLoading" class="page-table" border :data="dataList" height="calc(100vh - 260px)">
        <el-table-column type="index" label="序号" width="80" header-align="center" align="center" />
        <el-table-column prop="fileTitle" label="文件名称" header-align="left" align="left">
          <template v-slot="{row}">
            <el-link target="_blank" :href="row.fileUrl" dowload>
              <i class="el-icon-document" />
              {{ row.fileTitle }}
            </el-link>
          </template>
        </el-table-column>

        <el-table-column prop="uploaderName" width="160" label="上传人" header-align="center" align="center">
          <template v-slot="{row}">
            <span>{{ row.uploaderName }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="uploadedAt" width="180" label="上传时间" header-align="center" align="center">
          <template v-slot="{row}">
            <span><i class="el-icon-time" /> {{ row.uploadedAt }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" header-align="center" align="center">
          <template v-slot="{row}">
            <label style="display:inline-block;margin-right:5px">
              <el-button size="mini" type="primary" icon="el-icon-download">
                <a target="_blank" :href="row.fileUrl" dowload>下载</a>
              </el-button>
            </label>
            <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination-container">
        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
      </div>
    </el-row>
    <File ref="AddFile" @formSuccess="getData" />
    <File ref="UpdateFile" title="修改文件" @formSuccess="getData" />
  </div>
</template>

<script>
import File from './File'
import { getFileByPage, deleteFile } from '@/api/system/docApi'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import { uploadFile } from '@/api/system/uploadApi'
export default {
  name: 'FileList',
  components: {
    Pagination,
    File
  },
  data() {
    return {
      title: '',
      dataList: [],
      listLoading: false,
      total: 0,
      conditions: {
        page: 1,
        limit: 10,
        keywords: '',
        dirId: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'userData'
    ])
  },
  methods: {

    loadData(dirId, dirTitle) {
      this.title = dirTitle
      this.conditions.dirId = dirId
      this.getData()
    },

    getData() {
      this.listLoading = true
      getFileByPage(this.conditions).then((resp) => {
        this.listLoading = false
        const { data, total } = resp
        this.total = total
        this.dataList = data
      }).catch((error) => {
        console.log(error)
      })
    },

    // 添加
    handleAdd() {
      this.$refs['AddFile'].showAddModel(this.conditions.dirId)
    },

    // 编辑
    handleEdit(data) {
      this.$refs['UpdateFile'].showEditModel(data.fileId)
    },

    // 删除/
    handleDelete(data) {
      this.$confirm(`此操作将删除该数据${data.fileTitle}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFile(data.fileId).then((resp) => {
          this.getData()
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },

    beforeFileUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
      }
      return isLt5M
    },

    // 上传文件
    handleUploadFile({ file }) {
      const formData = new FormData()
      formData.append('file', file)
      this.listLoading = true
      if (this.conditions.dirId) { formData.append('dirId', this.conditions.dirId) }
      uploadFile(formData).then((resp) => {
        this.listLoading = false
        this.getData()
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
</style>
<style lang="scss" scoped>
  .content-container {
    margin: 10px 10px 10px 10px;
    height: calc(100vh - 86px);
  }
 .right{
   display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
   align-items: center;
 }
</style>