7 changed files with 304 additions and 252 deletions
-
1activitylink/.env.development
-
2activitylink/src/api/manage/gift.js
-
39activitylink/src/views/homePage.vue
-
66activitylink/src/views/zhongchou/activity/index.vue
-
2activitylink/src/views/zhongchou/gift/index.vue
-
436activitylink/src/views/zhongchou/level/index.vue
-
10activitylink/src/views/zhongchou/winning/index.vue
@ -1,282 +1,282 @@ |
|||||
<template> |
<template> |
||||
<h2>等级管理</h2> |
|
||||
<el-card style=" display: flex; flex-direction: column;"> |
|
||||
<div class="level-management-container" style="flex: 1; overflow-y: auto;"> |
|
||||
<!-- 添加等级按钮 --> |
|
||||
<div class="action-buttons"> |
|
||||
<el-button type="primary" @click="showAddDialog">添加等级</el-button> |
|
||||
</div> |
|
||||
|
<h2>等级管理</h2> |
||||
|
<el-card style=" display: flex; flex-direction: column;"> |
||||
|
<div class="level-management-container" style="flex: 1; overflow-y: auto;"> |
||||
|
<!-- 添加等级按钮 --> |
||||
|
<div class="action-buttons"> |
||||
|
<el-button type="primary" @click="showAddDialog">添加等级</el-button> |
||||
|
</div> |
||||
|
|
||||
<!-- 等级表格 --> |
|
||||
<div class="table-container"> |
|
||||
<el-table :data="tableData" style="width: 100%" :row-style="{ height: '60px' }"> |
|
||||
<el-table-column type="index" label="ID" width="120px" fixed="left" > |
|
||||
<template #default="scope"> |
|
||||
{{ pagination.pageSize * (pagination.pageNum - 1) + scope.$index + 1 }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="gradeName" label="等级名称" width="240" align="center" /> |
|
||||
<el-table-column prop="amount" label="数量" width="250" align="center" /> |
|
||||
<el-table-column prop="perWin" label="每轮抽取人数" width="300" align="center" /> |
|
||||
<el-table-column prop="sort" label="排序" width="240" align="center" /> |
|
||||
<el-table-column prop="operation" fixed="right" width="240" label="操作" align="center"> |
|
||||
<template #default="scope"> |
|
||||
<div style="display: flex; gap: 10px; justify-content: center;"> |
|
||||
<el-button text type="warning" @click="editLevel(scope.row)">编辑</el-button> |
|
||||
<el-button text type="danger" @click="deleteLevel(scope.row)">删除</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 分页 --> |
|
||||
<el-pagination class="pagination" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" |
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" :page-sizes="[10, 20, 50, 100]" |
|
||||
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
|
||||
|
|
||||
<!-- 添加 --> |
|
||||
<el-dialog v-model="addVisible" :title="dialogTitle" width=400px @closed="resetForm"> |
|
||||
<el-form :model="addForm" label-width="120px"> |
|
||||
<el-form-item label="等级名称" align="center"> |
|
||||
<el-input v-model="addForm.gradeName" placeholder="请输入等级名称"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="数量" align="center"> |
|
||||
<el-input v-model="addForm.amount" :precision="0" :min="0" placeholder="请输入数量" |
|
||||
style="width: 100%;"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="每轮抽取人数" align="center"> |
|
||||
<el-input v-model="addForm.perWin" :precision="0" :min="0" placeholder="请输入抽取人数" |
|
||||
style="width: 100%;"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="排序" align="center"> |
|
||||
<el-input v-model="addForm.sort" :precision="0" :min="0" placeholder="请输入排序等级" |
|
||||
style="width: 100%;"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<span> |
|
||||
<el-button @click="addVisible = false">取消</el-button> |
|
||||
<el-button type="primary" @click="submitAdd">确认</el-button> |
|
||||
</span> |
|
||||
|
<!-- 等级表格 --> |
||||
|
<div class="table-container"> |
||||
|
<el-table :data="tableData" style="width: 100%" :row-style="{ height: '60px' }"> |
||||
|
<el-table-column type="index" label="ID" width="120px" fixed="left" > |
||||
|
<template #default="scope"> |
||||
|
{{ pagination.pageSize * (pagination.pageNum - 1) + scope.$index + 1 }} |
||||
</template> |
</template> |
||||
</el-dialog> |
|
||||
<!-- 编辑 --> |
|
||||
<el-dialog v-model="editVisible" :title="dialogTitle" width=400px @closed="resetForm"> |
|
||||
<el-form :model="editForm" label-width="120px"> |
|
||||
<el-form-item label="等级名称" align="center"> |
|
||||
<el-input v-model="editForm.gradeName" placeholder="请输入等级名称"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="数量" align="center"> |
|
||||
<el-input v-model="editForm.amount" :precision="0" :min="0" placeholder="请输入数量" |
|
||||
style="width: 100%;"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="每轮抽取人数" align="center"> |
|
||||
<el-input v-model="editForm.perWin" :precision="0" :min="0" placeholder="请输入抽取人数" |
|
||||
style="width: 100%;"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="排序" align="center"> |
|
||||
<el-input v-model="editForm.sort" :precision="0" :min="0" placeholder="请输入排序等级" |
|
||||
style="width: 100%;"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<span> |
|
||||
<el-button @click="editVisible = false">取消</el-button> |
|
||||
<el-button type="primary" @click="submitEdit">确认</el-button> |
|
||||
</span> |
|
||||
|
</el-table-column> |
||||
|
<el-table-column prop="gradeName" label="等级名称" width="240" align="center" /> |
||||
|
<el-table-column prop="amount" label="数量" width="250" align="center" /> |
||||
|
<el-table-column prop="perWin" label="每轮抽取人数" width="300" align="center" /> |
||||
|
<el-table-column prop="sort" label="排序" width="240" align="center" /> |
||||
|
<el-table-column prop="operation" fixed="right" width="240" label="操作" align="center"> |
||||
|
<template #default="scope"> |
||||
|
<div style="display: flex; gap: 10px; justify-content: center;"> |
||||
|
<el-button text type="warning" @click="editLevel(scope.row)">编辑</el-button> |
||||
|
<el-button text type="danger" @click="deleteLevel(scope.row)">删除</el-button> |
||||
|
</div> |
||||
</template> |
</template> |
||||
</el-dialog> |
|
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
</el-card> |
|
||||
|
<!-- 分页 --> |
||||
|
<el-pagination class="pagination" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" |
||||
|
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" :page-sizes="[10, 20, 50, 100]" |
||||
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
||||
|
|
||||
|
<!-- 添加 --> |
||||
|
<el-dialog v-model="addVisible" :title="dialogTitle" width=400px @closed="resetForm"> |
||||
|
<el-form :model="addForm" label-width="120px"> |
||||
|
<el-form-item label="等级名称" align="center"> |
||||
|
<el-input v-model="addForm.gradeName" placeholder="请输入等级名称"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="数量" align="center"> |
||||
|
<el-input v-model="addForm.amount" :precision="0" :min="0" placeholder="请输入数量" |
||||
|
style="width: 100%;"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="每轮抽取人数" align="center"> |
||||
|
<el-input v-model="addForm.perWin" :precision="0" :min="0" placeholder="请输入抽取人数" |
||||
|
style="width: 100%;"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" align="center"> |
||||
|
<el-input v-model="addForm.sort" :precision="0" :min="0" placeholder="请输入排序等级" |
||||
|
style="width: 100%;"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<span> |
||||
|
<el-button @click="addVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="submitAdd">确认</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<!-- 编辑 --> |
||||
|
<el-dialog v-model="editVisible" :title="dialogTitle" width=400px @closed="resetForm"> |
||||
|
<el-form :model="editForm" label-width="120px"> |
||||
|
<el-form-item label="等级名称" align="center"> |
||||
|
<el-input v-model="editForm.gradeName" placeholder="请输入等级名称"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="数量" align="center"> |
||||
|
<el-input v-model="editForm.amount" :precision="0" :min="0" placeholder="请输入数量" |
||||
|
style="width: 100%;"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="每轮抽取人数" align="center"> |
||||
|
<el-input v-model="editForm.perWin" :precision="0" :min="0" placeholder="请输入抽取人数" |
||||
|
style="width: 100%;"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" align="center"> |
||||
|
<el-input v-model="editForm.sort" :precision="0" :min="0" placeholder="请输入排序等级" |
||||
|
style="width: 100%;"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<span> |
||||
|
<el-button @click="editVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="submitEdit">确认</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</el-card> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { ref, computed, onMounted } from 'vue' |
import { ref, computed, onMounted } from 'vue' |
||||
import { ElMessage, ElMessageBox } from 'element-plus' |
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
import { getLevelList, addLevel, deleteGrade, updateGrade } from '@/api/manage/level' |
|
||||
|
import { getLevelList, addLevel, deleteLevel, updateGrade } from '@/api/manage/level' |
||||
const tableData = ref([]) |
const tableData = ref([]) |
||||
const pagination = ref({ |
const pagination = ref({ |
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
total:0 |
|
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
total:0 |
||||
}) |
}) |
||||
const addVisible = ref(false) |
const addVisible = ref(false) |
||||
const editVisible = ref(false) |
const editVisible = ref(false) |
||||
const dialogTitle = ref('') |
const dialogTitle = ref('') |
||||
const addForm = ref({ |
const addForm = ref({ |
||||
gradeName: '', |
|
||||
amount: '', |
|
||||
perWin: '', |
|
||||
sort: '' |
|
||||
|
gradeName: '', |
||||
|
amount: '', |
||||
|
perWin: '', |
||||
|
sort: '' |
||||
}) |
}) |
||||
const editForm = ref({}) |
const editForm = ref({}) |
||||
// 显示添加对话框 |
// 显示添加对话框 |
||||
const showAddDialog = () => { |
const showAddDialog = () => { |
||||
dialogTitle.value = '添加等级' |
|
||||
addVisible.value = true |
|
||||
|
dialogTitle.value = '添加等级' |
||||
|
addVisible.value = true |
||||
} |
} |
||||
|
|
||||
// 显示编辑对话框 |
// 显示编辑对话框 |
||||
const editLevel = (row) => { |
const editLevel = (row) => { |
||||
dialogTitle.value = '编辑等级' |
|
||||
editForm.value = { |
|
||||
id: row.id, |
|
||||
gradeName: row.gradeName, |
|
||||
amount: row.amount, |
|
||||
perWin: row.perWin, |
|
||||
sort: row.sort |
|
||||
} |
|
||||
editVisible.value = true |
|
||||
|
dialogTitle.value = '编辑等级' |
||||
|
editForm.value = { |
||||
|
id: row.id, |
||||
|
gradeName: row.gradeName, |
||||
|
amount: row.amount, |
||||
|
perWin: row.perWin, |
||||
|
sort: row.sort |
||||
|
} |
||||
|
editVisible.value = true |
||||
} |
} |
||||
// 查全部 |
// 查全部 |
||||
const getLevels = async () => { |
const getLevels = async () => { |
||||
try { |
|
||||
const res = await getLevelList({ |
|
||||
pageNum: pagination.value.pageNum, |
|
||||
pageSize: pagination.value.pageSize |
|
||||
}) |
|
||||
|
|
||||
if (res.code === 200) { |
|
||||
tableData.value = res.data.list |
|
||||
pagination.value.total = res.data.total |
|
||||
} else { |
|
||||
ElMessage.error(res.message || '获取数据失败') |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.error('请求失败:', error) |
|
||||
ElMessage.error('请求失败,请重试') |
|
||||
} |
|
||||
|
try { |
||||
|
const res = await getLevelList({ |
||||
|
pageNum: pagination.value.pageNum, |
||||
|
pageSize: pagination.value.pageSize |
||||
|
}) |
||||
|
|
||||
|
if (res.code === 200) { |
||||
|
tableData.value = res.data.list |
||||
|
pagination.value.total = res.data.total |
||||
|
} else { |
||||
|
ElMessage.error(res.message || '获取数据失败') |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('请求失败:', error) |
||||
|
ElMessage.error('请求失败,请重试') |
||||
|
} |
||||
} |
} |
||||
// 添加 |
// 添加 |
||||
const submitAdd = async () => { |
const submitAdd = async () => { |
||||
if (!addForm.value.gradeName || addForm.value.amount === '' || addForm.value.sort === '' || addForm.value.perWin === '') { |
|
||||
ElMessage.error('请填写完整信息') |
|
||||
return |
|
||||
} |
|
||||
try { |
|
||||
const data = { |
|
||||
gradeName: String(addForm.value.gradeName), |
|
||||
amount: String(addForm.value.amount), |
|
||||
sort: String(addForm.value.sort), |
|
||||
perWin: String(addForm.value.perWin) |
|
||||
} |
|
||||
console.log('看看添加参数',data) |
|
||||
const response = await addLevel(data) |
|
||||
if (response.code === 200) { |
|
||||
ElMessage.success('添加成功') |
|
||||
addVisible.value = false |
|
||||
getLevels() |
|
||||
} else { |
|
||||
ElMessage.error(response.message || '添加失败') |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.error('添加等级失败:', error) |
|
||||
ElMessage.error('添加失败,请重试') |
|
||||
} |
|
||||
|
if (!addForm.value.gradeName || addForm.value.amount === '' || addForm.value.sort === '' || addForm.value.perWin === '') { |
||||
|
ElMessage.error('请填写完整信息') |
||||
|
return |
||||
|
} |
||||
|
try { |
||||
|
const data = { |
||||
|
gradeName: String(addForm.value.gradeName), |
||||
|
amount: String(addForm.value.amount), |
||||
|
sort: String(addForm.value.sort), |
||||
|
perWin: String(addForm.value.perWin) |
||||
|
} |
||||
|
console.log('看看添加参数',data) |
||||
|
const response = await addLevel(data) |
||||
|
if (response.code === 200) { |
||||
|
ElMessage.success('添加成功') |
||||
|
addVisible.value = false |
||||
|
getLevels() |
||||
|
} else { |
||||
|
ElMessage.error(response.message || '添加失败') |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('添加等级失败:', error) |
||||
|
ElMessage.error('添加失败,请重试') |
||||
|
} |
||||
} |
} |
||||
// 编辑 |
// 编辑 |
||||
const submitEdit = async () => { |
const submitEdit = async () => { |
||||
|
|
||||
if (!editForm.value.id || !editForm.value.gradeName || !editForm.value.amount || !editForm.value.perWin || !editForm.value.sort) { |
|
||||
ElMessage.error('请填写完整信息') |
|
||||
return |
|
||||
} |
|
||||
try { |
|
||||
const editData = { |
|
||||
id: editForm.value.id, |
|
||||
gradeName: editForm.value.gradeName, |
|
||||
amount: editForm.value.amount, |
|
||||
perWin: editForm.value.perWin, |
|
||||
sort: editForm.value.sort |
|
||||
} |
|
||||
console.log('看看编辑参数',editData) |
|
||||
const response = await updateGrade(editData) |
|
||||
if (response.code === 200) { |
|
||||
ElMessage.success('修改成功') |
|
||||
editVisible.value = false |
|
||||
getLevels() |
|
||||
} else { |
|
||||
ElMessage.error(response.message || '修改失败') |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.error('编辑等级失败:', error) |
|
||||
ElMessage.error('修改失败,请重试') |
|
||||
} |
|
||||
|
if (!editForm.value.id || !editForm.value.gradeName || !editForm.value.amount || !editForm.value.perWin || !editForm.value.sort) { |
||||
|
ElMessage.error('请填写完整信息') |
||||
|
return |
||||
|
} |
||||
|
try { |
||||
|
const editData = { |
||||
|
id: editForm.value.id, |
||||
|
gradeName: editForm.value.gradeName, |
||||
|
amount: editForm.value.amount, |
||||
|
perWin: editForm.value.perWin, |
||||
|
sort: editForm.value.sort |
||||
|
} |
||||
|
console.log('看看编辑参数',editData) |
||||
|
const response = await updateGrade(editData) |
||||
|
if (response.code === 200) { |
||||
|
ElMessage.success('修改成功') |
||||
|
editVisible.value = false |
||||
|
getLevels() |
||||
|
} else { |
||||
|
ElMessage.error(response.message || '修改失败') |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('编辑等级失败:', error) |
||||
|
ElMessage.error('修改失败,请重试') |
||||
|
} |
||||
} |
} |
||||
// 删除等级 |
// 删除等级 |
||||
const deleteLevel = (row) => { |
const deleteLevel = (row) => { |
||||
ElMessageBox.confirm('确定要删除该等级吗?', '提示', { |
|
||||
confirmButtonText: '确定', |
|
||||
cancelButtonText: '取消', |
|
||||
type: 'warning' |
|
||||
}).then(async () => { |
|
||||
try { |
|
||||
const id = String(row.id) |
|
||||
console.log('删除等级的id是:', id) |
|
||||
const response = await deleteGrade(id) |
|
||||
if (response.code === 200) { |
|
||||
ElMessage.success('删除成功') |
|
||||
getLevels() |
|
||||
} else { |
|
||||
ElMessage.error(response.message || '删除失败') |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.error('删除失败:', error) |
|
||||
ElMessage.error('删除失败,请重试') |
|
||||
} |
|
||||
}).catch(() => { |
|
||||
ElMessage.info('已取消删除') |
|
||||
}) |
|
||||
|
ElMessageBox.confirm('确定要删除该等级吗?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(async () => { |
||||
|
try { |
||||
|
const id = String(row.id) |
||||
|
console.log('删除等级的id是:', id) |
||||
|
const response = await deleteGrade(id) |
||||
|
if (response.code === 200) { |
||||
|
ElMessage.success('删除成功') |
||||
|
getLevels() |
||||
|
} else { |
||||
|
ElMessage.error(response.message || '删除失败') |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('删除失败:', error) |
||||
|
ElMessage.error('删除失败,请重试') |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
ElMessage.info('已取消删除') |
||||
|
}) |
||||
} |
} |
||||
|
|
||||
//清空表单(关闭对话框时调用) |
//清空表单(关闭对话框时调用) |
||||
const resetForm = () => { |
const resetForm = () => { |
||||
addForm.value = { |
|
||||
gradeName: '', |
|
||||
amount: '', |
|
||||
perWin: '', |
|
||||
sort: '' |
|
||||
} |
|
||||
|
addForm.value = { |
||||
|
gradeName: '', |
||||
|
amount: '', |
||||
|
perWin: '', |
||||
|
sort: '' |
||||
|
} |
||||
} |
} |
||||
const handleSizeChange = (val) => { |
const handleSizeChange = (val) => { |
||||
pagination.value.pageSize = val |
|
||||
pagination.value.pageNum = 1 |
|
||||
getLevels() |
|
||||
|
pagination.value.pageSize = val |
||||
|
pagination.value.pageNum = 1 |
||||
|
getLevels() |
||||
} |
} |
||||
const handleCurrentChange = (val) => { |
const handleCurrentChange = (val) => { |
||||
pagination.value.pageNum = val |
|
||||
getLevels() |
|
||||
|
pagination.value.pageNum = val |
||||
|
getLevels() |
||||
} |
} |
||||
onMounted(() => { |
onMounted(() => { |
||||
getLevels() |
|
||||
|
getLevels() |
||||
}) |
}) |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
.level-management-container { |
.level-management-container { |
||||
padding: 20px; |
|
||||
width: 100%; |
|
||||
box-sizing: border-box; |
|
||||
min-height: 80vh; |
|
||||
|
padding: 20px; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
min-height: 80vh; |
||||
} |
} |
||||
|
|
||||
.pagination { |
.pagination { |
||||
padding: 10px 20px; |
|
||||
background-color: #fff; |
|
||||
border-top: 1px solid #ebeef5; |
|
||||
display: flex; |
|
||||
justify-content: flex-start; |
|
||||
/* 改为左对齐 */ |
|
||||
|
padding: 10px 20px; |
||||
|
background-color: #fff; |
||||
|
border-top: 1px solid #ebeef5; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
/* 改为左对齐 */ |
||||
} |
} |
||||
|
|
||||
.action-buttons { |
.action-buttons { |
||||
margin-bottom: 20px; |
|
||||
|
margin-bottom: 20px; |
||||
} |
} |
||||
|
|
||||
.table-container { |
.table-container { |
||||
max-height: 650px; |
|
||||
overflow-y: auto; |
|
||||
|
max-height: 650px; |
||||
|
overflow-y: auto; |
||||
} |
} |
||||
</style> |
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue