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="compName"
        />
        <!-- <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">
          <template #default="{ row }">
            <div class="action-buttons">
            <el-button
              link
              type="primary"
              size="small"
              @click="saveEvent(row.enrollCode)"
              v-if="row.enrollStatic == '0' || row.enrollStatic == '3'"
            >
              提交
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="editEvent(row.id,row.annualCompid,row.enrollCode,row.entryFormat)"
              v-if="row.enrollStatic == '0' || row.enrollStatic == '3'"
            >
              编辑
            </el-button>
          
            <el-button
              link
              type="primary"
              size="small"
               @click="InfoEvent(row.id,row.annualCompid,row.enrollCode,row.entryFormat)"
            >
              详情
            </el-button>
            <el-button
              link
              type="warning"
              size="small"
                v-if="row.enrollStatic == '1'"
               @click="cancelEvent(row.id)"
            >
              取消
            </el-button>
          </div>
          </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>
</template>

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

import { getStuRaceList, uploadFileZp, sava ,cancelRace} from '@/api/race'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
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)
  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 != 2) 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 () => {
  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) => {
    if (res.code == 500) return ElMessage.warning(res.message)
    ElMessage.success(res.message)
  })
  handleClose()
  getList()
}
const headerChange = (pageNumber: any) => {
  page.value.pageNo = pageNumber
  getList()
}

const saveEvent = async (id: any) => {
  const res: any = await sava({ applyCode: id, status: 5 })
  ElMessage.success(res.message)
  getList()

}

const formatstatus = (status: any) => {
  if (!status) return '未上传作品'
  switch (status) {
    case '0':
      return '待评分'
      break
    case '1':
      return '已评分'
      break
    case '2':
      return '待驳回'
      break
    case '3':
      return '已驳回'
      break
    case '4':
      return '待提交'
      break
    case '5':
      return '已提交'
      break
  }
}

const editEvent =  (id: any,annualCompid: any,enrollCode:any,entryFormat:any) => {
  if(entryFormat == '团队'){
    router.push({
      path: '/registrationGroup',
      query:{
        id,
        annualCompid,
        enrollCode,
        edit: true
      }
    })
  }else{
    router.push({
      path: 'registrationPersonage',
      query:{
        id,
        annualCompid,
        enrollCode,
        edit: true
      }
    })
  }

}

const InfoEvent =  (id: any,annualCompid: any,enrollCode:any,entryFormat:any) => {
  if(entryFormat == '团队'){
    router.push({
      path: '/registrationGroup',
      query:{
        id,
        annualCompid,
        enrollCode,
        edit: true,
        info: true
      }
    })
  }else{
    router.push({
      path: 'registrationPersonage',
      query:{
        id,
        annualCompid,
        enrollCode,
        edit: true,
        info: true

      }
    })
  }
}

const cancelEvent = async (id: any) => {
  const res: any = await cancelRace({id })
  ElMessage.success(res.message)
  getList()
}
</script>

<style scoped lang="scss">
.action-buttons {
  display: flex;
  justify-content: space-between; /* 平均分布间距 */
  align-items: center;
}
.container {
  margin-top: 25px;
  .page {
    display: flex;
    margin-top: 20px;
    justify-content: center;
  }
}
:deep(.el-table__row) {
  height: 50px;
}
:deep(.el-button){

  margin-left: 0px !important;
}
</style>