<template>
|
<div class="rating-page">
|
<!-- 页面标题区域 -->
|
<div class="page-header">
|
<div class="title-section">
|
<h1 class="page-title">评分模板</h1>
|
<p class="page-subtitle">管理比赛评分模板，设置评分标准和权重分配</p>
|
</div>
|
</div>
|
|
<!-- 搜索工具栏 -->
|
<div class="search-toolbar">
|
<div class="search-form">
|
<el-input
|
v-model="searchQuery"
|
placeholder="搜索评分模板..."
|
style="width: 300px"
|
clearable
|
@clear="handleClear"
|
/>
|
<el-button type="primary" @click="handleSearch">
|
<el-icon><Search /></el-icon>
|
查询
|
</el-button>
|
<el-button type="primary" @click="handleAdd">
|
<el-icon><Plus /></el-icon>
|
新增模板
|
</el-button>
|
</div>
|
</div>
|
|
<!-- 模板列表 -->
|
<el-table :data="tableData" style="width: 100%" v-loading="loading">
|
<el-table-column prop="name" label="模板名称" min-width="200" />
|
<el-table-column prop="totalScore" label="模板总分" width="120" align="center" />
|
<el-table-column prop="itemCount" label="评分条目数" width="120" align="center" />
|
<el-table-column prop="createTime" label="创建时间" width="180" />
|
<el-table-column label="操作" width="120" align="center">
|
<template #default="{ row }">
|
<el-button
|
text
|
:icon="Edit"
|
@click="handleEdit(row)"
|
class="action-btn edit-btn"
|
title="编辑"
|
/>
|
<el-button
|
text
|
:icon="Delete"
|
@click="handleDelete(row)"
|
class="action-btn delete-btn"
|
title="删除"
|
/>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<div class="pagination">
|
<el-pagination
|
v-model:current-page="pagination.page"
|
v-model:page-size="pagination.size"
|
:page-sizes="[10, 20, 50, 100]"
|
:total="pagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref, onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { useRouter } from 'vue-router'
|
import { Plus, Search, Edit, Delete } from '@element-plus/icons-vue'
|
import { getRatingSchemes, deleteRatingScheme } from '@/api/rating.js'
|
|
const loading = ref(false)
|
const searchQuery = ref('')
|
|
// 分页信息
|
const pagination = reactive({
|
page: 1,
|
size: 10,
|
total: 0
|
})
|
|
// 表格数据
|
const tableData = ref([])
|
|
// 新增模板
|
const router = useRouter()
|
|
const handleAdd = () => {
|
router.push('/rating-scheme/new')
|
}
|
|
// 编辑模板
|
const handleEdit = (row: any) => {
|
router.push(`/rating-scheme/edit/${row.id}`)
|
}
|
|
// 删除模板
|
const handleDelete = async (row: any) => {
|
try {
|
await ElMessageBox.confirm(`确定要删除评分模板"${row.name}"吗？`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
// 调用后端删除
|
await deleteRatingScheme(row.id)
|
ElMessage.success('删除成功')
|
loadData()
|
} catch (e) {
|
if (e) {
|
ElMessage.error(e.message || '删除失败')
|
}
|
}
|
}
|
|
// 搜索处理
|
const handleSearch = () => {
|
pagination.page = 1
|
loadData()
|
}
|
|
const handleClear = () => {
|
searchQuery.value = ''
|
pagination.page = 1
|
loadData()
|
}
|
|
// 分页大小改变
|
const handleSizeChange = (size: number) => {
|
pagination.size = size
|
loadData()
|
}
|
|
// 当前页改变
|
const handleCurrentChange = (page: number) => {
|
pagination.page = page
|
loadData()
|
}
|
|
// 加载数据
|
const loadData = async () => {
|
loading.value = true
|
try {
|
const data = await getRatingSchemes(pagination.page - 1, pagination.size)
|
tableData.value = (data && data.content) ? data.content : []
|
pagination.total = (data && data.totalElements) ? data.totalElements : 0
|
} catch (e) {
|
ElMessage.error((e && e.message) ? e.message : '加载评分模板失败')
|
} finally {
|
loading.value = false
|
}
|
}
|
|
onMounted(() => {
|
loadData()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.rating-page {
|
padding: 20px;
|
}
|
|
/* 页面标题区域 */
|
.page-header {
|
margin-bottom: 24px;
|
}
|
|
.title-section {
|
text-align: left;
|
}
|
|
.page-title {
|
font-size: 24px;
|
font-weight: 600;
|
color: #1f2937;
|
margin: 0 0 8px 0;
|
}
|
|
.page-subtitle {
|
font-size: 14px;
|
color: #6b7280;
|
margin: 0;
|
line-height: 1.5;
|
}
|
|
/* 搜索工具栏 */
|
.search-toolbar {
|
display: flex;
|
justify-content: flex-end;
|
margin-bottom: 20px;
|
padding: 16px;
|
background-color: #f9fafb;
|
border-radius: 8px;
|
border: 1px solid #e5e7eb;
|
}
|
|
.search-form {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
}
|
|
/* 搜索按钮 */
|
.search-btn {
|
width: 24px !important;
|
height: 24px !important;
|
min-height: 24px !important;
|
padding: 0 !important;
|
margin-right: 8px;
|
}
|
|
/* 操作按钮样式 */
|
.action-btn {
|
padding: 8px !important;
|
margin: 0 6px;
|
border-radius: 6px;
|
transition: all 0.2s ease;
|
}
|
|
.edit-btn {
|
color: #3b82f6 !important;
|
}
|
|
.edit-btn:hover {
|
background-color: rgba(59, 130, 246, 0.1) !important;
|
transform: scale(1.2);
|
}
|
|
.delete-btn {
|
color: #ef4444 !important;
|
}
|
|
.delete-btn:hover {
|
background-color: rgba(239, 68, 68, 0.1) !important;
|
transform: scale(1.2);
|
}
|
|
.pagination {
|
margin-top: 20px;
|
display: flex;
|
justify-content: center;
|
}
|
|
/* 响应式适配 */
|
@media (max-width: 768px) {
|
.search-toolbar {
|
flex-direction: column;
|
gap: 12px;
|
align-items: stretch;
|
}
|
|
.search-area {
|
justify-content: center;
|
}
|
}
|
</style>
|
