From 356a9f7a6e789ff152b80f917233b8736dfb0d7f Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期五, 07 十一月 2025 11:17:10 +0800
Subject: [PATCH] 页面显示字段调整
---
web/src/views/activity-list.vue | 157 +++++++++++++++++++++++++++++++++++++---------------
1 files changed, 112 insertions(+), 45 deletions(-)
diff --git a/web/src/views/activity-list.vue b/web/src/views/activity-list.vue
index 21af0a4..c1eec42 100644
--- a/web/src/views/activity-list.vue
+++ b/web/src/views/activity-list.vue
@@ -19,6 +19,20 @@
@keyup.enter="handleSearch"
@clear="handleClear"
/>
+ <el-select
+ v-model="searchForm.state"
+ placeholder="姣旇禌鐘舵��"
+ style="width: 160px"
+ clearable
+ @change="handleStateChange"
+ >
+ <el-option
+ v-for="option in stateOptions"
+ :key="option.value"
+ :label="option.label"
+ :value="option.value"
+ />
+ </el-select>
<el-button type="primary" @click="handleSearch">
<el-icon><Search /></el-icon>
鏌ヨ
@@ -40,21 +54,29 @@
<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="180" fixed="right" align="center">
<template #default="{ row }">
<div class="table-actions">
- <el-button
- text
- :icon="Edit"
- size="small"
+ <el-button
+ text
+ :icon="View"
+ size="small"
+ @click="handleView(row)"
+ class="action-btn view-btn"
+ title="璇︽儏"
+ />
+ <el-button
+ text
+ :icon="Edit"
+ size="small"
@click="handleEdit(row)"
class="action-btn edit-btn"
title="缂栬緫"
/>
- <el-button
- text
- :icon="Delete"
- size="small"
+ <el-button
+ text
+ :icon="Delete"
+ size="small"
@click="handleDelete(row)"
class="action-btn delete-btn"
title="鍒犻櫎"
@@ -84,18 +106,25 @@
import { reactive, ref, onMounted, onActivated, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
-import { getActivities } from '@/api/activity'
-import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'
+import { getActivities, updateActivityState } from '@/api/activity'
+import { Search, Plus, Edit, Delete, View } from '@element-plus/icons-vue'
-console.log('=== activity-list.vue 缁勪欢寮�濮嬪姞杞� ===');
+console.log('=== activity-list.vue 缁勪欢寮�濮嬪姞杞� ===')
const loading = ref(false)
const router = useRouter()
// 鎼滅储琛ㄥ崟
const searchForm = reactive({
- name: ''
+ name: '',
+ state: ''
})
+
+const stateOptions = [
+ { label: '鏈彂甯�', value: 0 },
+ { label: '鍙戝竷', value: 1 },
+ { label: '鍏抽棴', value: 2 }
+]
// 鍒嗛〉淇℃伅
const pagination = reactive({
@@ -107,19 +136,26 @@
// 琛ㄦ牸鏁版嵁
const tableData = ref([])
-// 娣诲姞璋冭瘯锛氱洃鍚瑃ableData鍙樺寲
-watch(tableData, (newVal) => {
- console.log('=== tableData 鍙戠敓鍙樺寲 ===', newVal)
- console.log('tableData.value.length:', newVal.length)
-}, { deep: true })
+// 璋冭瘯鐢ㄩ�旓細鐩戝惉琛ㄦ牸鏁版嵁鍙樺寲
+watch(
+ tableData,
+ newVal => {
+ console.log('=== tableData 鍙戠敓鍙樺寲 ===', newVal)
+ console.log('tableData.value.length:', newVal.length)
+ },
+ { deep: true }
+)
// 鑾峰彇鐘舵�佹爣绛剧被鍨�
const getStatusType = (status: string) => {
const typeMap: Record<string, string> = {
- '杩涜涓�': 'success',
- '鎶ュ悕涓�': 'warning',
- '寰呭紑濮�': 'info',
- '宸茬粨鏉�': 'info'
+ 宸插彂甯�: 'success',
+ 鍙戝竷: 'success',
+ 杩涜涓�: 'success',
+ 鎶ュ悕涓�: 'warning',
+ 寰呭紑濮�: 'info',
+ 宸茬粨鏉�: 'info',
+ 鍏抽棴: 'danger'
}
return typeMap[status] || 'info'
}
@@ -130,35 +166,50 @@
loadData()
}
+const handleStateChange = () => {
+ pagination.page = 1
+ loadData()
+}
+
// 娓呯┖鎼滅储
const handleClear = () => {
searchForm.name = ''
loadData()
}
- // 鏂板姣旇禌
+// 鏂板姣旇禌
const handleAdd = () => {
router.push('/activity/new')
}
- // 缂栬緫姣旇禌
+// 缂栬緫姣旇禌
const handleEdit = (row: any) => {
router.push(`/activity/edit/${row.id}`)
}
- // 鍒犻櫎姣旇禌
+// 鏌ョ湅璇︽儏
+const handleView = (row: any) => {
+ router.push(`/activity/${row.id}`)
+}
+
+// 鍒犻櫎姣旇禌
const handleDelete = async (row: any) => {
try {
- await ElMessageBox.confirm(`纭畾瑕佸垹闄ゆ瘮璧�"${row.name}"鍚楋紵`, '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- })
-
+ await ElMessageBox.confirm(
+ `纭畾瑕佸垹闄ゆ瘮璧� 鈥�${row.name}鈥� 鍚楋紵`,
+ '鎻愮ず',
+ {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }
+ )
+
+ await updateActivityState(row.id, 2)
ElMessage.success('鍒犻櫎鎴愬姛')
loadData()
} catch {
- // 鐢ㄦ埛鍙栨秷
+ // 鐢ㄦ埛鍙栨秷鎿嶄綔
}
}
@@ -178,20 +229,26 @@
const loadData = async () => {
loading.value = true
try {
- const data = await getActivities(pagination.page - 1, pagination.size, searchForm.name || '')
-
- // 鏁版嵁鏄犲皠锛氬皢API杩斿洖鐨勫瓧娈垫槧灏勫埌琛ㄦ牸鏈熸湜鐨勫瓧娈�
+ const keyword = (searchForm.name || '').trim()
+ const data = await getActivities(
+ pagination.page - 1,
+ pagination.size,
+ keyword,
+ searchForm.state
+ )
+
+ // 鏁版嵁鏄犲皠锛氬皢 API 杩斿洖瀛楁杞崲涓鸿〃鏍奸渶瑕佺殑瀛楁
const mappedData = (data?.content || []).map(item => ({
...item,
playerCount: item.playerCount || 0,
stateName: item.stateName || ''
- }));
-
+ }))
+
tableData.value = mappedData
pagination.total = data?.totalElements || 0
- } catch (e) {
- console.error('鍔犺浇鏁版嵁澶辫触:', e);
- ElMessage.error((e && e.message) ? e.message : '鍔犺浇姣旇禌鍒楄〃澶辫触')
+ } catch (e: any) {
+ console.error('鍔犺浇鏁版嵁澶辫触:', e)
+ ElMessage.error(e?.message || '鍔犺浇姣旇禌鍒楄〃澶辫触')
} finally {
loading.value = false
}
@@ -201,7 +258,7 @@
loadData()
})
-// 椤甸潰婵�娲绘椂閲嶆柊鍔犺浇鏁版嵁锛堣В鍐充粠鏂板/缂栬緫椤甸潰杩斿洖鏃跺垪琛ㄤ笉鍒锋柊鐨勯棶棰橈級
+// 椤甸潰婵�娲绘椂閲嶆柊鍔犺浇鏁版嵁锛堣В鍐充粠鏂板/缂栬緫杩斿洖鍚庡垪琛ㄤ笉鍚屾鐨勯棶棰橈級
onActivated(() => {
loadData()
})
@@ -264,7 +321,7 @@
margin-bottom: 20px;
}
-/* 鎼滅储妗嗘牱寮� */
+/* 鎼滅储鎸夐挳 */
.search-icon {
color: #999;
}
@@ -307,6 +364,16 @@
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;
+}
+
.pagination {
margin-top: 20px;
display: flex;
@@ -320,15 +387,15 @@
align-items: stretch;
gap: 16px;
}
-
+
.toolbar {
flex-wrap: wrap;
gap: 8px;
}
-
+
.toolbar .el-input {
width: 100% !important;
max-width: 280px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0