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="报名状态">
          <template #default="{ row }">
            {{ formatstatus(row.workStatus) }}
          </template>
        </el-table-column>
        <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="row.enrollStatic == '2' ? 'primary': 'warning' "
              size="small"
              @click="uploadZp(row.annualCompid, row.enrollStatic)"
              v-if="row.uploadWorkFlag != 'yes'"
            >
              {{row.enrollStatic == '2' ? '上传作品' : '未审核'}}
            </el-button>
            <el-tag v-else>已上传作品</el-tag>
          </template>
        </el-table-column>
        <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>
  <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, 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)
  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 != 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 () => {
  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 = async (url:any,name:any) => {
   window.open(import.meta.env.VITE_APP_BASE_API + '/sys/common/zuopin/' + url)
  const a = document.createElement('a')
  a.style.display = 'none'
  document.body.appendChild(a)
  a.href = import.meta.env.VITE_APP_BASE_API + '/sys/common' + url
  a.setAttribute('download', name);
  a.click()
 document.body.removeChild(a)

}

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
      }
    })
  }
    console.log(id);
   
    
}

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

      }
    })
  }
  // router.push({
  //     path: '/registrationGroup',
  //     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>