xps-web-v5/src/views/document/components/FileList.vue

<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteFileById, getFileByPage } from '@/api/system/docApi'
import { uploadFile } from '@/api/system/uploadApi'

const state = reactive({
  listLoading: false,
  dataList: [],
  search: {
    dirId: -1,
    keywords: '',
  },
})

// 获取数据
const getData = async () => {
  if (state.search.dirId > 0) {
    state.listLoading = true
    const { data } = await getFileByPage(state.search)
    state.listLoading = false
    state.dataList = data
  }
}

const fileTableRef = ref()

// 查询
const onSearch = () => {
  getData()
}

// 下载
const onDownload = (row: any) => {

}

// 删除
const onDelete = (row: any) => {
  const { fileId, fileTitle } = row
  ElMessageBox.confirm(`确认删除「${fileTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteFileById(fileId)
    ElMessage.success(msg)
    await getData()
  })
}

function beforeFileUpload(file: any) {
  const isLt5M = file.size / 1024 / 1024 < 5
  if (!isLt5M) {
    ElMessage.error('上传文件大小不能超过 5MB!')
  }
  return isLt5M
}

// 上传文件
const onUpload = async (param: any) => {
  const formData = new FormData()
  formData.append('uploadfile', param.file)
  if (state.search.dirId) {
    formData.append('dirId', state.search.dirId.toString())
  }
  await uploadFile(formData)
  await getData()
}

defineExpose({
  loadData(dirId: number) {
    state.search.dirId = dirId
    getData()
  },
})
</script>

<template>
  <div class="container">
    <tool-bar>
      <template #left>
        <span />
      </template>

      <template #right>
        <el-input v-model="state.search.keywords" placeholder="请输入名称，支持模糊查询" clearable />
        <el-button type="primary" style="padding-right: 10px;" @click="onSearch">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:search" />
            </el-icon>
          </template>
        </el-button>

        <el-upload
          action
          multiple
          :http-request="onUpload"
          :before-upload="beforeFileUpload"
          :show-file-list="false"
        >
          <el-button type="primary" style="padding-left: 10px;">
            上传
          </el-button>
        </el-upload>
      </template>
    </tool-bar>

    <el-table ref="fileTableRef" v-loading="state.loading" class="list-table" size="small" :data="state.dataList" border stripe highlight-current-row>
      <el-table-column type="index" align="center" label="序号" width="70" />

      <el-table-column prop="fileTitle" label="文件名称" align="center" header-align="center">
        <template #default="scope">
          <el-link target="_blank" :href="scope.row.fileUrl" dowload>
            <i class="el-icon-document" />
            {{ scope.row.fileTitle }}
          </el-link>
        </template>
      </el-table-column>

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

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

      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template #default="scope">
          <div>
            <el-button plain size="small" @click="open('{{ scope.row.fileUrl }}')">
              <template #icon>
                <el-icon>
                  <svg-icon name="i-ep:link" />
                </el-icon>
              </template>
              下载
            </el-button>
            <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onDelete(scope.row)">
              <template #icon>
                <el-icon>
                  <svg-icon name="ep:delete" />
                </el-icon>
              </template>
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>