22f073d8e7
- 前后端分离架构 (Nuxt 3 + Element Plus) - SQLite 数据库 (better-sqlite3) - 比赛项目管理 (田赛/径赛/团体赛) - 队伍管理 (5 个组别) - 成绩录入与积分统计 - 记分板展示 (排名/奖牌榜) - 移动端响应式适配 - 侧边栏布局 + 抽屉菜单 - 自动生成初始化数据接口
148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<template>
|
|
<div class="teams-container">
|
|
<el-card>
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>队伍管理</span>
|
|
<el-button type="primary" @click="showAddDialog = true">添加队伍</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<el-form :inline="true" class="filter-form">
|
|
<el-form-item label="组别">
|
|
<el-select v-model="filters.group" placeholder="全部" clearable @change="loadTeams">
|
|
<el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-table :data="teams" border stripe class="teams-table">
|
|
<el-table-column prop="id" label="ID" width="80" />
|
|
<el-table-column prop="name" label="队伍名称" />
|
|
<el-table-column prop="team_group" label="组别" width="200" class-name="col-group" />
|
|
<el-table-column prop="created_at" label="创建时间" width="200" class-name="col-time">
|
|
<template #default="{ row }">
|
|
{{ new Date(row.created_at).toLocaleString('zh-CN') }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
|
|
<el-dialog v-model="showAddDialog" title="添加队伍" width="500px">
|
|
<el-form :model="form" label-width="100px">
|
|
<el-form-item label="队伍名称">
|
|
<el-input v-model="form.name" placeholder="请输入队伍名称" />
|
|
</el-form-item>
|
|
<el-form-item label="组别">
|
|
<el-select v-model="form.team_group" placeholder="请选择组别">
|
|
<el-option v-for="g in groups" :key="g.value" :label="g.label" :value="g.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="showAddDialog = false">取消</el-button>
|
|
<el-button type="primary" @click="addTeam">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const teams = ref([])
|
|
const showAddDialog = ref(false)
|
|
const filters = ref({ group: '' })
|
|
const groups = ref([])
|
|
|
|
const form = ref({
|
|
name: '',
|
|
team_group: ''
|
|
})
|
|
|
|
const loadConfig = async () => {
|
|
try {
|
|
const res = await $fetch('/api/config')
|
|
groups.value = res.data.groups
|
|
} catch (error) {
|
|
ElMessage.error('加载配置失败')
|
|
}
|
|
}
|
|
|
|
const loadTeams = async () => {
|
|
try {
|
|
const params = new URLSearchParams()
|
|
if (filters.value.group) params.append('group', filters.value.group)
|
|
|
|
const res = await $fetch(`/api/teams?${params}`)
|
|
teams.value = res.data
|
|
} catch (error) {
|
|
ElMessage.error('加载队伍失败')
|
|
}
|
|
}
|
|
|
|
const addTeam = async () => {
|
|
if (!form.value.name || !form.value.team_group) {
|
|
ElMessage.error('请填写完整信息')
|
|
return
|
|
}
|
|
|
|
try {
|
|
await $fetch('/api/teams', {
|
|
method: 'POST',
|
|
body: form.value
|
|
})
|
|
|
|
ElMessage.success('添加成功')
|
|
showAddDialog.value = false
|
|
form.value = { name: '', team_group: '' }
|
|
loadTeams()
|
|
} catch (error) {
|
|
ElMessage.error('添加失败')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadConfig()
|
|
loadTeams()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.teams-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-form {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.card-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.filter-form :deep(.el-form-item) {
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.filter-form :deep(.el-select) {
|
|
width: 100%;
|
|
}
|
|
|
|
.teams-table :deep(.col-time) {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|