You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
4.4 KiB
165 lines
4.4 KiB
<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>
|
|
|