ContestPortal/src/views/userInfo/components/reacList.vue

<template>
  <div class="container">
    <el-card>
      <template #header>
        <div style="font-size: 16px; font-weight: 600">我的比赛</div>
      </template>
      <el-table :data="list" v-loading="isLoading">
        <el-table-column
          label="年度比赛项目名称"
          prop="annualCompid_dictText"
        />
        <el-table-column label="比赛类型" prop="entryFormat" />
        <el-table-column label="报名编号" prop="enrollCode" />
        <el-table-column label="比赛状态" prop="enrollStatic_dictText" />
        <el-table-column label="比赛状态" prop="fileName" />
        <el-table-column label="作品文件" prop="fileName">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              size="small"
              @click="download(row.fileUrl,row.fileName)"
              v-if="row.uploadWorkFlag != 'no'"
            >
             下载文件
            </el-button>
            <div v-else>无文件</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              size="small"
              @click="uploadZp(row.annualCompid, row.enrollStatic)"
              v-if="row.uploadWorkFlag != 'yes'"
            >
              上传作品
            </el-button>
            <el-tag v-else>已上传作品</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination background layout="prev, pager, next" @change="headerChange" :size="page.pageSize"  :total="total" />
      </div>
    </el-card>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="上传作品"
    width="500"
    :before-close="handleClose"
    v-if="dialogVisible"
    :close-on-click-modal="false"
  >
    <el-form label-width="80" style="padding-right: 30px">
      <el-form-item label="作品名称">
        <el-input v-model="raceName" />
      </el-form-item>
      <el-form-item label="作品">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="#"
          v-model:file-list="fileList"
          :limit="1"
          :auto-upload="false"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>

          <template #tip>
            <div class="el-upload__tip text-red">作品只允许上传一个</div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { getStuRaceList, uploadFileZp } from '@/api/race'
import { ElMessage } from 'element-plus'
const list = ref<any>([])
const page = ref<any>({
  pageNo: 1,
  pageSize: 10,
})
const total = ref(0)
const isLoading = ref(false)

const getList = async () => {
  isLoading.value = true
  const res: any = await getStuRaceList(page.value)
  console.log(res)
  list.value = res.result.records
  total.value = res.result.total
  isLoading.value = false
}
getList()
const fileList = ref<any>([])
const raceName = ref<any>('')
const dialogVisible = ref(false)
const annualCompid = ref('')
const uploadZp = (id: any, staus: any) => {
  if (staus == 1) return ElMessage.warning('审核后方可上传作品')
  console.log(id)
  annualCompid.value = id
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
  fileList.value = []
  raceName.value = ''
  annualCompid.value = ''
}
const submit = async () => {
  if (!raceName.value) return ElMessage.warning('请输入作品名称')
  if (!fileList.value.length) return ElMessage.warning('请上传作品')
  console.log(fileList.value[0].raw, raceName, 'fileList.value[0].raw')
  const fromData = new FormData()
  fromData.append('files', fileList.value[0].raw)
  fromData.append('annualCompid', annualCompid.value)
  fromData.append('workName', raceName.value)
  const res: any = await uploadFileZp(fromData).then((res: any) => {
    console.log(res)
    if (res.code == 500) return ElMessage.warning(res.message)
    ElMessage.success(res.message)
  })
  console.log(res)
  handleClose()
  getList()
}
const headerChange = (pageNumber: any) => {
  console.log(pageNumber);
  
  page.value.pageNo = pageNumber
  getList()
}
// 下载文件
const download = (url: any,fileName:any) => {
  console.log(url);
  
  const a = document.createElement('a')
  a.href = url
  a.download = fileName;
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a);
}
</script>

<style scoped lang="scss">
.container {
  margin-top: 25px;
  .page {
    display: flex;
    margin-top: 20px;
    justify-content: center;
  }
}
:deep(.el-table__row) {
  height: 50px;
}
</style>