|
|
|
@ -3,59 +3,54 @@ |
|
|
|
<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> |
|
|
|
<el-card style="min-height: 90vh; max-height: 90vh;"> |
|
|
|
<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> |
|
|
|
<div style="display: flex; gap: 10px; align-items: center;"> |
|
|
|
姓名：<el-input v-model="searchObj.username" placeholder="请输入姓名" style="width: 150px;" 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> |
|
|
|
<div style="display: flex; gap: 10px;"> |
|
|
|
<el-button type="primary" @click="openAdd">添加用户</el-button> |
|
|
|
<el-button type="success" @click="importExcel">导入Excel</el-button> |
|
|
|
<el-button type="success" @click="handleImportClick">导入Excel</el-button> |
|
|
|
<input type="file" ref="fileInput" style="display: none" accept=".xlsx,.xls" @change="handleFileChange" /> |
|
|
|
</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 :data="tableData" style="width: 100%;" :row-style="{ height: '60px' }" |
|
|
|
@selection-change="handleSelectionChange"> |
|
|
|
<el-table-column type="selection" width="200" /> |
|
|
|
<el-table-column type="index" label="ID" width="250"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ pagination.pageSize * (pagination.pageNum - 1) + scope.$index + 1 }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="username" label="姓名" width="200" /> |
|
|
|
<el-table-column prop="jwcode" label="精网号" width="200" /> |
|
|
|
<el-table-column label="操作" fixed="right"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="username" label="姓名" width="250" /> |
|
|
|
<el-table-column prop="jwcode" label="精网号" width="300" /> |
|
|
|
<el-table-column label="操作"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button text type="danger" @click="delUser(scope.row)">删除</el-button> |
|
|
|
<el-button text size="small" type="danger" @click="delUser(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 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 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" /> |
|
|
|
</div> |
|
|
|
<el-button type="danger" @click="batchDelete">批量删除</el-button> |
|
|
|
<!-- 分页 --> |
|
|
|
<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" /> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
<el-dialog v-model="addVisible" title="添加用户" width="500" align-center> |
|
|
|
<el-form ref="addForm" :model="addObj" label-width="80px"> |
|
|
|
<el-form :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-input v-model="addObj.jwcode" placeholder="请输入精网号" @input="trimAddJwcode" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<template #footer> |
|
|
|
@ -68,34 +63,63 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref, computed, onMounted } from 'vue' |
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
import { getUserList, addUser, deleteUser, deleteUsers } from '@/api/manage/gift'; |
|
|
|
import { ref, onMounted } from 'vue' |
|
|
|
import { useRouter, useRoute } from 'vue-router' |
|
|
|
import { getUserList, addUser, deleteUser, deleteUsers } from '@/api/manage/gift' |
|
|
|
// 导入的，单拉 |
|
|
|
import { importUsers } from '@/api/manage/gift' |
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
import { pa } from 'element-plus/es/locales.mjs'; |
|
|
|
const router = useRouter() |
|
|
|
const addVisible = ref(false) |
|
|
|
const tableData = ref([]) |
|
|
|
// 存批量删除的id们 |
|
|
|
// 批量删除的id们 |
|
|
|
const selectedIds = ref([]) |
|
|
|
// 搜索对象 |
|
|
|
const searchObj = ref({ |
|
|
|
username: '', |
|
|
|
jwcode: '', |
|
|
|
}) |
|
|
|
const addObj = ref({ |
|
|
|
username: '', |
|
|
|
jwcode: '', |
|
|
|
jwcode: '' |
|
|
|
}) |
|
|
|
const openAdd = () => { |
|
|
|
addObj.value = {} |
|
|
|
addVisible.value = true |
|
|
|
} |
|
|
|
const addVisible = ref(false) |
|
|
|
const tableData = ref([]) |
|
|
|
const pagination = ref({ |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
total:0 |
|
|
|
total: 0 |
|
|
|
}) |
|
|
|
const openAdd = () => { |
|
|
|
addObj.value = {} |
|
|
|
addVisible.value = true |
|
|
|
const searchObj = ref({ |
|
|
|
username: '', |
|
|
|
jwcode: '', |
|
|
|
}) |
|
|
|
const fileInput = ref(null) |
|
|
|
|
|
|
|
const handleImportClick = () => { |
|
|
|
fileInput.value.click() |
|
|
|
} |
|
|
|
const handleFileChange = async (e) => { |
|
|
|
const file = e.target.files[0] // 只取第一个文件 |
|
|
|
if (!file) return |
|
|
|
const fileName = file.name |
|
|
|
if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) { |
|
|
|
ElMessage.error('仅支持Excel文件(.xlsx, .xls)') |
|
|
|
e.target.value = '' |
|
|
|
return |
|
|
|
} |
|
|
|
try { |
|
|
|
const res = await importUsers(file) |
|
|
|
if (res.code === 200) { |
|
|
|
ElMessage.success(res.data || '导入成功') |
|
|
|
getUsers() |
|
|
|
} else { |
|
|
|
ElMessage.error(res.message || '导入失败') |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('导入失败:', error) |
|
|
|
ElMessage.error('导入失败，请重试') |
|
|
|
} |
|
|
|
e.target.value = '' |
|
|
|
} |
|
|
|
|
|
|
|
// 查全部 |
|
|
|
const getUsers = async () => { |
|
|
|
try { |
|
|
|
@ -105,7 +129,7 @@ const getUsers = async () => { |
|
|
|
pageNum: pagination.value.pageNum, |
|
|
|
pageSize: pagination.value.pageSize |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
if (res.code === 200) { |
|
|
|
tableData.value = res.data.list |
|
|
|
pagination.value.total = res.data.total |
|
|
|
@ -117,19 +141,14 @@ const getUsers = async () => { |
|
|
|
ElMessage.error('请求失败，请重试') |
|
|
|
} |
|
|
|
} |
|
|
|
// 添加 |
|
|
|
// 新增 |
|
|
|
const submitAdd = async () => { |
|
|
|
if (!addObj.value.username || addObj.value.jwcode === '') { |
|
|
|
if (!addObj.value.username || !addObj.value.jwcode) { |
|
|
|
ElMessage.error('请填写完整信息') |
|
|
|
return |
|
|
|
} |
|
|
|
try { |
|
|
|
const data = { |
|
|
|
username: addObj.value.username, |
|
|
|
jwcode: addObj.value.jwcode |
|
|
|
} |
|
|
|
console.log('看看添加参数',data) |
|
|
|
const response = await addUser(data) |
|
|
|
const response = await addUser(addObj.value) |
|
|
|
if (response.code === 200) { |
|
|
|
ElMessage.success('添加成功') |
|
|
|
addVisible.value = false |
|
|
|
@ -138,11 +157,12 @@ const submitAdd = async () => { |
|
|
|
ElMessage.error(response.message || '添加失败') |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('添加等级失败:', error) |
|
|
|
console.error('添加失败:', error) |
|
|
|
ElMessage.error('添加失败，请重试') |
|
|
|
} |
|
|
|
} |
|
|
|
// 删除用户 |
|
|
|
|
|
|
|
// 删除 |
|
|
|
const delUser = (row) => { |
|
|
|
ElMessageBox.confirm('确定要删除该用户吗?', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
@ -150,9 +170,7 @@ const delUser = (row) => { |
|
|
|
type: 'warning' |
|
|
|
}).then(async () => { |
|
|
|
try { |
|
|
|
const id = String(row.id) |
|
|
|
console.log('删除等级的id是:', id) |
|
|
|
const response = await deleteUser(id) |
|
|
|
const response = await deleteUser(row.id) |
|
|
|
if (response.code === 200) { |
|
|
|
ElMessage.success('删除成功') |
|
|
|
getUsers() |
|
|
|
@ -167,24 +185,20 @@ const delUser = (row) => { |
|
|
|
ElMessage.info('已取消删除') |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
// 批量删除 |
|
|
|
const batchDelete = async () => { |
|
|
|
if (selectedIds.value.length === 0) { |
|
|
|
ElMessage.warning('请先选择需要删除的用户') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
ElMessageBox.confirm(`确定要删除选中的${selectedIds.value.length}条数据吗？`,// 为啥是$?? |
|
|
|
'删除确认', |
|
|
|
{ |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
} |
|
|
|
).then(async () => { |
|
|
|
ElMessageBox.confirm(`确定要删除选中的${selectedIds.value.length}条数据吗？`, '删除确认', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(async () => { |
|
|
|
try { |
|
|
|
const response = await deleteUsers(selectedIds.value.join(',')) |
|
|
|
console.log(selectedIds.value.join(',')) |
|
|
|
if (response.code === 200) { |
|
|
|
ElMessage.success('批量删除成功') |
|
|
|
getUsers() |
|
|
|
@ -193,21 +207,23 @@ const batchDelete = async () => { |
|
|
|
ElMessage.error(response.message || '批量删除失败') |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('批量删除请求失败:', error) |
|
|
|
console.error('批量删除失败:', error) |
|
|
|
ElMessage.error('网络错误，批量删除失败') |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
ElMessage.info('已取消批量删除') |
|
|
|
}) |
|
|
|
} |
|
|
|
const goBack = () => { |
|
|
|
router.back() |
|
|
|
} |
|
|
|
|
|
|
|
// 批量删除变化 |
|
|
|
const handleSelectionChange = (selection) => { |
|
|
|
// 提取选中行的id组成数组 |
|
|
|
selectedIds.value = selection.map(row => row.id) |
|
|
|
console.log('选中的id们是:', selectedIds.value) |
|
|
|
} |
|
|
|
const trimJwcode = (value) => { |
|
|
|
searchObj.value.jwcode = value.replace(/\D/g, '') |
|
|
|
} |
|
|
|
const trimAddJwcode = (value) => { |
|
|
|
addObj.value.jwcode = value.replace(/\D/g, '') |
|
|
|
} |
|
|
|
const handleSizeChange = (val) => { |
|
|
|
pagination.value.pageSize = val |
|
|
|
@ -218,8 +234,9 @@ const handleCurrentChange = (val) => { |
|
|
|
pagination.value.pageNum = val |
|
|
|
getUsers() |
|
|
|
} |
|
|
|
const trimJwcode = (value) => { |
|
|
|
searchObj.value.jwcode = value.replace(/\D/g, '') |
|
|
|
// 返回上一页 |
|
|
|
const goBack = () => { |
|
|
|
router.back() |
|
|
|
} |
|
|
|
onMounted(() => { |
|
|
|
getUsers() |
|
|
|
|
lihuilin
4 weeks ago