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">
        <el-table-column label="比赛名称" prop="annualCompid_dictText" />
        <el-table-column label="比赛类型" prop="entryFormat" />
        <el-table-column label="报名编号" prop="sysOrgCode" />
        <el-table-column label="比赛状态" prop="enrollStatic_dictText" />
        <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>
    </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 getList = async () => {
  const res: any = await getStuRaceList()
  console.log(res)
  list.value = res.result.records
}
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()
}
</script>

<style scoped lang="scss">
.container {
  margin-top: 25px;
}
</style>