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> |
|||
<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> |
|||
|
|||
<!-- 用户表格 --> |
|||
<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> |
|||
</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> |
|||
<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> |
|||
|
|||
<!-- 用户表格 --> |
|||
<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> |
|||
</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