<template>
|
<div class="rating-scheme-list">
|
<!-- 页面标题 -->
|
<div class="page-header">
|
<h2>评分模板管理</h2>
|
</div>
|
|
<!-- 搜索和操作区域 -->
|
<div class="search-bar">
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-input
|
v-model="searchForm.name"
|
placeholder="请输入模板名称"
|
clearable
|
@keyup.enter="handleSearch"
|
>
|
<template #prefix>
|
<el-icon><Search /></el-icon>
|
</template>
|
</el-input>
|
</el-col>
|
<el-col :span="8">
|
<el-button type="primary" @click="handleSearch">
|
<el-icon><Search /></el-icon>
|
查询
|
</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</el-col>
|
<el-col :span="8" class="text-right">
|
<el-button type="primary" @click="handleAdd">
|
<el-icon><Plus /></el-icon>
|
新增模板
|
</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 数据表格 -->
|
<div class="table-container">
|
<el-table
|
:data="tableData"
|
v-loading="loading"
|
stripe
|
style="width: 100%"
|
>
|
<el-table-column prop="name" label="模板名称" min-width="200" />
|
<el-table-column prop="totalScore" label="模板总分" width="120" align="center">
|
<template #default="{ row }">
|
<el-tag type="success">{{ row.totalScore }}分</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="description" label="模板描述" min-width="300" show-overflow-tooltip />
|
<el-table-column prop="createTime" label="创建时间" width="180" />
|
<el-table-column label="操作" width="200" fixed="right">
|
<template #default="{ row }">
|
<el-button type="primary" size="small" @click="handleEdit(row)">
|
编辑
|
</el-button>
|
<el-button type="danger" size="small" @click="handleDelete(row)">
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<!-- 分页 -->
|
<div class="pagination-container">
|
<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>
|
import { ref, reactive, onMounted } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { Search, Plus } from '@element-plus/icons-vue'
|
import { getRatingSchemes, deleteRatingScheme } from '@/api/rating'
|
|
export default {
|
name: 'RatingSchemeList',
|
components: {
|
Search,
|
Plus
|
},
|
setup() {
|
const router = useRouter()
|
|
// 响应式数据
|
const loading = ref(false)
|
const tableData = ref([])
|
|
const searchForm = reactive({
|
name: ''
|
})
|
|
const pagination = reactive({
|
page: 1,
|
size: 10,
|
total: 0
|
})
|
|
// 加载数据
|
const loadData = async () => {
|
try {
|
loading.value = true
|
const params = {
|
page: pagination.page - 1, // 后端从0开始
|
size: pagination.size,
|
name: searchForm.name || undefined
|
}
|
|
const result = await getRatingSchemes(params.page, params.size, params.name)
|
tableData.value = result.content
|
pagination.total = result.totalElements
|
} catch (error) {
|
console.error('加载评分模板列表失败:', error)
|
ElMessage.error('加载数据失败')
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 搜索
|
const handleSearch = () => {
|
pagination.page = 1
|
loadData()
|
}
|
|
// 重置
|
const handleReset = () => {
|
searchForm.name = ''
|
pagination.page = 1
|
loadData()
|
}
|
|
// 新增
|
const handleAdd = () => {
|
router.push('/rating-scheme/form')
|
}
|
|
// 编辑
|
const handleEdit = (row) => {
|
router.push(`/rating-scheme/form/${row.id}`)
|
}
|
|
// 删除
|
const handleDelete = async (row) => {
|
try {
|
await ElMessageBox.confirm(
|
`确定要删除评分模板"${row.name}"吗？`,
|
'确认删除',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}
|
)
|
|
await deleteRatingScheme(row.id)
|
ElMessage.success('删除成功')
|
loadData()
|
} catch (error) {
|
if (error !== 'cancel') {
|
console.error('删除评分模板失败:', error)
|
ElMessage.error(error.message || '删除失败')
|
}
|
}
|
}
|
|
// 分页事件
|
const handleSizeChange = (size) => {
|
pagination.size = size
|
pagination.page = 1
|
loadData()
|
}
|
|
const handleCurrentChange = (page) => {
|
pagination.page = page
|
loadData()
|
}
|
|
// 初始化
|
onMounted(() => {
|
loadData()
|
})
|
|
return {
|
loading,
|
tableData,
|
searchForm,
|
pagination,
|
handleSearch,
|
handleReset,
|
handleAdd,
|
handleEdit,
|
handleDelete,
|
handleSizeChange,
|
handleCurrentChange
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.rating-scheme-list {
|
padding: 20px;
|
}
|
|
.page-header {
|
margin-bottom: 20px;
|
}
|
|
.page-header h2 {
|
margin: 0;
|
color: #303133;
|
}
|
|
.search-bar {
|
margin-bottom: 20px;
|
padding: 20px;
|
background: #fff;
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
.table-container {
|
background: #fff;
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
.pagination-container {
|
margin-top: 20px;
|
text-align: right;
|
}
|
|
.text-right {
|
text-align: right;
|
}
|
</style>
|
