From 858f515995fd1dca7cf825069ce38c32703298d0 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期五, 07 十一月 2025 14:14:50 +0800
Subject: [PATCH] 报名人员导出
---
web/src/views/activity-list.vue | 265 ++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 253 insertions(+), 12 deletions(-)
diff --git a/web/src/views/activity-list.vue b/web/src/views/activity-list.vue
index 65b8f86..5f935b8 100644
--- a/web/src/views/activity-list.vue
+++ b/web/src/views/activity-list.vue
@@ -54,9 +54,33 @@
<el-tag :type="getStatusType(row.stateName)">{{ row.stateName }}</el-tag>
</template>
</el-table-column>
- <el-table-column label="鎿嶄綔" width="120" fixed="right" align="center">
+ <el-table-column label="鎿嶄綔" width="220" fixed="right" align="center">
<template #default="{ row }">
<div class="table-actions">
+ <el-button
+ text
+ :icon="User"
+ size="small"
+ @click="handleViewPlayers(row)"
+ class="action-btn players-btn"
+ title="鏌ョ湅鎶ュ悕浜哄憳"
+ />
+ <el-button
+ text
+ :icon="Download"
+ size="small"
+ @click="handleExportPlayers(row)"
+ class="action-btn export-btn"
+ title="瀵煎嚭鎶ュ悕浜哄憳"
+ />
+ <el-button
+ text
+ :icon="View"
+ size="small"
+ @click="handleView(row)"
+ class="action-btn view-btn"
+ title="璇︽儏"
+ />
<el-button
text
:icon="Edit"
@@ -91,6 +115,52 @@
/>
</div>
</div>
+
+ <!-- 鏌ョ湅鎶ュ悕浜哄憳寮圭獥 -->
+ <el-dialog
+ v-model="playerDialogVisible"
+ :title="'鎶ュ悕浜哄憳 - ' + (currentActivity?.name || '')"
+ width="80%"
+ @close="handlePlayerDialogClose"
+ >
+ <!-- 寮圭獥宸ュ叿鏍� -->
+ <div class="dialog-toolbar">
+ <el-button type="primary" :icon="Download" @click="handleExportPlayersFromDialog">
+ 瀵煎嚭Excel
+ </el-button>
+ </div>
+
+ <el-table :data="playerList" v-loading="playerListLoading" style="width: 100%">
+ <el-table-column prop="playerName" label="瀛﹀憳鍚嶇О" min-width="120" />
+ <el-table-column prop="projectName" label="椤圭洰鍚嶇О" min-width="150" />
+ <el-table-column prop="phone" label="鑱旂郴鐢佃瘽" width="140" />
+ <el-table-column prop="applyTime" label="鐢宠鏃堕棿" width="180" />
+ <el-table-column prop="state" label="鐘舵��" width="100" align="center">
+ <template #default="{ row }">
+ <el-tag :type="getPlayerStateType(row.state)">{{ getPlayerStateText(row.state) }}</el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <!-- 鎶ュ悕浜哄憳鍒嗛〉 -->
+ <div class="pagination" v-if="playerPagination.total > 0">
+ <el-pagination
+ v-model:current-page="playerPagination.page"
+ v-model:page-size="playerPagination.size"
+ :page-sizes="[10, 20, 50, 100]"
+ :total="playerPagination.total"
+ layout="total, sizes, prev, pager, next, jumper"
+ @size-change="handlePlayerSizeChange"
+ @current-change="handlePlayerCurrentChange"
+ />
+ </div>
+
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="playerDialogVisible = false">鍏抽棴</el-button>
+ </span>
+ </template>
+ </el-dialog>
</div>
</template>
@@ -98,8 +168,10 @@
import { reactive, ref, onMounted, onActivated, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
-import { getActivities, updateActivityState } from '@/api/activity'
-import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'
+import { getActivities, deleteActivity } from '@/api/activity'
+// @ts-ignore
+import { PlayerApi } from '@/api/player'
+import { Search, Plus, Edit, Delete, View, User, Download } from '@element-plus/icons-vue'
console.log('=== activity-list.vue 缁勪欢寮�濮嬪姞杞� ===')
@@ -128,6 +200,17 @@
// 琛ㄦ牸鏁版嵁
const tableData = ref([])
+// 鎶ュ悕浜哄憳寮圭獥鐩稿叧
+const playerDialogVisible = ref(false)
+const playerListLoading = ref(false)
+const playerList = ref([])
+const playerPagination = reactive({
+ page: 1,
+ size: 10,
+ total: 0
+})
+const currentActivity = ref<any>(null)
+
// 璋冭瘯鐢ㄩ�旓細鐩戝惉琛ㄦ牸鏁版嵁鍙樺寲
watch(
tableData,
@@ -150,6 +233,26 @@
鍏抽棴: 'danger'
}
return typeMap[status] || 'info'
+}
+
+// 鑾峰彇鎶ュ悕浜哄憳鐘舵�佹爣绛剧被鍨�
+const getPlayerStateType = (state: number) => {
+ const typeMap: Record<number, string> = {
+ 0: 'info', // 鏈鏍�
+ 1: 'success', // 瀹℃牳閫氳繃
+ 2: 'danger' // 瀹℃牳椹冲洖
+ }
+ return typeMap[state] || 'info'
+}
+
+// 鑾峰彇鎶ュ悕浜哄憳鐘舵�佹枃鏈�
+const getPlayerStateText = (state: number) => {
+ const textMap: Record<number, string> = {
+ 0: '鏈鏍�',
+ 1: '瀹℃牳閫氳繃',
+ 2: '瀹℃牳椹冲洖'
+ }
+ return textMap[state] || '鏈煡'
}
// 鎼滅储
@@ -179,6 +282,112 @@
router.push(`/activity/edit/${row.id}`)
}
+// 鏌ョ湅璇︽儏
+const handleView = (row: any) => {
+ router.push(`/activity/${row.id}`)
+}
+
+// 鏌ョ湅鎶ュ悕浜哄憳寮圭獥鍏抽棴澶勭悊
+const handlePlayerDialogClose = () => {
+ // 娓呯┖褰撳墠娲诲姩
+ currentActivity.value = null
+ // 娓呯┖鎶ュ悕浜哄憳鍒楄〃
+ playerList.value = []
+ // 閲嶇疆鍒嗛〉
+ playerPagination.page = 1
+ playerPagination.total = 0
+}
+
+// 鏌ョ湅鎶ュ悕浜哄憳
+const handleViewPlayers = async (row: any) => {
+ // 璁剧疆褰撳墠娲诲姩
+ currentActivity.value = row
+ // 閲嶇疆鍒嗛〉
+ playerPagination.page = 1
+ playerPagination.size = 10
+ // 鏄剧ず寮圭獥
+ playerDialogVisible.value = true
+ // 鍔犺浇鏁版嵁
+ await loadPlayerList()
+}
+
+// 鍔犺浇鎶ュ悕浜哄憳鍒楄〃
+const loadPlayerList = async () => {
+ if (!currentActivity.value) return
+
+ playerListLoading.value = true
+ try {
+ // @ts-ignore 蹇界暐TypeScript妫�鏌ワ紝鍥犱负鍑芥暟瀹為檯鏀寔鏇村鍙傛暟
+ const data = await PlayerApi.getApplications('', currentActivity.value.id, null, playerPagination.page - 1, playerPagination.size)
+
+ playerList.value = data.content || []
+ playerPagination.total = data.totalElements || 0
+ } catch (e: any) {
+ console.error('鍔犺浇鎶ュ悕浜哄憳澶辫触:', e)
+ ElMessage.error(e?.message || '鍔犺浇鎶ュ悕浜哄憳澶辫触')
+ } finally {
+ playerListLoading.value = false
+ }
+}
+
+// 鎶ュ悕浜哄憳鍒嗛〉澶勭悊
+const handlePlayerSizeChange = (size: number) => {
+ playerPagination.size = size
+ loadPlayerList()
+}
+
+const handlePlayerCurrentChange = (page: number) => {
+ playerPagination.page = page
+ loadPlayerList()
+}
+
+// 浠庡脊绐楀鍑烘姤鍚嶄汉鍛楨xcel
+const handleExportPlayersFromDialog = async () => {
+ if (!currentActivity.value) {
+ ElMessage.error('褰撳墠娌℃湁閫変腑鐨勬瘮璧�')
+ return
+ }
+
+ try {
+ // 鏋勯�犲鍑篣RL锛屼娇鐢ㄥ畬鏁寸殑API璺緞
+ const exportUrl = `/api/player/export/applications?activityId=${currentActivity.value.id}`
+
+ // 鍒涘缓涓�涓殣钘忕殑a鏍囩鏉ヨЕ鍙戜笅杞�
+ const link = document.createElement('a')
+ link.href = exportUrl
+ link.download = `鎶ュ悕浜哄憳_${currentActivity.value.name}_${new Date().getTime()}.xlsx`
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+
+ ElMessage.success('瀵煎嚭鎴愬姛')
+ } catch (error) {
+ console.error('瀵煎嚭澶辫触:', error)
+ ElMessage.error('瀵煎嚭澶辫触: ' + (error as Error).message)
+ }
+}
+
+// 瀵煎嚭鎶ュ悕浜哄憳锛堝師鍒楄〃涓殑瀵煎嚭鍔熻兘淇濇寔涓嶅彉锛�
+const handleExportPlayers = async (row: any) => {
+ try {
+ // 鏋勯�犲鍑篣RL锛屼娇鐢ㄥ畬鏁寸殑API璺緞
+ const exportUrl = `/api/player/export/applications?activityId=${row.id}`
+
+ // 鍒涘缓涓�涓殣钘忕殑a鏍囩鏉ヨЕ鍙戜笅杞�
+ const link = document.createElement('a')
+ link.href = exportUrl
+ link.download = `鎶ュ悕浜哄憳_${row.name}_${new Date().getTime()}.xlsx`
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+
+ ElMessage.success('瀵煎嚭鎴愬姛')
+ } catch (error) {
+ console.error('瀵煎嚭澶辫触:', error)
+ ElMessage.error('瀵煎嚭澶辫触: ' + (error as Error).message)
+ }
+}
+
// 鍒犻櫎姣旇禌
const handleDelete = async (row: any) => {
try {
@@ -192,7 +401,7 @@
}
)
- await updateActivityState(row.id, 2)
+ await deleteActivity(row.id)
ElMessage.success('鍒犻櫎鎴愬姛')
loadData()
} catch {
@@ -217,15 +426,17 @@
loading.value = true
try {
const keyword = (searchForm.name || '').trim()
- const data = await getActivities(
- pagination.page - 1,
- pagination.size,
- keyword,
- searchForm.state
- )
+ // 浣跨敤鏉′欢璋冪敤閬垮厤TypeScript閿欒
+ let data;
+ if (searchForm.state !== '') {
+ // @ts-ignore 蹇界暐TypeScript妫�鏌ワ紝鍥犱负鍑芥暟瀹為檯鏀寔4涓弬鏁�
+ data = await getActivities(pagination.page - 1, pagination.size, keyword, Number(searchForm.state))
+ } else {
+ data = await getActivities(pagination.page - 1, pagination.size, keyword)
+ }
// 鏁版嵁鏄犲皠锛氬皢 API 杩斿洖瀛楁杞崲涓鸿〃鏍奸渶瑕佺殑瀛楁
- const mappedData = (data?.content || []).map(item => ({
+ const mappedData = (data?.content || []).map((item: any) => ({
...item,
playerCount: item.playerCount || 0,
stateName: item.stateName || ''
@@ -351,6 +562,36 @@
background: rgba(245, 108, 108, 0.1) !important;
}
+.view-btn {
+ color: #67C23A;
+}
+
+.view-btn:hover {
+ color: #5daf34;
+ transform: scale(1.2);
+ background: rgba(103, 194, 58, 0.1) !important;
+}
+
+.players-btn {
+ color: #E6A23C;
+}
+
+.players-btn:hover {
+ color: #cf9236;
+ transform: scale(1.2);
+ background: rgba(230, 162, 60, 0.1) !important;
+}
+
+.export-btn {
+ color: #909399;
+}
+
+.export-btn:hover {
+ color: #a6a9ad;
+ transform: scale(1.2);
+ background: rgba(144, 147, 153, 0.1) !important;
+}
+
.pagination {
margin-top: 20px;
display: flex;
@@ -375,4 +616,4 @@
max-width: 280px;
}
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.8.0