<template>
|
<div class="rating-scheme-form">
|
<!-- 页面标题 -->
|
<div class="page-header">
|
<h2>{{ isEdit ? '编辑评分模板' : '新增评分模板' }}</h2>
|
<el-button @click="handleBack">返回列表</el-button>
|
</div>
|
|
<!-- 表单内容 -->
|
<div class="form-container">
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="120px"
|
v-loading="loading"
|
>
|
<!-- 基本信息 -->
|
<el-card class="form-card" header="基本信息">
|
<el-form-item label="模板名称" prop="name">
|
<el-input
|
v-model="form.name"
|
placeholder="请输入模板名称"
|
maxlength="30"
|
show-word-limit
|
/>
|
</el-form-item>
|
|
<el-form-item label="模板描述" prop="description">
|
<el-input
|
v-model="form.description"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入模板描述"
|
maxlength="500"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-card>
|
|
<!-- 评分条目 -->
|
<el-card class="form-card" header="评分条目">
|
<div class="items-header">
|
<span>评分条目配置</span>
|
<el-button type="primary" size="small" @click="handleAddItem">
|
<el-icon><Plus /></el-icon>
|
添加条目
|
</el-button>
|
</div>
|
|
<div class="items-list" v-if="form.items && form.items.length > 0">
|
<div
|
v-for="(item, index) in form.items"
|
:key="index"
|
class="item-row"
|
>
|
<el-row :gutter="20" align="middle">
|
<el-col :span="1">
|
<span class="item-index">{{ index + 1 }}</span>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item
|
:prop="`items.${index}.name`"
|
:rules="itemRules.name"
|
label-width="0"
|
>
|
<el-input
|
v-model="item.name"
|
placeholder="条目名称"
|
maxlength="30"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item
|
:prop="`items.${index}.maxScore`"
|
:rules="itemRules.maxScore"
|
label-width="0"
|
>
|
<el-input-number
|
v-model="item.maxScore"
|
:min="1"
|
:max="100"
|
placeholder="最大分值"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<div class="item-actions">
|
<el-button
|
type="text"
|
size="small"
|
@click="handleMoveUp(index)"
|
:disabled="index === 0"
|
>
|
<el-icon><ArrowUp /></el-icon>
|
</el-button>
|
<el-button
|
type="text"
|
size="small"
|
@click="handleMoveDown(index)"
|
:disabled="index === form.items.length - 1"
|
>
|
<el-icon><ArrowDown /></el-icon>
|
</el-button>
|
<el-button
|
type="text"
|
size="small"
|
@click="handleRemoveItem(index)"
|
style="color: #f56c6c"
|
>
|
<el-icon><Delete /></el-icon>
|
</el-button>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="item-score">
|
<el-tag type="success">{{ item.maxScore || 0 }}分</el-tag>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
|
<div v-else class="empty-items">
|
<el-empty description="暂无评分条目，请添加条目" />
|
</div>
|
|
<!-- 总分显示 -->
|
<div class="total-score">
|
<span>模板总分：</span>
|
<el-tag type="primary" size="large">{{ totalScore }}分</el-tag>
|
</div>
|
</el-card>
|
|
<!-- 操作按钮 -->
|
<div class="form-actions">
|
<el-button type="primary" @click="handleSubmit" :loading="submitting">
|
{{ isEdit ? '更新' : '保存' }}
|
</el-button>
|
<el-button @click="handleBack">取消</el-button>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive, computed, onMounted } from 'vue'
|
import { useRouter, useRoute } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import { Plus, ArrowUp, ArrowDown, Delete } from '@element-plus/icons-vue'
|
import { getRatingScheme, saveRatingScheme } from '@/api/rating'
|
|
export default {
|
name: 'RatingSchemeForm',
|
components: {
|
Plus,
|
ArrowUp,
|
ArrowDown,
|
Delete
|
},
|
setup() {
|
const router = useRouter()
|
const route = useRoute()
|
|
// 响应式数据
|
const formRef = ref()
|
const loading = ref(false)
|
const submitting = ref(false)
|
|
const form = reactive({
|
id: null,
|
name: '',
|
description: '',
|
items: []
|
})
|
|
// 表单验证规则
|
const rules = {
|
name: [
|
{ required: true, message: '请输入模板名称', trigger: 'blur' },
|
{ min: 1, max: 30, message: '模板名称长度在1到30个字符', trigger: 'blur' }
|
]
|
}
|
|
const itemRules = {
|
name: [
|
{ required: true, message: '请输入条目名称', trigger: 'blur' },
|
{ min: 1, max: 30, message: '条目名称长度在1到30个字符', trigger: 'blur' }
|
],
|
maxScore: [
|
{ required: true, message: '请输入最大分值', trigger: 'blur' },
|
{ type: 'number', min: 1, max: 100, message: '分值范围在1到100之间', trigger: 'blur' }
|
]
|
}
|
|
// 计算属性
|
const isEdit = computed(() => !!route.params.id)
|
|
const totalScore = computed(() => {
|
return form.items.reduce((sum, item) => sum + (item.maxScore || 0), 0)
|
})
|
|
// 加载数据
|
const loadData = async () => {
|
if (!isEdit.value) return
|
|
try {
|
loading.value = true
|
const data = await getRatingScheme(route.params.id)
|
|
form.id = data.id
|
form.name = data.name
|
form.description = data.description
|
form.items = data.items || []
|
} catch (error) {
|
console.error('加载评分模板失败:', error)
|
ElMessage.error('加载数据失败')
|
handleBack()
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 添加条目
|
const handleAddItem = () => {
|
form.items.push({
|
id: null,
|
name: '',
|
maxScore: 10,
|
orderNo: form.items.length + 1
|
})
|
}
|
|
// 删除条目
|
const handleRemoveItem = (index) => {
|
form.items.splice(index, 1)
|
// 重新设置排序号
|
form.items.forEach((item, idx) => {
|
item.orderNo = idx + 1
|
})
|
}
|
|
// 上移条目
|
const handleMoveUp = (index) => {
|
if (index > 0) {
|
const temp = form.items[index]
|
form.items[index] = form.items[index - 1]
|
form.items[index - 1] = temp
|
|
// 重新设置排序号
|
form.items.forEach((item, idx) => {
|
item.orderNo = idx + 1
|
})
|
}
|
}
|
|
// 下移条目
|
const handleMoveDown = (index) => {
|
if (index < form.items.length - 1) {
|
const temp = form.items[index]
|
form.items[index] = form.items[index + 1]
|
form.items[index + 1] = temp
|
|
// 重新设置排序号
|
form.items.forEach((item, idx) => {
|
item.orderNo = idx + 1
|
})
|
}
|
}
|
|
// 提交表单
|
const handleSubmit = async () => {
|
try {
|
// 验证表单
|
await formRef.value.validate()
|
|
// 验证至少有一个条目
|
if (!form.items || form.items.length === 0) {
|
ElMessage.error('请至少添加一个评分条目')
|
return
|
}
|
|
submitting.value = true
|
|
// 准备提交数据
|
const submitData = {
|
id: form.id,
|
name: form.name,
|
description: form.description,
|
items: form.items.map((item, index) => ({
|
id: item.id,
|
name: item.name,
|
maxScore: item.maxScore,
|
orderNo: index + 1
|
}))
|
}
|
|
await saveRatingScheme(submitData)
|
|
ElMessage.success(isEdit.value ? '更新成功' : '保存成功')
|
handleBack()
|
} catch (error) {
|
console.error('保存评分模板失败:', error)
|
ElMessage.error(error.message || '保存失败')
|
} finally {
|
submitting.value = false
|
}
|
}
|
|
// 返回列表
|
const handleBack = () => {
|
router.push('/rating-scheme')
|
}
|
|
// 初始化
|
onMounted(() => {
|
loadData()
|
})
|
|
return {
|
formRef,
|
loading,
|
submitting,
|
form,
|
rules,
|
itemRules,
|
isEdit,
|
totalScore,
|
handleAddItem,
|
handleRemoveItem,
|
handleMoveUp,
|
handleMoveDown,
|
handleSubmit,
|
handleBack
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.rating-scheme-form {
|
padding: 20px;
|
}
|
|
.page-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
}
|
|
.page-header h2 {
|
margin: 0;
|
color: #303133;
|
}
|
|
.form-container {
|
max-width: 1000px;
|
}
|
|
.form-card {
|
margin-bottom: 20px;
|
}
|
|
.items-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
font-weight: bold;
|
}
|
|
.items-list {
|
margin-bottom: 20px;
|
}
|
|
.item-row {
|
margin-bottom: 15px;
|
padding: 15px;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
background: #fafafa;
|
}
|
|
.item-index {
|
display: inline-flex;
|
align-items: center;
|
justify-content: center;
|
width: 24px;
|
height: 24px;
|
background: #409eff;
|
color: white;
|
border-radius: 50%;
|
font-size: 12px;
|
font-weight: bold;
|
}
|
|
.item-actions {
|
display: flex;
|
gap: 5px;
|
justify-content: center;
|
}
|
|
.item-score {
|
text-align: center;
|
}
|
|
.empty-items {
|
margin: 40px 0;
|
}
|
|
.total-score {
|
text-align: right;
|
padding: 15px 0;
|
border-top: 1px solid #ebeef5;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
.form-actions {
|
text-align: center;
|
padding: 20px 0;
|
}
|
|
.form-actions .el-button {
|
margin: 0 10px;
|
min-width: 100px;
|
}
|
</style>
|
