lihuilin
4 weeks ago
6 changed files with 815 additions and 709 deletions
-
93activitylink/src/api/manage/gift.js
-
24activitylink/src/api/manage/level.js
-
393activitylink/src/views/zhongchou/gift/importFixedList/index.vue
-
474activitylink/src/views/zhongchou/gift/importuser/index.vue
-
385activitylink/src/views/zhongchou/gift/index.vue
-
155activitylink/src/views/zhongchou/level/index.vue
@ -1,279 +1,146 @@ |
|||||
<template> |
<template> |
||||
<el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh;"> |
|
||||
<!-- 头部标题区域 --> |
|
||||
<template #header> |
|
||||
<div style="display: flex; align-items: center; justify-content: space-between;"> |
|
||||
<span style="font-size: 18px; font-weight: bold;">导入内定名单--{{ giftStore.fixedGiftName }}</span> |
|
||||
|
|
||||
<el-button type="primary" @click="goBack"> |
|
||||
<i class="el-icon-back"></i> 返回 |
|
||||
</el-button> |
|
||||
</div> |
|
||||
|
<div style="margin-bottom:30px"> |
||||
|
<el-button type="primary" @click="goBack" style="margin-right:20px">返回</el-button> |
||||
|
<span style="font-size: 1.5em; font-weight: bold;">导入内定用户</span> |
||||
|
</div> |
||||
|
<el-card style="min-height: 90vh; max-height: 90vh;"> |
||||
|
<div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;"> |
||||
|
<div style="display: flex; gap: 10px; align-items: center;"> |
||||
|
<span style="white-space: nowrap;">姓名：</span> |
||||
|
<el-input v-model="searchObj.name" placeholder="请输入姓名" style="width: 150px;" clearable></el-input> |
||||
|
|
||||
</template> |
|
||||
|
|
||||
<!-- 搜索和操作区域 --> |
|
||||
<div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;"> |
|
||||
<!-- 左侧搜索区域 --> |
|
||||
<div style="display: flex; gap: 10px; align-items: center;"> |
|
||||
<span style="white-space: nowrap;">姓名：</span> |
|
||||
<el-input |
|
||||
v-model="searchData.name" |
|
||||
placeholder="请输入姓名" |
|
||||
style="width: 150px;" |
|
||||
clearable |
|
||||
></el-input> |
|
||||
|
|
||||
<span style="white-space: nowrap; margin-left: 10px;">精网号：</span> |
|
||||
<el-input |
|
||||
v-model="searchData.jingwangId" |
|
||||
placeholder="请输入精网号" |
|
||||
style="width: 180px;" |
|
||||
clearable |
|
||||
@input="handleJingwangIdInput" |
|
||||
></el-input> |
|
||||
<el-button type="primary" @click="search" style="margin-left: 10px;">搜索</el-button> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 右侧操作按钮区域 --> |
|
||||
<div style="display: flex; gap: 10px;"> |
|
||||
<el-button type="primary" @click="addUser">添加用户</el-button> |
|
||||
<el-button type="success" @click="importExcel">导入Excel</el-button> |
|
||||
</div> |
|
||||
|
<span style="white-space: nowrap; margin-left: 10px;">精网号：</span> |
||||
|
<el-input v-model="searchObj.jwcode" placeholder="请输入精网号" style="width: 180px;" clearable |
||||
|
@input="trimJwcode"></el-input> |
||||
|
<el-button type="primary" @click="" style="margin-left: 10px;">搜索</el-button> |
||||
|
</div> |
||||
|
<div style="display: flex; gap: 10px;"> |
||||
|
<el-button type="primary" @click="addUser">添加用户</el-button> |
||||
|
<el-button type="success" @click="importExcel">导入Excel</el-button> |
||||
|
</div> |
||||
</div> |
</div> |
||||
|
|
||||
<!-- 用户表格 --> |
|
||||
<el-table :data="filteredUsers" style="width: 100%;" :row-style="{ height: '60px' }"> |
|
||||
<el-table-column type="selection" width="200" /> |
|
||||
<el-table-column prop="id" label="ID" width="250" /> |
|
||||
<el-table-column prop="name" label="姓名" width="250" /> |
|
||||
<el-table-column prop="jingwangId" label="精网号" width="300" /> |
|
||||
<el-table-column label="操作" > |
|
||||
<template #default="scope"> |
|
||||
<el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
|
|
||||
<!-- 底部操作区域 --> |
|
||||
<div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;"> |
|
||||
<el-button type="danger" @click="batchDelete">批量删除</el-button> |
|
||||
<div style="display: flex; align-items: center;"> |
|
||||
<span style="margin-right: 15px;">共{{ total }}条</span> |
|
||||
<el-select v-model="pageSize" style="width: 120px; margin-right: 15px;"> |
|
||||
<el-option label="10条/页" :value="10" /> |
|
||||
<el-option label="20条/页" :value="20" /> |
|
||||
<el-option label="50条/页" :value="50" /> |
|
||||
</el-select> |
|
||||
<el-pagination |
|
||||
layout="prev, pager, next" |
|
||||
:total="total" |
|
||||
:page-size="pageSize" |
|
||||
v-model:current-page="currentPage" |
|
||||
/> |
|
||||
<el-input |
|
||||
v-model="jumpPage" |
|
||||
style="width: 80px; margin-left: 15px; margin-right: 10px;" |
|
||||
placeholder="页码" |
|
||||
/> |
|
||||
<el-button type="primary" @click="goToPage">前往</el-button> |
|
||||
</div> |
|
||||
|
<!-- 用户表格 --> |
||||
|
<el-table :data="tableData" style="width: 100%;" :row-style="{ height: '60px' }"> |
||||
|
<el-table-column type="selection" width="200" /> |
||||
|
<el-table-column prop="id" label="ID" width="250" /> |
||||
|
<el-table-column prop="name" label="姓名" width="250" /> |
||||
|
<el-table-column prop="jwcode" label="精网号" width="300" /> |
||||
|
<el-table-column label="操作"> |
||||
|
<template #default="scope"> |
||||
|
<el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!-- 底部操作区域 --> |
||||
|
<div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;"> |
||||
|
<el-button type="danger" @click="batchDelete">批量删除</el-button> |
||||
|
<div style="display: flex; align-items: center;"> |
||||
|
<span style="margin-right: 15px;">共{{ total }}条</span> |
||||
|
<el-select v-model="pageSize" style="width: 120px; margin-right: 15px;"> |
||||
|
<el-option label="10条/页" :value="10" /> |
||||
|
<el-option label="20条/页" :value="20" /> |
||||
|
<el-option label="50条/页" :value="50" /> |
||||
|
</el-select> |
||||
|
<el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" |
||||
|
v-model:current-page="currentPage" /> |
||||
|
<el-input v-model="jumpPage" style="width: 80px; margin-left: 15px; margin-right: 10px;" placeholder="页码" /> |
||||
|
<el-button type="primary" @click="goToPage">前往</el-button> |
||||
</div> |
</div> |
||||
</el-card> |
|
||||
|
|
||||
<el-dialog |
|
||||
v-model="centerDialogVisible" |
|
||||
title="添加用户" |
|
||||
width="500" |
|
||||
align-center |
|
||||
> |
|
||||
<el-form ref="addForm" :model="winuser" label-width="80px"> |
|
||||
<el-form-item label="姓名" prop="name"> |
|
||||
<el-input v-model="winuser.name" placeholder="请输入中奖用户姓名" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="精网号" prop="jingwangId"> |
|
||||
<el-input v-model="winuser.jingwangId" placeholder="请输入中奖用户精网号" @input="handleJingwangIdInput"/> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button @click="cancel">取消</el-button> |
|
||||
<el-button type="primary" @click="addwinUser"> |
|
||||
确定 |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, computed } from 'vue' |
|
||||
import { useRouter } from 'vue-router' |
|
||||
import { usegiftFixedListStone } from '@/stone/giftFixedListStone'; |
|
||||
|
</div> |
||||
|
</el-card> |
||||
|
|
||||
const giftStore = usegiftFixedListStone(); |
|
||||
const router = useRouter() |
|
||||
const centerDialogVisible = ref(false) |
|
||||
// 用户数据 |
|
||||
const users = ref([ |
|
||||
{ |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, |
|
||||
]) |
|
||||
|
|
||||
// 搜索文本 |
|
||||
const searchData = ref({ |
|
||||
name: '', |
|
||||
jingwangId: '' |
|
||||
}) |
|
||||
// 分页相关 |
|
||||
const currentPage = ref(1) |
|
||||
const pageSize = ref(10) |
|
||||
const jumpPage = ref('') |
|
||||
const total = computed(() => users.value.length) |
|
||||
|
|
||||
// 过滤后的用户数据 |
|
||||
const filteredUsers = computed(() => { |
|
||||
// 实际项目中这里会有搜索过滤逻辑 |
|
||||
const start = (currentPage.value - 1) * pageSize.value |
|
||||
const end = start + pageSize.value |
|
||||
return users.value.slice(start, end) |
|
||||
}) |
|
||||
|
|
||||
const search = () => { |
|
||||
// 搜索逻辑 |
|
||||
console.log('执行搜索') |
|
||||
} |
|
||||
|
<el-dialog v-model="addVisible" title="添加用户" width="500" align-center> |
||||
|
<el-form ref="addForm" :model="winuser" label-width="80px"> |
||||
|
<el-form-item label="姓名" prop="name"> |
||||
|
<el-input v-model="winuser.name" placeholder="请输入用户姓名" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="精网号" prop="jwcode"> |
||||
|
<el-input v-model="winuser.jwcode" placeholder="请输入精网号" @input="trimJwcode" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="cancel">取消</el-button> |
||||
|
<el-button type="primary" @click="addwinUser"> |
||||
|
确定 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
const winuser=ref({ |
|
||||
name: '', |
|
||||
jingwangId: '', |
|
||||
}) |
|
||||
|
<script setup> |
||||
|
import { ref, computed, onMounted } from 'vue' |
||||
|
import { useRouter } from 'vue-router' |
||||
|
import { usegiftFixedListStone } from '@/stone/giftFixedListStone'; |
||||
|
import { getFixUserList } from '@/api/manage/gift' |
||||
|
const giftStore = usegiftFixedListStone(); |
||||
|
const router = useRouter() |
||||
|
|
||||
// 删除用户 |
|
||||
const deleteUser = (user) => { |
|
||||
const index = users.value.findIndex(u => u.id === user.id) |
|
||||
if (index !== -1) { |
|
||||
users.value.splice(index, 1) |
|
||||
|
const addVisible = ref(false) |
||||
|
const tableData = ref([]) |
||||
|
const pagination = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
total:0 |
||||
|
}) |
||||
|
// 搜索对象 |
||||
|
const searchObj = ref({ |
||||
|
username: '', |
||||
|
jwcode: '', |
||||
|
}) |
||||
|
// 查全部 |
||||
|
const getFixUsers = async () => { |
||||
|
try { |
||||
|
const res = await getFixUserList({ |
||||
|
username: searchObj.value.username, |
||||
|
password: searchObj.value.jwcode, |
||||
|
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 batchDelete = () => { |
|
||||
// 实际项目中这里会有批量删除逻辑 |
|
||||
console.log('执行批量删除') |
|
||||
} |
|
||||
|
|
||||
//添加用户 |
|
||||
const addUser = () => { |
|
||||
// 实际添加用户逻辑 |
|
||||
centerDialogVisible.value = true |
|
||||
|
} |
||||
|
// 跳转到指定页 |
||||
|
const goToPage = () => { |
||||
|
const page = parseInt(jumpPage.value) |
||||
|
if (!isNaN(page) && page > 0 && page <= Math.ceil(total.value / pageSize.value)) { |
||||
|
currentPage.value = page |
||||
} |
} |
||||
|
|
||||
//取消添加 |
|
||||
const cancel = () => { |
|
||||
centerDialogVisible.value = false |
|
||||
winuser.value ={ |
|
||||
name: '', |
|
||||
jingwangId: '' |
|
||||
|
jumpPage.value = '' |
||||
} |
} |
||||
|
const trimJwcode = (value) => { |
||||
|
searchObj.value.jwcode = value.replace(/\D/g, '') |
||||
} |
} |
||||
//添加活动 |
|
||||
const addwinUser = () => { |
|
||||
centerDialogVisible.value = false |
|
||||
//TODO: 添加活动逻辑 |
|
||||
winuser.value ={ |
|
||||
name: '', |
|
||||
jingwangId: '' |
|
||||
|
// 返回上一页 |
||||
|
const goBack = () => { |
||||
|
router.back() |
||||
} |
} |
||||
|
onMounted(() => { |
||||
|
getFixUsers() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.el-card { |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||
} |
} |
||||
|
|
||||
// 导入Excel |
|
||||
const importExcel = () => { |
|
||||
// 实际导入逻辑 |
|
||||
console.log('导入Excel') |
|
||||
} |
|
||||
|
|
||||
// 跳转到指定页 |
|
||||
const goToPage = () => { |
|
||||
const page = parseInt(jumpPage.value) |
|
||||
if (!isNaN(page) && page > 0 && page <= Math.ceil(total.value / pageSize.value)) { |
|
||||
currentPage.value = page |
|
||||
} |
|
||||
jumpPage.value = '' |
|
||||
} |
|
||||
|
|
||||
const handleJingwangIdInput = (value) => { |
|
||||
searchData.value.jingwangId = value.replace(/\D/g, '') |
|
||||
} |
|
||||
|
.el-table { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
// 返回上一页 |
|
||||
const goBack = () => { |
|
||||
router.back() |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.el-card { |
|
||||
border-radius: 8px; |
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|
||||
} |
|
||||
|
|
||||
.el-table { |
|
||||
margin-top: 10px; |
|
||||
} |
|
||||
|
|
||||
.el-pagination { |
|
||||
margin: 0; |
|
||||
} |
|
||||
</style> |
|
||||
|
.el-pagination { |
||||
|
margin: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -1,275 +1,233 @@ |
|||||
<template> |
<template> |
||||
<el-card style="margin-top: 50px; min-height: 90vh; max-height: 90vh;"> |
|
||||
<!-- 头部标题区域 --> |
|
||||
<template #header> |
|
||||
<div style="display: flex; align-items: center; justify-content: space-between;"> |
|
||||
<span style="font-size: 18px; font-weight: bold;">导入抽奖用户</span> |
|
||||
|
<div style="margin-bottom:30px"> |
||||
|
<el-button type="primary" @click="goBack" style="margin-right:20px">返回</el-button> |
||||
|
<span style="font-size: 1.5em; font-weight: bold;">导入抽奖用户</span> |
||||
|
</div> |
||||
|
<el-card> |
||||
|
<div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;"> |
||||
|
<div> |
||||
|
姓名：<el-input v-model="searchObj.username" placeholder="请输入姓名" style="width: 150px;margin-right:10px" clearable></el-input> |
||||
|
精网号：<el-input v-model="searchObj.jwcode" placeholder="请输入精网号" style="width: 180px;" clearable @input="trimJwcode"></el-input> |
||||
|
<el-button type="primary" @click="getUsers" style="margin-left: 10px;">搜索</el-button> |
||||
|
</div> |
||||
|
<div style="display: flex; gap: 10px;" fixed:right> |
||||
|
<el-button type="primary" @click="openAdd">添加用户</el-button> |
||||
|
<el-button type="success" @click="importExcel">导入Excel</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 用户表格 --> |
||||
|
<el-table :data="tableData" style="width: 100%;" :row-style="{ height: '60px' }" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column type="selection" width="70" /> |
||||
|
<el-table-column type="index" label="ID" width="200" /> |
||||
|
<el-table-column prop="username" label="姓名" width="200" /> |
||||
|
<el-table-column prop="jwcode" label="精网号" width="200" /> |
||||
|
<el-table-column label="操作" fixed="right"> |
||||
|
<template #default="scope"> |
||||
|
<el-button text type="danger" @click="delUser(scope.row)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
<el-button type="primary" @click="goBack"> |
|
||||
<i class="el-icon-back"></i> 返回 |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<!-- 搜索和操作区域 --> |
|
||||
<div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;"> |
|
||||
<!-- 左侧搜索区域 --> |
|
||||
<div style="display: flex; gap: 10px; align-items: center;"> |
|
||||
<span style="white-space: nowrap;">姓名：</span> |
|
||||
<el-input |
|
||||
v-model="searchData.name" |
|
||||
placeholder="请输入姓名" |
|
||||
style="width: 150px;" |
|
||||
clearable |
|
||||
></el-input> |
|
||||
|
|
||||
<span style="white-space: nowrap; margin-left: 10px;">精网号：</span> |
|
||||
<el-input |
|
||||
v-model="searchData.jingwangId" |
|
||||
placeholder="请输入精网号" |
|
||||
style="width: 180px;" |
|
||||
clearable |
|
||||
@input="handleJingwangIdInput" |
|
||||
></el-input> |
|
||||
<el-button type="primary" @click="search" style="margin-left: 10px;">搜索</el-button> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 右侧操作按钮区域 --> |
|
||||
<div style="display: flex; gap: 10px;"> |
|
||||
<el-button type="primary" @click="addUser">添加用户</el-button> |
|
||||
<el-button type="success" @click="importExcel">导入Excel</el-button> |
|
||||
</div> |
|
||||
|
<!-- 底部操作区域 --> |
||||
|
<div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;"> |
||||
|
<el-button text type="danger" @click="batchDelete">批量删除</el-button> |
||||
|
<div style="display: flex; align-items: center;"> |
||||
|
<span style="margin-right: 15px;">共{{ pagination.total }}条</span> |
||||
|
<el-select v-model="pagination.pageSize" style="width: 120px; margin-right: 15px;"> |
||||
|
<el-option label="10条/页" :value="10" /> |
||||
|
<el-option label="20条/页" :value="20" /> |
||||
|
<el-option label="50条/页" :value="50" /> |
||||
|
</el-select> |
||||
|
<el-pagination layout="prev, pager, next" :total="pagination.total" :page-size="pagination.pageSize" v-model:current-page="currentPage" /> |
||||
|
<el-input v-model="jumpPage" style="width: 80px; margin-left: 15px; margin-right: 10px;" placeholder="页码" /> |
||||
|
<el-button type="primary" @click="goToPage">前往</el-button> |
||||
|
</div> |
||||
</div> |
</div> |
||||
|
|
||||
<!-- 用户表格 --> |
|
||||
<el-table :data="filteredUsers" style="width: 100%;" :row-style="{ height: '60px' }"> |
|
||||
<el-table-column type="selection" width="200" /> |
|
||||
<el-table-column prop="id" label="ID" width="250" /> |
|
||||
<el-table-column prop="name" label="姓名" width="250" /> |
|
||||
<el-table-column prop="jingwangId" label="精网号" width="300" /> |
|
||||
<el-table-column label="操作" > |
|
||||
<template #default="scope"> |
|
||||
<el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
|
|
||||
<!-- 底部操作区域 --> |
|
||||
<div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;"> |
|
||||
<el-button type="danger" @click="batchDelete">批量删除</el-button> |
|
||||
<div style="display: flex; align-items: center;"> |
|
||||
<span style="margin-right: 15px;">共{{ total }}条</span> |
|
||||
<el-select v-model="pageSize" style="width: 120px; margin-right: 15px;"> |
|
||||
<el-option label="10条/页" :value="10" /> |
|
||||
<el-option label="20条/页" :value="20" /> |
|
||||
<el-option label="50条/页" :value="50" /> |
|
||||
</el-select> |
|
||||
<el-pagination |
|
||||
layout="prev, pager, next" |
|
||||
:total="total" |
|
||||
:page-size="pageSize" |
|
||||
v-model:current-page="currentPage" |
|
||||
/> |
|
||||
<el-input |
|
||||
v-model="jumpPage" |
|
||||
style="width: 80px; margin-left: 15px; margin-right: 10px;" |
|
||||
placeholder="页码" |
|
||||
/> |
|
||||
<el-button type="primary" @click="goToPage">前往</el-button> |
|
||||
</div> |
|
||||
|
</el-card> |
||||
|
<el-dialog v-model="addVisible" title="添加用户" width="500" align-center> |
||||
|
<el-form ref="addForm" :model="addObj" label-width="80px"> |
||||
|
<el-form-item label="姓名" prop="username"> |
||||
|
<el-input v-model="addObj.username" placeholder="请输入用户姓名" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="精网号" prop="jwcode"> |
||||
|
<el-input v-model="addObj.jwcode" placeholder="请输入用户精网号" @input="trimJwcode" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="addVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="submitAdd">确定</el-button> |
||||
</div> |
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
</el-card> |
|
||||
|
|
||||
<el-dialog |
|
||||
v-model="centerDialogVisible" |
|
||||
title="添加中奖用户" |
|
||||
width="500" |
|
||||
align-center |
|
||||
> |
|
||||
<el-form ref="addForm" :model="winuser" label-width="80px"> |
|
||||
<el-form-item label="姓名" prop="name"> |
|
||||
<el-input v-model="winuser.name" placeholder="请输入中奖用户姓名" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="精网号" prop="jingwangId"> |
|
||||
<el-input v-model="winuser.jingwangId" placeholder="请输入中奖用户精网号" @input="handleJingwangIdInput"/> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button @click="cancel">取消</el-button> |
|
||||
<el-button type="primary" @click="addwinUser"> |
|
||||
确定 |
|
||||
</el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref, computed } from 'vue' |
|
||||
import { useRouter } from 'vue-router' |
|
||||
|
|
||||
const router = useRouter() |
|
||||
const centerDialogVisible = ref(false) |
|
||||
// 用户数据 |
|
||||
const users = ref([ |
|
||||
{ |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, { |
|
||||
id: 1, |
|
||||
name: '张家伟', |
|
||||
jingwangId: '90047666' |
|
||||
}, |
|
||||
]) |
|
||||
|
|
||||
// 搜索文本 |
|
||||
|
|
||||
const searchData = ref({ |
|
||||
name: '', |
|
||||
jingwangId: '', |
|
||||
}) |
|
||||
// 分页相关 |
|
||||
const currentPage = ref(1) |
|
||||
const pageSize = ref(10) |
|
||||
const jumpPage = ref('') |
|
||||
const total = computed(() => users.value.length) |
|
||||
|
|
||||
// 过滤后的用户数据 |
|
||||
const filteredUsers = computed(() => { |
|
||||
// 实际项目中这里会有搜索过滤逻辑 |
|
||||
const start = (currentPage.value - 1) * pageSize.value |
|
||||
const end = start + pageSize.value |
|
||||
return users.value.slice(start, end) |
|
||||
}) |
|
||||
|
|
||||
const winuser=ref({ |
|
||||
name: '', |
|
||||
jingwangId: '', |
|
||||
}) |
|
||||
|
|
||||
const search = () => { |
|
||||
// 搜索逻辑 |
|
||||
console.log('执行搜索') |
|
||||
} |
|
||||
|
|
||||
// 删除用户 |
|
||||
const deleteUser = (user) => { |
|
||||
const index = users.value.findIndex(u => u.id === user.id) |
|
||||
if (index !== -1) { |
|
||||
users.value.splice(index, 1) |
|
||||
|
<script setup> |
||||
|
import { ref, computed, onMounted } from 'vue' |
||||
|
import { useRouter } from 'vue-router' |
||||
|
import { getUserList, addUser, deleteUser, deleteUsers } from '@/api/manage/gift'; |
||||
|
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
|
const router = useRouter() |
||||
|
const addVisible = ref(false) |
||||
|
const tableData = ref([]) |
||||
|
// 存批量删除的id们 |
||||
|
const selectedIds = ref([]) |
||||
|
// 搜索对象 |
||||
|
const searchObj = ref({ |
||||
|
username: '', |
||||
|
jwcode: '', |
||||
|
}) |
||||
|
const addObj = ref({ |
||||
|
username: '', |
||||
|
jwcode: '', |
||||
|
}) |
||||
|
const pagination = ref({ |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
total:0 |
||||
|
}) |
||||
|
const openAdd = () => { |
||||
|
addObj.value = {} |
||||
|
addVisible.value = true |
||||
|
} |
||||
|
// 查全部 |
||||
|
const getUsers = async () => { |
||||
|
try { |
||||
|
const res = await getUserList({ |
||||
|
username: searchObj.value.username, |
||||
|
jwcode: searchObj.value.jwcode, |
||||
|
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 batchDelete = () => { |
|
||||
// 实际项目中这里会有批量删除逻辑 |
|
||||
console.log('执行批量删除') |
|
||||
|
} |
||||
|
// 添加 |
||||
|
const submitAdd = async () => { |
||||
|
if (!addObj.value.username || addObj.value.jwcode === '') { |
||||
|
ElMessage.error('请填写完整信息') |
||||
|
return |
||||
} |
} |
||||
|
|
||||
//添加用户 |
|
||||
const addUser = () => { |
|
||||
// 实际添加用户逻辑 |
|
||||
centerDialogVisible.value = true |
|
||||
|
try { |
||||
|
const data = { |
||||
|
username: addObj.value.username, |
||||
|
jwcode: addObj.value.jwcode |
||||
|
} |
||||
|
console.log('看看添加参数',data) |
||||
|
const response = await addUser(data) |
||||
|
if (response.code === 200) { |
||||
|
ElMessage.success('添加成功') |
||||
|
addVisible.value = false |
||||
|
getUsers() |
||||
|
} else { |
||||
|
ElMessage.error(response.message || '添加失败') |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('添加等级失败:', error) |
||||
|
ElMessage.error('添加失败，请重试') |
||||
} |
} |
||||
|
|
||||
//取消添加 |
|
||||
const cancel = () => { |
|
||||
centerDialogVisible.value = false |
|
||||
winuser.value ={ |
|
||||
name: '', |
|
||||
jingwangId: '' |
|
||||
} |
|
||||
} |
|
||||
//添加活动 |
|
||||
const addwinUser = () => { |
|
||||
centerDialogVisible.value = false |
|
||||
//TODO: 添加活动逻辑 |
|
||||
winuser.value ={ |
|
||||
name: '', |
|
||||
jingwangId: '' |
|
||||
} |
} |
||||
|
// 删除用户 |
||||
|
const delUser = (row) => { |
||||
|
ElMessageBox.confirm('确定要删除该用户吗?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(async () => { |
||||
|
try { |
||||
|
const id = String(row.id) |
||||
|
console.log('删除等级的id是:', id) |
||||
|
const response = await deleteUser(id) |
||||
|
if (response.code === 200) { |
||||
|
ElMessage.success('删除成功') |
||||
|
getUsers() |
||||
|
} else { |
||||
|
ElMessage.error(response.message || '删除失败') |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('删除失败:', error) |
||||
|
ElMessage.error('删除失败，请重试') |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
ElMessage.info('已取消删除') |
||||
|
}) |
||||
} |
} |
||||
|
|
||||
// 导入Excel |
|
||||
const importExcel = () => { |
|
||||
// 实际导入逻辑 |
|
||||
console.log('导入Excel') |
|
||||
|
// 批量删除 |
||||
|
const batchDelete = async () => { |
||||
|
if (selectedIds.value.length === 0) { |
||||
|
ElMessage.warning('请先选择需要删除的用户') |
||||
|
return |
||||
} |
} |
||||
const goBack = () => { |
|
||||
router.back() |
|
||||
|
|
||||
|
ElMessageBox.confirm(`确定要删除选中的${selectedIds.value.length}条数据吗？`,// 为啥是$?? |
||||
|
'删除确认', |
||||
|
{ |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
} |
} |
||||
// 跳转到指定页 |
|
||||
const goToPage = () => { |
|
||||
const page = parseInt(jumpPage.value) |
|
||||
if (!isNaN(page) && page > 0 && page <= Math.ceil(total.value / pageSize.value)) { |
|
||||
currentPage.value = page |
|
||||
|
).then(async () => { |
||||
|
try { |
||||
|
const response = await deleteUsers(selectedIds.value.join(',')) |
||||
|
console.log(selectedIds.value.join(',')) |
||||
|
if (response.code === 200) { |
||||
|
ElMessage.success('批量删除成功') |
||||
|
getUsers() |
||||
|
selectedIds.value = [] |
||||
|
} else { |
||||
|
ElMessage.error(response.message || '批量删除失败') |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('批量删除请求失败:', error) |
||||
|
ElMessage.error('网络错误，批量删除失败') |
||||
} |
} |
||||
jumpPage.value = '' |
|
||||
|
}).catch(() => { |
||||
|
ElMessage.info('已取消批量删除') |
||||
|
}) |
||||
|
} |
||||
|
const goBack = () => { |
||||
|
router.back() |
||||
|
} |
||||
|
// 跳转到指定页 |
||||
|
const goToPage = () => { |
||||
|
const page = parseInt(jumpPage.value) |
||||
|
if (!isNaN(page) && page > 0 && page <= Math.ceil(total.value / pageSize.value)) { |
||||
|
currentPage.value = page |
||||
} |
} |
||||
|
jumpPage.value = '' |
||||
|
} |
||||
|
const handleSelectionChange = (selection) => { |
||||
|
// 提取选中行的id组成数组 |
||||
|
selectedIds.value = selection.map(row => row.id) |
||||
|
} |
||||
|
const trimJwcode = (value) => { |
||||
|
searchObj.value.jwcode = value.replace(/\D/g, '') |
||||
|
} |
||||
|
onMounted(() => { |
||||
|
getUsers() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
const handleJingwangIdInput = (value) => { |
|
||||
searchData.value.jingwangId = value.replace(/\D/g, '') |
|
||||
|
<style scoped> |
||||
|
.el-card { |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||
} |
} |
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.el-card { |
|
||||
border-radius: 8px; |
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|
||||
} |
|
||||
|
|
||||
.el-table { |
|
||||
margin-top: 10px; |
|
||||
} |
|
||||
|
|
||||
.el-pagination { |
|
||||
margin: 0; |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
|
.el-table { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.el-pagination { |
||||
|
margin: 0; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue