wangxiangwen4
1 month ago
9 changed files with 350 additions and 337 deletions
-
12activitylink/src/views/zhongchou/activity/detail/index.vue
-
1activitylink/src/views/zhongchou/activity/index.vue
-
14activitylink/src/views/zhongchou/activity/set/index.vue
-
7activitylink/src/views/zhongchou/gift/importFixedList/index.vue
-
7activitylink/src/views/zhongchou/gift/importuser/index.vue
-
3activitylink/src/views/zhongchou/gift/index.vue
-
31activitylink/src/views/zhongchou/index.vue
-
602activitylink/src/views/zhongchou/level/index.vue
-
10activitylink/src/views/zhongchou/winning/index.vue
@ -1,308 +1,322 @@ |
|||
<template> |
|||
<el-card style="margin-top:50px ; min-height: 90vh; max-height: 90vh;"> |
|||
<div class="gray-container"> |
|||
<h2>等级管理</h2> |
|||
<el-button type="primary" @click="addShow">添加等级</el-button> |
|||
<div class="table-container" style="flex: 1; overflow-y: auto;"> |
|||
<el-table :data="currentPageData" style="width: 100%" :row-style="{ height: '55px' }"> |
|||
<el-table-column type="index" label="ID" width="150" align="center"/> |
|||
<el-table-column prop="gradeName" label="等级名称" width="200" align="center"/> |
|||
<el-table-column prop="num" label="数量" width="250" align="center"/> |
|||
<el-table-column prop="numPeople" label="每轮抽取人数" width="300" align="center"/> |
|||
<el-table-column prop="sort" label="排序" width="200" align="center"/> |
|||
<el-table-column fixed="right" prop="operation" label="操作" align="center"> |
|||
<template #default="scope"> |
|||
<div style="display: flex; gap: 10px;"> |
|||
|
|||
|
|||
<el-button type="primary" text @click="editInit(scope.row)">编辑</el-button> |
|||
|
|||
<el-button type="primary" text @click="SetShow">设置多个</el-button> |
|||
<el-popconfirm title="确定将此用户删除吗？"> |
|||
<template #reference> |
|||
<el-button type="danger" text>删除</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button type="primary" size="small" @click="confirm">确定</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh; display: flex; flex-direction: column;"> |
|||
<div class="level-management-container" style="flex: 1; overflow-y: auto;"> |
|||
<h2>等级管理</h2> |
|||
<!-- 添加等级按钮 --> |
|||
<div class="action-buttons"> |
|||
<el-button type="primary" @click="showAddDialog">添加等级</el-button> |
|||
</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="tableData.length" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
> |
|||
</el-pagination> |
|||
</el-card> |
|||
|
|||
<el-dialog v-model="showAdd" style="width:600px" align-center> |
|||
<el-header> |
|||
<h2>添加等级</h2> |
|||
</el-header> |
|||
<el-form :model="addObj" ref="addForm"> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">等级名称：</span><el-input |
|||
v-model="addObj.gradeName" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">数量：</span><el-input |
|||
v-model="addObj.num" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">每轮抽取人数：</span><el-input |
|||
v-model="addObj.numPeople" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">排序：</span><el-input |
|||
v-model="addObj.sort" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer" style="text-align: right; margin-top:10px"> |
|||
<el-button @click="showAdd = false">取消</el-button> |
|||
<el-button type="primary" @click="showAdd = false"><!-- 改一下 --> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showEdit" style="width:600px" align-center> |
|||
<el-header> |
|||
<h2>编辑等级</h2> |
|||
</el-header> |
|||
<el-form :model="editObj" ref="addForm"> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">等级名称：</span><el-input |
|||
v-model="editObj.gradeName" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">数量：</span><el-input |
|||
v-model="editObj.num" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">每轮抽取人数：</span><el-input |
|||
v-model="editObj.numPeople" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">排序：</span><el-input |
|||
v-model="editObj.sort" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
|
|||
<!-- 等级表格 --> |
|||
<div class="table-container"> |
|||
<el-table :data="currentPageData" style="width: 100%" :row-style="{ height: '55px' }"> |
|||
<el-table-column type="index" label="ID" width="150" align="center" /> |
|||
<el-table-column prop="gradeName" label="等级名称" width="200" align="center" /> |
|||
<el-table-column prop="num" label="数量" width="250" align="center" /> |
|||
<el-table-column prop="numPeople" label="每轮抽取人数" width="300" align="center" /> |
|||
<el-table-column prop="sort" label="排序" width="200" align="center" /> |
|||
<el-table-column fixed="right" label="操作" align="center"> |
|||
<template #default="scope"> |
|||
<div style="display: flex; gap: 10px; justify-content: center;"> |
|||
<el-button size="default" @click="editLevel(scope.row)">编辑</el-button> |
|||
<el-button size="default" @click=setmor>设置多个</el-button> |
|||
<el-button size="default" 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="tableData.length" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
|
|||
<!-- 添加/编辑等级对话框 --> |
|||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width=400px @closed="resetForm"> |
|||
<el-form :model="form" label-width="120px"> |
|||
<el-form-item label="等级名称" align="center"> |
|||
<el-input v-model="form.gradeName" placeholder="请输入等级名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="数量" align="center"> |
|||
<el-input-number v-model="form.num" :precision="0" :min="0" placeholder="请输入数量" style="width: 100%;"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item label="每轮抽取人数" align="center"> |
|||
<el-input-number v-model="form.numPeople" :precision="0" :min="0" placeholder="请输入抽取人数" style="width: 100%;"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item label="排序" align="center"> |
|||
<el-input-number v-model="form.sort" :precision="0" :min="0" placeholder="请输入排序等级" style="width: 100%;"></el-input-number> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer" style="text-align: right; margin-top:10px"> |
|||
<el-button @click="showEdit = false">取消</el-button> |
|||
<el-button type="primary" @click="showEdit = false"><!-- 改一下 --> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">取消</el-button> |
|||
<el-button type="primary" @click="submitForm">确认</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showSet" style="width:600px" align-center> |
|||
<el-header> |
|||
<h2>设置多个</h2> |
|||
</el-header> |
|||
<el-form :model="setObj" ref="addForm"> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">等级名称：</span><el-input |
|||
v-model="setObj.gradeName" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">数量：</span><el-input |
|||
v-model="setObj.num" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">每轮抽取人数：</span><el-input |
|||
v-model="setObj.numPeople" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<div class="marginTop"> |
|||
<span style="width: 100px; display: inline-block; text-align: right;">排序：</span><el-input |
|||
v-model="setObj.sort" placeholder="请输入" style="width:200px"></el-input> |
|||
</div> |
|||
<!-- 设置多个对话框 --> |
|||
<!-- 添加/编辑等级对话框 --> |
|||
<el-dialog v-model="setmore" :title="setTitle" width=400px @closed="resetForm"> |
|||
<el-form :model="form" label-width="120px"> |
|||
<el-form-item label="等级名称" align="center"> |
|||
<el-input v-model="form.gradeName" placeholder="请输入等级名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="数量" align="center"> |
|||
<el-input-number v-model="form.num" :precision="0" :min="0" placeholder="请输入数量" style="width: 100%;"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item label="每轮抽取人数" align="center"> |
|||
<el-input-number v-model="form.numPeople" :precision="0" :min="0" placeholder="请输入抽取人数" style="width: 100%;"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item label="排序" align="center"> |
|||
<el-input-number v-model="form.sort" :precision="0" :min="0" placeholder="请输入排序等级" style="width: 100%;"></el-input-number> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer" style="text-align: right; margin-top:10px"> |
|||
<el-button @click="showSet = false">取消</el-button> |
|||
<el-button type="primary" @click="showSet = false"><!-- 改一下 --> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="setmore = false">取消</el-button> |
|||
<el-button type="primary" @click="submitForm">确认</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup> |
|||
import { ref,computed ,reactive, watch, onMounted } from 'vue' |
|||
const showAdd = ref(false) |
|||
const showEdit = ref(false) |
|||
const showSet = ref(false) |
|||
|
|||
const addShow = () => { |
|||
showAdd.value = true |
|||
} |
|||
const SetShow = () => { |
|||
showSet.value = true |
|||
} |
|||
|
|||
const addObj = ref({ |
|||
gradeName: '', |
|||
num: 0, |
|||
numPeople: 0, |
|||
sort: 0 |
|||
}) |
|||
const editObj = ref({})// 要回显 |
|||
const setObj = ref({}) |
|||
const pagination = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0 |
|||
}) |
|||
|
|||
// 计算属性 - 当前页数据 |
|||
const currentPageData = computed(() => { |
|||
const start = (pagination.value.pageNum - 1) * pagination.value.pageSize |
|||
const end = start + pagination.value.pageSize |
|||
return tableData.value.slice(start, end) |
|||
}) |
|||
|
|||
// 处理每页显示数量变化 |
|||
const handleSizeChange = (val) => { |
|||
pagination.value.pageSize = val |
|||
pagination.value.pageNum = 1 |
|||
} |
|||
|
|||
// 处理当前页变化 |
|||
const handleCurrentChange = (val) => { |
|||
pagination.value.pageNum = val |
|||
} |
|||
|
|||
const editInit = function (row) { |
|||
editObj.value = row |
|||
showEdit.value = true |
|||
} |
|||
const tableData = ref([ |
|||
</el-dialog> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed } from 'vue' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
|
|||
// 数据定义 |
|||
const tableData = ref([ |
|||
{ |
|||
id: 1, |
|||
gradeName: '等级一', |
|||
num: 100, |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
}, |
|||
{ |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
}, { |
|||
id: 1, |
|||
num: 1, |
|||
gradeName: '这是假数据', |
|||
numPeople: 10, |
|||
sort: 1 |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
gradeName: '等级二', |
|||
num: 200, |
|||
numPeople: 20, |
|||
sort: 2 |
|||
} |
|||
]) |
|||
</script> |
|||
<style scoped> |
|||
.marginTop { |
|||
margin-top: 10px; |
|||
} |
|||
]) |
|||
|
|||
.gray-container { |
|||
width: 100%; /* 宽度自适应 */ |
|||
background-color: #ffffff; /* 浅灰色背景 */ |
|||
padding: 20px; /* 内边距 */ |
|||
box-sizing: border-box; /* 包含内边距在总宽度内 */ |
|||
min-height: 80vh; /* 设置最小高度 */ |
|||
overflow-x: hidden; |
|||
} |
|||
const setmore=ref(false) |
|||
|
|||
// 分页 |
|||
const pagination = ref({ |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
}) |
|||
|
|||
const currentPageData = computed(() => { |
|||
const start = (pagination.value.pageNum - 1) * pagination.value.pageSize |
|||
const end = start + pagination.value.pageSize |
|||
return tableData.value.slice(start, end) |
|||
}) |
|||
|
|||
const handleSizeChange = (val) => { |
|||
pagination.value.pageSize = val |
|||
pagination.value.pageNum = 1 |
|||
} |
|||
|
|||
const handleCurrentChange = (val) => { |
|||
pagination.value.pageNum = val |
|||
} |
|||
|
|||
// 对话框相关 |
|||
const setTitle = ref('设置多个') |
|||
const setmor=()=>{ |
|||
setmore.value=true |
|||
|
|||
} |
|||
|
|||
.table-container { |
|||
max-height: 600px; /* 或者根据你的页面布局调整 */ |
|||
overflow-y: auto; |
|||
const dialogVisible = ref(false) |
|||
const dialogTitle = ref('添加等级') |
|||
const form = ref({ |
|||
id: null, |
|||
gradeName: '', |
|||
num: null, |
|||
numPeople: null, |
|||
sort: null |
|||
}) |
|||
|
|||
// 显示添加对话框 |
|||
const showAddDialog = () => { |
|||
dialogTitle.value = '添加等级' |
|||
form.value = { |
|||
id: null, |
|||
gradeName: '', |
|||
num: null, |
|||
numPeople: null, |
|||
sort: null |
|||
} |
|||
dialogVisible.value = true |
|||
} |
|||
|
|||
// 显示编辑对话框 |
|||
const editLevel = (row) => { |
|||
dialogTitle.value = '编辑等级' |
|||
form.value = { ...row } |
|||
dialogVisible.value = true |
|||
} |
|||
|
|||
// 提交表单 |
|||
const submitForm = () => { |
|||
if (!form.value.gradeName || form.value.num === null || form.value.sort === null) { |
|||
ElMessage.error('请填写完整信息') |
|||
return |
|||
} |
|||
|
|||
if (form.value.id) { |
|||
// 编辑 |
|||
const index = tableData.value.findIndex(item => item.id === form.value.id) |
|||
if (index !== -1) { |
|||
tableData.value[index] = { ...form.value } |
|||
} |
|||
} else { |
|||
// 添加 |
|||
const newId = tableData.value.length > 0 ? Math.max(...tableData.value.map(item => item.id)) + 1 : 1 |
|||
tableData.value.push({ |
|||
id: newId, |
|||
...form.value |
|||
}) |
|||
} |
|||
|
|||
dialogVisible.value = false |
|||
ElMessage.success('操作成功') |
|||
} |
|||
|
|||
// 删除等级 |
|||
const deleteLevel = (row) => { |
|||
ElMessageBox.confirm('确定要删除该等级吗?', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
tableData.value = tableData.value.filter(item => item.id !== row.id) |
|||
ElMessage.success('删除成功') |
|||
}).catch(() => { |
|||
ElMessage.info('已取消删除') |
|||
}) |
|||
} |
|||
|
|||
// 清空表单（关闭对话框时调用） |
|||
const resetForm = () => { |
|||
form.value = { |
|||
id: null, |
|||
gradeName: '', |
|||
num: null, |
|||
numPeople: null, |
|||
sort: null |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.level-management-container { |
|||
padding: 20px; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
min-height: 80vh; |
|||
} |
|||
|
|||
.pagination { |
|||
padding: 10px 20px; |
|||
background-color: #fff; |
|||
border-top: 1px solid #ebeef5; |
|||
display: flex; |
|||
justify-content: flex-start; /* 改为左对齐 */ |
|||
} |
|||
</style> |
|||
|
|||
.action-buttons { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.table-container { |
|||
max-height: 600px; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue