|
|
|
@ -3,7 +3,7 @@ |
|
|
|
<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: 85vh; max-height: 85vh;"> |
|
|
|
<el-card style="height:87vh"> |
|
|
|
<div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;"> |
|
|
|
<div style="display: flex; gap: 10px; align-items: center;"> |
|
|
|
姓名：<el-input v-model="searchObj.username" placeholder="请输入姓名" style="width: 150px;" clearable></el-input> |
|
|
|
@ -17,25 +17,24 @@ |
|
|
|
<input type="file" ref="fileInput" style="display: none" accept=".xlsx,.xls" @change="handleFileChange" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 用户表格 --> |
|
|
|
<div class="table-container"> |
|
|
|
<el-table :data="tableData" style="width: 100%;" :row-style="{ height: '58px' }" |
|
|
|
@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="250" /> |
|
|
|
<el-table-column prop="jwcode" label="精网号" width="300" /> |
|
|
|
<el-table-column label="操作"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button text size="small" type="danger" @click="delUser(scope.row)">删除</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<!-- 用户表格 --> |
|
|
|
<el-table :data="tableData" style="width: 100%;height:640px" :row-style="{ height: '60px' }" |
|
|
|
@selection-change="handleSelectionChange"> |
|
|
|
<el-table-column type="selection" width="200" /> |
|
|
|
<el-table-column type="index" label="ID" width="250" show-overflow-tooltip> |
|
|
|
<template #default="scope"> |
|
|
|
{{ pagination.pageSize * (pagination.pageNum - 1) + scope.$index + 1 }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="username" label="姓名" width="250" show-overflow-tooltip /> |
|
|
|
<el-table-column prop="jwcode" label="精网号" width="300" show-overflow-tooltip /> |
|
|
|
<el-table-column label="操作"> |
|
|
|
<template #default="scope"> |
|
|
|
<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 type="danger" @click="batchDelete">批量删除</el-button> |
|
|
|
@ -45,11 +44,13 @@ |
|
|
|
:total="pagination.total" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" |
|
|
|
@current-change="handleCurrentChange" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
|
|
|
|
<el-dialog v-model="addVisible" title="添加用户" width="500" align-center> |
|
|
|
<el-form :model="addObj" label-width="80px"> |
|
|
|
<el-form-item label="姓名" prop="username"> |
|
|
|
<el-input v-model="addObj.username" placeholder="请输入用户姓名" /> |
|
|
|
<el-input v-model="addObj.username" placeholder="请输入用户姓名" @input="trimUsername" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="精网号" prop="jwcode"> |
|
|
|
<el-input v-model="addObj.jwcode" placeholder="请输入精网号" @input="trimAddJwcode" /> |
|
|
|
@ -144,11 +145,25 @@ const getUsers = async () => { |
|
|
|
} |
|
|
|
} |
|
|
|
// 新增 |
|
|
|
// 修改 submitAdd 函数，增加长度校验 |
|
|
|
const submitAdd = async () => { |
|
|
|
if (!addObj.value.username || !addObj.value.jwcode) { |
|
|
|
ElMessage.error('请填写完整信息') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
// 校验用户名长度 |
|
|
|
if (addObj.value.username.length > 30) { |
|
|
|
ElMessage.error('姓名最长为30个字符') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
// 校验精网号长度是否在5-12位之间 |
|
|
|
if (addObj.value.jwcode.length < 5 || addObj.value.jwcode.length > 12) { |
|
|
|
ElMessage.error('精网号必须为5-12位数字') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
try { |
|
|
|
const response = await addUser(addObj.value) |
|
|
|
if (response.code === 200) { |
|
|
|
@ -225,7 +240,17 @@ const trimJwcode = (value) => { |
|
|
|
searchObj.value.jwcode = value.replace(/\D/g, '') |
|
|
|
} |
|
|
|
const trimAddJwcode = (value) => { |
|
|
|
addObj.value.jwcode = value.replace(/\D/g, '') |
|
|
|
// 限制只允许数字，并且长度在5-12位之间 |
|
|
|
const numericValue = value.replace(/\D/g, ''); |
|
|
|
addObj.value.jwcode = numericValue.slice(0, 12); // 最多保留12位 |
|
|
|
} |
|
|
|
|
|
|
|
// 添加处理用户名输入的函数 |
|
|
|
const trimUsername = (value) => { |
|
|
|
// 只允许中文、英文字符 |
|
|
|
const filteredValue = value.replace(/[^\u4e00-\u9fa5a-zA-Z]/g, ''); |
|
|
|
// 限制最长30个字符 |
|
|
|
addObj.value.username = filteredValue.slice(0, 30); |
|
|
|
} |
|
|
|
const handleSizeChange = (val) => { |
|
|
|
pagination.value.pageSize = val |
|
|
|
@ -246,43 +271,10 @@ onMounted(() => { |
|
|
|
</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; |
|
|
|
} |
|
|
|
|
|
|
|
.table-container { |
|
|
|
height: 650px; /* 设置固定高度 */ |
|
|
|
overflow-y: auto; /* 启用垂直滚动条 */ |
|
|
|
overflow-x: hidden; /* 隐藏水平滚动条（如果不需要的话） */ |
|
|
|
border: 1px solid #ebeef5; /* 可选：添加边框 */ |
|
|
|
border-radius: 4px; /* 可选：添加圆角 */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 可选：自定义滚动条样式 */ |
|
|
|
.table-container::-webkit-scrollbar { |
|
|
|
width: 8px; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.table-container::-webkit-scrollbar-track { |
|
|
|
background: #f1f1f1; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.table-container::-webkit-scrollbar-thumb { |
|
|
|
background: #c1c1c1; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.table-container::-webkit-scrollbar-thumb:hover { |
|
|
|
background: #a8a8a8; |
|
|
|
} |
|
|
|
</style> |
wangxiangwen
lihuilin