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

<template>
  <el-card style="margin-top: 0.1302rem">
    <template #header>
      <div style="font-size: 16px; font-weight: 600">我的奖项</div>
    </template>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        align="center"
        prop="annualid_dictText"
        label="年度"
        width="70"
      />
      <el-table-column
        align="center"
        prop="annalComp_dictText"
        label="年度比赛"
      />
      <el-table-column
        align="center"
        prop="annualCompP_dictText"
        label="年度比赛项目"
      />
      <el-table-column align="center" prop="enrollCode" label="报名编号" />
      <el-table-column
        align="center"
        prop="awardname"
        label="奖项名称"
        width="90"
      />
      <el-table-column align="center" prop="studentcode" label="学生学号" />
      <el-table-column
        align="center"
        prop="studentname"
        label="学生姓名"
        width="100"
      />
      <el-table-column align="center" prop="sczs" label="证书">
        <template #default="{ row }">
          <el-image
            :src="setImageUrl(row.sczs)"
            style="width: 0.2604rem; height: 0.2604rem"
            :preview-src-list="[setImageUrl(row.sczs)]"
            :z-index="100"
          ></el-image>
          <!-- <img :src="setImageUrl(row.sczs)" alt=""> -->
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="tj_dictText"
        label="是否推荐"
        width="90"
      />
      <el-table-column align="center" label="操作">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="uploadZs(row.id)">
            上传证书
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog
    v-model="dialogVisible"
    v-if="dialogVisible"
    title="上传证书"
    width="25%"
    :before-close="handleClose"
  >
    <el-form label-width="80" style="padding-right: 30px">
      <el-form-item label="证书">
        <el-upload
          v-model:file-list="fileList"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { getAwardslist, uploadFileZs, saveSz } from '@/api/race'
const dialogVisible = ref(false)
const tableData = ref<any>([])
const getAwardListApi = async () => {
  const data = {
    acpid: '',
    column: 'createTime',
    order: 'desc',
    pageNo: 1,
    pageSize: 10,
  }
  const res: any = await getAwardslist(data)
  tableData.value = res.result.records
 // console.log(tableData.value, 'tableData.value')
}
getAwardListApi()
const setImageUrl = (url: string) => {
  return import.meta.env.VITE_APP_BASE_API + '/sys/common/staticzs/' + url
}

const fileList = ref<any>([])
const zsUrl = ref('')
const zsId = ref(0)
const uploadZs = (id: any) => {
  zsId.value = id
  dialogVisible.value = true
}
const uploadFileEvent = async () => {
  const fromData = new FormData()
  fromData.append('file', fileList.value[0].raw)
  const res: any = await uploadFileZs(fromData)
  zsUrl.value = res.message
}
const submit = async () => {
  await uploadFileEvent()
  let data = {
    id: zsId.value,
    sczs: zsUrl.value,
  }
  await saveSz(data)
  getAwardListApi()
  dialogVisible.value = false
  fileList.value = []
}
const handleClose = () => {
  dialogVisible.value = false
  fileList.value = []
}
watch(
  () => fileList.value,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
    if (newVal.length === 1) {
      ;(document.querySelector('.el-upload') as HTMLElement).style.display =
        'none'
    } else {
      setTimeout(() => {
        ;(document.querySelector('.el-upload') as HTMLElement).style.display =
          'flex'
      }, 0)
    }
  },
)
</script>

<style lang="scss" scoped>
:deep(.el-image-viewer__close) {
  top: 160px;
}
:deep(.el-table__cell) {
  position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
}
</style>