Files
api-client/src/views/rating/pk/list/components/PkParticipantList.vue
2026-06-24 23:15:47 +08:00

85 lines
2.3 KiB
Vue

<template>
<el-dialog :title="title" :visible.sync="dialogVisible" width="500px" @close="close">
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
<el-table-column align="left" label="投票用户" min-width="150">
<template #default="{ row }">
<user-info :user="row" :user-id="row.id" />
</template>
</el-table-column>
</el-table>
<el-pagination
background
:current-page="queryForm.pageNo"
:layout="layout"
:page-size="queryForm.pageSize"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</el-dialog>
</template>
<script>
import { getParticipantList } from '@/api/rating/pk'
import { getThumbUrl } from '@/utils/blessing'
import UserInfo from '@/components/UserInfo'
export default {
name: 'PkParticipantList',
components: { UserInfo },
data() {
return {
title: '投票用户列表',
dialogVisible: false,
list: [],
listLoading: false,
layout: 'total, prev, pager, next',
total: 0,
elementLoadingText: '正在加载...',
queryForm: {
pageNo: 1,
pageSize: 10,
pkId: '',
chooseItemId: '',
},
}
},
methods: {
getThumbUrl,
show(pkId, chooseItemId, titlePrefix) {
this.title = `${titlePrefix}的投票用户`
this.queryForm.pkId = pkId
this.queryForm.chooseItemId = chooseItemId
this.queryForm.pageNo = 1
this.dialogVisible = true
this.fetchData()
},
close() {
this.dialogVisible = false
this.list = []
},
handleSizeChange(val) {
this.queryForm.pageSize = val
this.fetchData()
},
handleCurrentChange(val) {
this.queryForm.pageNo = val
this.fetchData()
},
async fetchData() {
this.listLoading = true
try {
const { data } = await getParticipantList(this.queryForm)
this.list = data.list || []
this.total = data.totalCount || 0
} catch (error) {
console.error(error)
} finally {
this.listLoading = false
}
},
},
}
</script>